Guía Facultades - PORTAL JAVERIANA

1er, 2do y 3er Niveles de Navegación

Pontificia Universidad Javeriana
Dirección de Comunicaciones – DTI
2014
Introducción

Este manual otorga conocimientos entorno a la directrices que se deben

tener en cuenta para la entrega de contenidos y la estructuración del sitio
web para cada facultad o instituto de la Pontificia Universidad Javeriana.
Para el correcto desarrollo del sitio, aquí encontrará normativas,
recomendaciones y algunos ejemplos que le ayudaran a desarrollar los
formatos para el levantamiento de contenidos que deberá entregar el
encargado de cada facultad.

También encontrará las instrucciones para el montaje de contenidos a la

nueva plataforma y algunos ejemplos que le ayudarán a la hora de cargar
información, imágenes o multimedia a sus sitios.

Pag.1
Índice

Introducción........................................................................................................ 1
Índice.................................................................................................................... 2
1. Directrices para el personal de apoyo en el montaje de contenidos........................ 3
2. Directrices montaje de sitio....................................................................................... 4 - 5
2.1 Índice de directrices..................................................................................... 6
3. Definición de niveles de publicación......................................................................... 7-11
4. Formato de levantamiento de contenidos para nuevos sitios................................... 12
4.1 Objetivo del formato de levantamiento de contenidos..................................13
4.2 Formato de levantamiento de información para nuevos sitios.....................14-16
4.3 Documentos y títulos....................................................................................17
4.4 Imágenes y sus títulos..................................................................................18
5. Conversión de imágenes...........................................................................................19-23
Montaje de contenidos....................................................................................... 24
6. ¿Que es LifeRay?..................................................................................................... 25
7. Ingreso al portal........................................................................................................ 26
8. Navegación y Estructura........................................................................................... 27
9. Conceptos.................................................................................................................28-29
9.2.3 Añadir contenido web.......................................................................... 30-31
9.2.4 Cargar contenidos a partir de plantillas............................................... 32-33
9.3 Publicador de contenidos............................................................................... 34-37
9.4 Banner............................................................................................................ 38-40
9.5 Cargar videos de Youtube o Vime.................................................................. 41-43
9.6 Realizar tablas de contenidos........................................................................ 44-45
9.7 Crear y agregar BitMap.................................................................................. 46-49
9.8 Biblioteca de documentos ............................................................................. 50-53
9.9 Repositorio de documentos ........................................................................... 54-55
9.10 SEO (Search Engine Optimization)...............................................................56-57
Pag.2
1. Directrices para el personal de apoyo en el montaje de contenidos

• Personal de la Facultad:

• Por estatutos de la Universidad, el Secretario de Facultad es el

responsable del proyecto dentro de cada facultad
• El personal encargado por el Secretario debe tener una disponibilidad
de mínimo medio tiempo para las actividades de recolección y montaje
de contenidos
• No se debe dar responsabilidades a estudiantes o personas temporales.
• Se recomienda que la persona encargada del manejo del sitio, realice
revisiones periódicas para mantener las paginas en correcto
funcionamiento y actualizadas.

• Personal de la Brigada Web

• La dirección de Comunicaciones asignará un brigadista por facultad, quien

brindará el soporte y apoyo necesario al proceso
• Todo requerimiento debe ser entregado al brigadista asignado a la facultad.
• El brigadista será una persona de apoyo para solucionar inquietudes y
asesorar a las facultades, mas NO será el encargado de cargar contenidos
en los sitios web.

Pag.3
2. Directrices montaje del sitio

• Los enlaces externos (diferentes de www.javeriana.edu.co) deben abrir en

pestañas diferentes.
• No se deben repetir enlaces entre 2do y 3er nivel de navegación
(Ver página 7)
• Solo se construirá una sección FAQ por Facultad que agrupe preguntas
por dependencia con el fin de centralizar el mantenimiento de esta
información (calidad de congruencia).
• Los enlaces de redes sociales deben estar avalados por la Dirección de
Comunicaciones
• No se construirán secciones específicas con nombre boletín. Para las
noticias se dedicará el home de cada facultad
• El Footer (pie de página) general de la Universidad no se deberá modificar
ni cambiar, salvo que la Dirección de Comunicaciones así lo estipule.
(Ver página 8)
• Toda la información de admisiones y aspirantes a la carrera será
adminsitrada por la oficina de Promoción Institucional
• La paleta de colores será la misma que se emplea en todo el portal
universitario (Ver página 7)

Pag.4
2. Directrices montaje del sitio

• El nombre de la Facultad o dependencia debe permanecer en cada página

y debe tener enlace al home de la facultad
• Se recomienda que cada página tenga un recurso gráfico como foco
visual del sitio
• Se recomienda que en el primer y segundo nivel no existan párrafos con
más de 5 renglones
• Se recomienda que cada página muestre la ruta recorrida (miga de pan),
donde se evidencia la ubicación del usuario dentro del sitio.

Pag.5
2.1 Índice de Directrices

• Referencia CSS
• Referencia SEO
• Referencia Google Analytics
• Referencia Facebook
• Referencia Twitter
• Portlets
• Sitios personales (Blogs aprobados)
• Encuestas

Pag.6
3. Definición de niveles de publicación

Tercer Nivel:
Primer Nivel:
Contenidos específicos
Home de facultad
(Presenta Noticias y Menú General)
RGB:
154, 175, 201 Paleta de
Colores
255, 204, 71
2 3, 52, 119

Segundo Nivel:
Menú especifico por tipo de usuario:
Estudiantes, Aspirantes, egresados y
operación de la facultad
Pag.7
3. Definición de niveles de publicación
HOME Principal
Header (se mantiene en la pagina principal)

Solo uno
Tiara Buscador
por facultad
Máximo 9
Elementos

Nombre de
1. la facultad

Finaliza con el footer de la facultad: Nombre facultad, dirección, edificio, PBX

Y el Footer general de la universidad

1. Acá podrán ir noticias relevantes de la facultad que contengan texto, imágenes o videos.
Pag.8
3. Definición de niveles de publicación
Estudiantes

Debe ir al
enlace
general de
la página Miga de pan
principal

Presentación
Programas
Pregrado

Pag.9
3. Definición de niveles de publicación

Egresados

Las facultades que no tengan esta

sección, serán redireccionados al
sitio principal de egresados de la
universidad

Pag.10
3. Definición de niveles de publicación

Facultad

En esta página se podrá colocar información orgánica e historia de la facultad

Pag.11
4. Formato de levantamiento de contenidos para nuevos sitios

• Debe llenarse en forma completa y clara

• Los contenidos deben ser concisos y estar
preparados para publicación web (no
sobrepasar 5 renglones por párrafo)
• La imágenes deben estar en formato jpg
progresivo en caso de ser de gran tamaño o
png en caso de se imágenes pequeñas o
transparencias.
• Todo documento que se coloque para
descargar en el sitio debe venir enlazado
desde el documento del formato y debe estar
organizado por carpetas asociadas al código
de la página donde se encuentre publicado.
• Al finalizar el levantamiento, el formato debe
estar aprobado por el Secretario de Facultad.
Sin esta aprobación no se podrá proceder al
montaje del sitio.
• No se admitirán cambios en contenidos una
vez cerrado el proceso de levantamiento y en
tanto no se libere la página al público.

Pag.12
4.1 Objetivo del formato de levantamiento de contenidos

Los formatos de levantamiento de contenido nos permite tener control sobre

diferentes variables a nivel institucional. SEO (Search Engine Optimization)
es una técnica que potencializaremos desde al acceso eficaz a dichos
contenidos y nos permitirá mejorar el posicionamiento de una pagina Web.
También, esta herramienta funciona como un formato de seguimiento para
controlar los contenidos publicados y lograr clasificar las descripciones
específicas que pueden ser fácilmente rastreables por los diferentes
buscadores según las etiquetas que se le han otorgado.

Pag.13
4.2 Formato de levantamiento de información para nuevos sitios

Código de
referencia
1.
en el formato
de contenidos

Pag.14
4.2 Formato de levantamiento de información para nuevos sitios

• Cada enlace que se defina y que genere una nueva página deberá estar
codificado. Este código debe estar relacionado en el formato de
levantamiento del contenido para facilitar el posterior montaje.
• El Título de la página debe ser de máximo 70 caracteres en minúsculas
sostenidas.
• Todo el contenido debe estar debidamente meta-descrito para fines de
SEO.
• Toda página debe tener el listado de direcciones web equivalentes del sitio
anterior al sitio nuevo. Pueden existir varias direcciones viejas que lleven a
una página nueva, pero no debe suceder que varias direcciones nuevas se
encuentren relacionadas con un sola dirección de partida del sitio anterior.

Sitio anterior 1 Sitio nuevo 1

Sitio anterior 2 Nuevo sitio 1 Sitio anterior 1 Sitio nuevo 2

Sitio anterior 3 Sitio nuevo 3

Correcto Incorrecto

Pag.15
4.2 Formato de Levantamiento de información para nuevos sitios

• Los campo asociados al responsable de la Brigada

Web, Grupo dot y Facultad deben estar
relacionados para cada formato. Ejemplo de carpetas
• El campo Dirección de Montaje en producción se de contenidos:
llenará una vez se genere en la herramienta la
dirección de la página.
• Cualquier pregunta sobre el formato debe ser
planteada al representante de la brigada web
directamente.
• Todas las palabras clave deben ir en minúscula
sostenida.
• El material debe ser entregado en formato digital
con la siguiente estructura de carpetas para cada
página:
• Código de página-titulo
• Formato del sitio
• img (carpeta de imágenes)
• doc (carpeta de documentos)
• Código de pagina-titulo (en el caso de que una página
presente subpáginas sin importar el nivel)

Pag.16
4.3 Documentos y títulos

• Los documentos a montar deben ser entregados en medio digital sin

importar el formato
• Se debe usar de preferencia formato pdf para publicación.
• Los títulos de los documentos deben ser de máximo 50 caracteres sin
espacios. Se admite “_” y “-” para reemplazar espacios. Deben estar en
minúscula sostenida sin usar tildes o cualquier otro carácter especial.
• No se deben enlazar documentos al sitio viejo; en su lugar se debe anexar
a la carpeta de documentos.
• Si el documento que se añade esta publicado en el nuevo portal (recién
estrenado), se puede anexar el enlace sin tener que agregarlo a la carpeta
de documentos. Ej. Documentos de OYM.
• Toda la relación de documentos y títulos hace referencia al depositorio
documental

Pag.17
4.4 Imágenes y sus títulos

• Las imágenes deben estar en formato Jpg progresivo o Png para el caso de
transparencias o imágenes de dimensiones pequeñas.
• Los títulos de las imágenes deben se de máximo 50 caracteres y no deben
contener espacios o caracteres especiales.
• Todas las imágenes que desee usar en el montaje deben estar en la carpeta de
imágenes. Imagen que no se encuentre en dicha carpeta no será añadida al sitio.
• Se manejaran tres tipos de tamaños de imágenes:
- Alta resolución: 3508 x 2480 px. (no es obligatorio) Resolución Web
- Grande: 640 x 480 px
- Resolución Web Pequeña: 448 x 336 px
• Se debe colocar la imágenes en sus dos versiones de tamaño Web, marcandolas
como <nombre-imagen>- wlarge.jpg y <nombre-imagen>-wsmall.jpg.

Para apoyar con la búsqueda de imágenes, la Dirección de Comunicaciones ha

desarrollado un sitio especifico para las facultades donde podrán acceder al repositorio
fotográfico: www.javeriana.edu.co/institucional/repositorio-fotografico

Para evitar malentendidos, solo deberán ser cargadas imágenes de autoría

propia de la comunidad javeriana. No se admiten descargas de internet o
imágenes libres.

Los formatos permitidos para cargar imágenes son .PNG . JPG . GIF. No se
permiten formatos como .SVG .TIFF, entre otros.
Pag.18
5. Conversión de imágenes

1. En windows abra la imagen con la herramienta Office Picture Manager que

viene incluida con el Sistema Operativo:

Pag.19
5. Conversión de imágenes

2. Cuando abra la imagen seleccione la opción “Editar Imágenes”

Pag.20
5. Conversión de imágenes

3. Elija la opción cambiar tamaño (columna derecha, parte inferior)

Pag.21
5. Conversión de imágenes

4. Elija la opción de tamaño que requiera: Web – Grande o Web – Pequeño y

seleccione aceptar

Pag.22
5. Conversión de imágenes

5. Seleccione la opción guardar como y almacénela en la carpeta donde lo

requiera. Al finalizar la aplicación le volverá a solicitar guardar los cambios,
acción que se debe rechazar para no modificar la imagen original

Pag.23
Montaje de Contenidos:

Pag.24
6. ¿Que es LifeRay?

Liferay es una plataforma para el desarrollo, la integración y la colaboración

del portal web Javeriana. Tiene todas las características necesarias para su
gestión tales como publicación Web y gestión de contenidos de los cuales
hablaremos a continuación.

Pag.25
7. Ingreso al portal

En la página pública principal del portal existe una sección

donde el usuario podrá autenticarse(ver fig1).

El portal le solicitará:
a. Nombre de usuario
b. Contraseña

Para ingresar al portal es necesario que este ubicado en su propio sitio Web.
Por ejemplo si desea ingresar a alguna facultad o instituto es necesario que
se dirija primero al sitio y desde allí de click a “ingreso al portal”

Pag.26
8. Navegación y Estructura

Cada Facultad tendrá una URL Paso 3. Encontramos el panel de

independiente a través de la cual control en el cual podemos gestionar
podrá acceder a publicar archivos, etc. los documentos y contenidos que
A continuación un ejemplo: necesitemos.
http://institutopensar.javeriana.edu.co

Paso 1. Para la gestión de nuestros

documentos y contenidos, en la parte
superior encontraremos una barra de
navegación.

Paso 2. Click en “Ir a”, luego click en

Panel de Control

Pag.27
9. Conceptos
9.1 Portlet:
Es un componente o ventana, donde
podemos visualizar contenidos o
herramientas propias del portal. Exiten
portlets que me permiten visualizar
agendas, blogs, documentos, etc
Las paginas están conformadas por
medio de portlets y puedo poner tantos
portlets como quiera en cada una de
ellas.
4.2 Visor de contenido WEB
Es un portlet lo que nos permite incluir
textos, videos e imágenes en cualquier
lugar de la página.
Para qué se usa: sirve para personalizar
la página del Sitio con imágenes, videos
y texto alusivo al área o información.
Permite que el texto, video o imagen
incluida se configuren como botones o
enlaces que llevan a otras páginas bien
sea del Sitio o Direcciones a otro
espacio.
Cómo se administra: este portlet puede
ser administrado desde la página o
desde el panel de control.
Administración desde la página: en la
parte inferior de cada contenido web se
encuentran los siguientes botones:
Pag.28
9. Conceptos

9.2.1 Editar contenido Web. 9.2.3 Añadir contenido web

Al seleccionar la opción editar se Esta opción le permite al usuario

visualiza una serie de campos los administrador ingresar la información
cuales muestran el nombre del archivo del nuevo contenido web, es importante
y el contenido que se puede editar; al colocar un título que identifique
efectuar los cambios se debe hacer fácilmente el contenido, que sea acorde
click en Publicar, sino se procede a y agradable a la vista de los usuarios.
realizar ningún cambio, puede volver a Se les debe asignar las etiquetas
la página haciendo click en cancelar. correspondientes, si este ya se
encuentra completo se hace click en
9.2.2 Seleccionar Contenido web publicar y el nuevo contenido se podrá
visualizar inmediatamente en la página.
Al hacer click en esta opción se
despliega una lista de todos los
contenidos existentes en el Sitio, para
seleccionar un contenido de la lista que
remplace el que se encuentra en la
página, se debe hacer click sobre el
nombre y luego click en guardar en la
parte inferior izquierda de la página.

Pag.29
9.2.3. Añadir contenido web

Paso1. Añadir contenido web. Poner

“Titulo” al contenido que se va a crear.

Paso 3. Imagenes, Para poner

Paso 2. Textos, el editor de contenido
ya tiene prestablecidos los estilos de los
textos a usar en el portal, los cuales se
veran desplegados al darle click en la
parte superior izquierda “Estilo”.(Titulo
Portlet 1, Titulo Portlet 2, Titulo Portlet 3,
Titulo Contenidos, Contactenos, etc...)
imagenes en nuestros contenidos
hacemos click en el boton
Luego se abrirá una ventana donde
ubicaremos la imagen dentro de
nuestra biblioteca de documentos

Pag.30
9.2.3. Añadir contenido web

Paso 5. Recomendación, es importante

que los links que vayan a una pagina que
esté por fuera del portal, abra en una
nueva ventana. Para esto damos click en
La parte superior “Destino”. Y seleccionar
“Nueva ventana”.
Paso4. Links, Si queremos asignar a
textos a imagenes links a documentos
o a url lo hacemos selecionando el
texto o imagenes y le damos click en
el boton

Se abrirá una ventana en donde

debemos poner la url correspondiente.
Pag.31
9.2.4. Cargar contenidos a partir de plantillas

Paso 1. Click en añadir contenido web Paso 3. Sale un listado de plantillas del
cual seleccionamos la que vayamos a

Paso 2. En la parte superior derecha

Click en Seleccionar plantilla.

Paso 4. Saldrá un aviso en donde se nos

dice que cambiará la estructura del
contenido. Le damo click en “ok”

Pag.32
9.2.4. Cargar contenidos a partir de plantillas

Paso 6. Click herramienta esquina

superior derecha, luego click en
“apariencia”estilos, ya vienen
predefinidos con la plantilla.

Paso 7. Click en “mostrar bordes”,

Seleccionar la opción “NO”
Paso 5. Saldrán nuevos campos según la
plantilla que hayamos seleccionado, los
cuales tendrán que ser llenados TODOS,
en este caso no tenemos que poner

Paso 8. Asi se verá el titulo y contenido

preestablecido desde la plantilla.

Pag.33
9.3 Publicador de contenidos

Es un portlet que permite visualizar uno

o varios contenidos web, que se
encuentren guardados en el servidor de
la plataforma.

Para qué se usa: puede ser usado para

presentar contenidos web, imágenes,
documentos, blogs, foros, wikis,
comentarios, enlaces, entre otros.

Cómo se administra: el portlet puede

ser administrado desde la misma
aplicación desplegada en la página; para
crear y administrar un Publicador de
Contenidos se deben seguir los
siguientes pasos.
Paso 1. Se despliega el portlet de la
página, para esto se hace click en
“Añadir” de la barra administradora,
luego en “Publicador de Contenidos”.
Paso 2. Se hace click en el icono
representado por una “llave”, este
situado en la barra superior del portlet,
allí desplegara diferentes opciones de
las cuales en este caso se escoge
“Configuración”

Pag.34
9.3 Publicador de contenidos

Paso 3. Se observa una lista

desplegable en la cual se escoge la
selección de contenidos estos pueden
ser Dinámica o Manual. Se recomienda
utilizar la opción Manual.

Paso 4. ORIGEN: si se elige la opción Paso 6 FILTRO: el siguiente paso es

Dinámica, se deben seguir los siguientes filtrar el contenido para que este se
pasos: En las siguientes listas de pueda visualizar, se debe elegir en la
selección se escoge el Ámbito y el Tipo primera lista desplegable la opción
de Contenido. Contiene.

Paso 5. En la lista de selección de tipo

de contenido la caja de Seleccionado se
debe dejar el tipo de contenido que se
quiere visualizar en el Publicador, los Paso 7. En la segunda lista
demás se deben pasar a la caja de desplegable se debe seleccionar
Disponible haciendo click en las flechas Cualquiera o Todos.
que se encuentran al lado de las cajas
anteriormente mencionadas. Pag.35
9.3 Publicador de contenidos

Paso 10. ORDENACIÓN Y

AGRUPACIÓN: estas se encuentran
en listas de selección la primera es
Ordenar por se recomienda que sea
por Fecha de Modificación y la
segunda en Orden Inverso.
Paso 8. En la tercera lista
desplegable se selecciona la
herramienta a utilizar ya sea Etiqueta
o Categoría.
Paso 11. PREFERENCIAS DE
PRESENTACIÓN: Se elige el Estilo
de presentación por medio de la lista
desplegable de selección. Se
recomienda Resúmenes.

Paso 9. La opcion es por Etiquetas

estas se pueden escribir de forma
separada o por comas, luego se hace Paso 12. Se elige la
click en Añadir. longitud del resumen
por medio de la lista
desplegable, esta
determinará la cantidad
de información que se
visualiza en el
contenido. Pag.36
9.3 Publicador de contenidos

Paso 13. Se elige el comportamiento Paso 16. Lista

del enlace de contenidos por medio desplegable en la
de una lista desplegable, allí se elige cual se selecciona
en donde se quieren observar los el Estilo de la
contenidos, si en un portlet específico Presentación, a
visualizar en el
contenido.
Paso 17. Lista
desplegable en la
Paso 14. Se elige el cual se selecciona
número máximo de en qué posición
elementos a publicar en quiere mostrarse la
el contenido del portlet. información en el
Esto por medio de una contenido.
lista desplegable de
selección. Normalmente
se usa máximo 3.
Paso 15. Lista
desplegable en la
cual se
selecciona el tipo
de paginación a
mostrar.
Pag.37
9.4 Banner
Este portlet o aplicación se puede El administrador del Sitio no tiene
desplegar en las páginas, permite este portlet en la lista de aplicaciones
publicar hasta cuatro (04) imágenes, de la barra administradora; esta
las cuáles rotarán automáticamente aplicación previamente se ha
cada ocho (8) segundos. consultado con cada administrador
del sitio si lo desea utilizar o no.
Para qué se usa: este portlet puede
ser usado para publicar diferentes Paso 1. En la esquina superior
noticias, testimonios, eventos, derecha click en la herramienta, luego
información de interés, coyuntural o click en preferencias
actual, que correspondan
exclusivamente al Sitio; se
recomienda que las imágenes sean
vistosas y de interés para los
usuarios. Esta aplicación tiene puntos
de información sobre la foto o imagen
en la cual se puede ampliar la
información que el usuario observa.

Cómo se administra el video

banner: para desplegarlo por primer
vez y otorgarle la configuración
correspondiente, debe solicitarle al
Administrador (oficina de
comunicaciones), que lo despliegue
en el Sitio.
Pag.38
9.4 Banner

Paso 2. Click en el boton “Añadir” Paso 4. Se selecciona la ruta de la

para subir la imagen deseada. imagen previamente subida en la

Paso 3. Click en el boton “Agregar

imagen”
Paso 5. Click en el boton
“seleccionar” de la imagen que se va

Pag.39
9.4 Banner

Paso 6. Ingresar textos de titulo y

descripción. Añadir url de redirección.
Click en “Guardar”

Paso 7. Click en “Preferencias” para ir

a la visualización del Banner creado

Pag.40
9.5 Cargar videos de Youtube o Vimeo al sitio.
Los videos se pueden cargar al sitio
WEB sin necesidad de ser
descargados; simplemente deberá
incrustar el video en la pagina y en el
lugar que desea. Para ello por favor
siga estos pasos:
Paso 1. Vaya al la pagina donde se
encuentra cargado el video . debajo
del video encontrará un link que dice
“Compartir”, da click allí.
Paso 2. Diríjase a la pestaña
“Insertar”, alli encontrará el codigo
HTML necesario para cargar su video.
Tambien encontrará el tamaño con el
cual desea incrustar el video en su
pagina.
Para esto, la universidad ha
estipulado dos formatos: Grande
(640x360) y Pequeño (240x135)*
Despues de que ha seleccionado el
tamaño, copie el código mencionado
anteriormente.
* El tamaño pequeño no vine predeterminado en las
opciones, por lo que deberá dar click a “Tamaño
personalizado” y determinarlo.
Pag.41
9.5 Cargar videos de Youtube o Vimeo al sitio.
Paso 3. Diríjase al formato para
cargar contenidos en su página y
realice una marca en el lugar donde
desea colocar el video, para este
ejemplo colocamos letras “X” de color
rojo en el lugar donde irá incrustado el
video.
Paso 4. Active la pestaña FUENTE
HTML y ubique la marca que realizo
para determinar el sitio del video.
Remplace esta marca por el código
copiado en la página original del video
Algunos formatos de videos no son
compatibles para ser cargados en el portal.
Por favor revise los formatos permitidos en
la biblioteca de documentos (ver página 53)
Pag.42
9.5 Cargar videos de Youtube o Vimeo al sitio.

Paso 5. Desactive FUENTE HTML y

esta listo. Seguramente en el formato
para cargar contenidos sola saldrá un
marco que dice IFrame. No se
preocupe; al publicar el contenido
encontrara su video correctamente
cargado.

Si desea modificar las propiedades del

video, de click derecho sobre el marco y
vaya a “propiedades de IFrame”

Nota: si no visualiza su video al publicar

el contenido, por favor actualice la página
Pag.43
9.6 Realizar tablas de contenido.
Paso 1. Para realizar tablas con
contenidos por favor diríjase al icono de
tablas.
Allí emergerá una ventana para
determinar las propiedades de la tabla.
Se recomienda que en el tamaño de
borde se coloque por lo menos
valor = 1, ya que nos permitirá
visualizar las márgenes de la tabla
mientras esta en construcción.
Paso 2. Aparecerá la tabla donde
podrá comenzar a organizar la
información. También podrá agregar
videos en la tabla ( ver página 41)
Pag.44
9.6 Realizar tablas de contenido.

Paso 3. Publique su contenido y Paso 4. Si desea eliminar los bordes

recuerde que si no aparece de la tabla o modificar sus
inmediatamente deberá actualizar la propiedades, por favor de clik
página. derecho sobre la tabla y vaya a la
opción: “Propiedades de tabla”

Nota: no se recomienda usar textos

justificados en estas tablas ya que
dificultan la lectura

Pag.45
9.7 Crear y agregar BitMap

Para convertir una imagen a un

Bitmap y permitir direccionar al
usuario realizando click en
determinada zona de la imagen,
deberá realizar los siguientes pasos:
Paso 1. Seleccione la imagen y de
click derecho, seleccionando la
opción “Copiar dirección de la
imagen”
Allí colocara la URL de la imagen y
dará click al icono “accept” ubicado al
costado derecho de la URL.

Paso 2. Existen varias herramientas

online para generar Bitmaps. Sin
embargo, le recomendamos usar
esta herramienta:

http://www.maschek.hu/imagemap/imgmap.
Pag.46
9.7 Crear y agregar BitMap

Paso 3. La imagen cargara y ahora

deberá dar click al icono con signo
positivo que se encuentra al costado
izquierdo. De esta manera indica que
va a generar una sección especifica
para el direccionamiento.

Es necesario definir el tipo de

herramienta que con la que desea
realizar la selección (rectángulo,
circulo o polígono), deberá colocar en
la viñeta “Href” la dirección a la que
desea direccionar al realizar click
sobre la selección. Deberá también Paso 4. Cuando ya tenga todos los valores
colocar en “ALT” el titulo de la definidos, podrá realizar la selección sobre
selección. Finalmente debe decidir si la imagen, creando un hipervínculo.
desea abrir el nuevo vinculo en la
misma pagina o abrir en una nueva
pagina en la opción “Target”.

Pag.47
9.7 Crear y agregar BitMap
Paso 5. Una de las posibilidades de
la herramienta es proporcionar el
código HTML, el cual nos servirá para
cargar la imagen configurada a
nuestro portal. Para ello de click el
icono HTML y copie el código que
aparecerá en la parte inferior de la
imagen.
Paso 6. Vaya a su editor y de click en
la pestaña fuente HTML. Estando allí,
pegue el código HTML en la ultima
parte.
Su código se parecerá a este y la
herramienta le habrá dado un nombre
aleatorio. Le recomendamos sustituir
ese nombre por otro:
<map id="imgmap2014915154859"
name="imgmap2014915154859"><ar
ea shape="rect" alt="Institucional"
title="" coords="96,19,195,100"
href="http://www.javeriana.edu.co/insti
tucional" target="_blank" /><!--
Created by Online Image Map Editor
(http://www.maschek.hu/imagemap/in
dex) --></map>
Puede remplazar el nombre que la
herramienta le ha dado a su imagen
por uno que resulte mas fácil de
identificar.
Ejemplo: imgmap2014915154859 =
nombremapa
Pag.48
9.7 Crear y agregar BitMap

Paso 7. Estando en el código HTML,

busque la sección donde se sitúa la
imagen y agregue al final del código
(usemap="#nombremapa") como
aparece en este ejemplo.

<img
src="http://www.javeriana.edu.co/docu
ments/15832/304345/universidad-img.
jpg/be0564e6-e614-42ad-b31c-1eaf3
9aa64ef?t=1392133663142"
usemap="#nombremapa" /></p>

Paso 8. Publique y revise que la

sección de la imagen que realizo,
direcciona a otra pagina Web.

Pag.49
9.8 Biblioteca de documentos

El portal permite la gestion de A. Agregar un Documento y/o una

documentos utilizando para ello la imagen.
funcionalidad brindada desde el panel
de control, dando click en la sección Un documento en la Biblioteca se
“Documentos y Multimedia” almacena dentro de una Carpeta. Si
no existe ninguna carpeta creada o se
desea crear una nueva se debe
presionar el botón “Añadir Carpeta”.
Esta funcionalidad Aquí el portal despliega al usuario la
permite administrar página de creación de Carpetas
y publicar cualquier donde se podrá ingresar un
tipo de documentos nombre, una descripción y configurar
tales como Microsoft los permisos de acceso a la nueva
Office (Word, Excel, carpeta. Una vez
Powerpoint), PDF, terminado el ingreso de datos
archivos de texto, presionar “Guardar”.tambien se
etc. Así tambien se podrán y publicar imágenes en todos
podrán y publicar los formatos (.png, .jpg, .gif, etc).
imágenes en todos
los formatos (.png,
.jpg, .gif, etc).

Pag.50
9.8 Biblioteca de documentos

• Opción Subir “Multiples documentos”

• Guardar Documentos Seleccionados

Pag.51
9.8 Biblioteca de documentos

B. Ver, editar y reemplazar

documentos y/o imagenes

En la página que despliega la

información de la Carpeta se puede
ver los documentos.
• De igual forma con los documentos
A la esquina superior derecha de y/o imágenes
cada documento se encuentra un
triangulo sobre el que damos click y
nos permitirá desplegar unas
acciones sobre la carpeta, que
permite “Ver” datos relacionados al
mismo tales como su versión actual,
tamaño, cantidad de descargas,
histórico de versiones, etc. De
manera similar a la visualización, se
puede editar un documento
ingresado, presionando “Editar”.

Pag.52
9.8 Biblioteca de documentos
• Editar: opción que permite
cambiar su nombre, descripción y
permisos.
• Descargar (1.575,8k): indica el
peso del video que se quiere
descargar.
• Mover: permite seleccionar una
carpeta padrón, para moverla a
esta.
• Comprar: permite bloquear la
carpeta y nadie podrá editarlo
hasta que el administrador lo
desbloquee o este se desbloquee
automáticamente.
• Permisos: opción que permite
visualizar los permisos que se le
crearon a la carpeta, allí puede
modificarlos o añadirle más
permisos.
• Eliminar: esta elección emite un
mensaje de confirmación, si está
seguro de eliminar la carpeta con
las opciones de aceptar o
cancelar.
• Añadir subcarpeta: permite
crear una nueva carpeta dentro
de esta.
• Acceder desde el escritorio:
esta opción permite gestionar
carpetas y archivos desde el
explorador del escritorio del
sistema operativo.
A esta biblioteca de documentos no se
deberá agregar archivos de los
siguientes tipos o que termine con las
siguientes extensiones: Excel, FLV, MP4,
MP3, OGG, AVI, OCX, CLASS, ISO, MOV, DIV Y
DIVX, RPM, QT Y QTL, MPE, MPG, WMV, WM,
NRG, IMG, AAC, AC3, TAR, TAR-GZ, WAR,
WAV, CAB, JAR, DVD, entre otros que
impliquen reproducción de multimedia.
Pag.53
9.9 Administrar la biblioteca de documentos.

El repositorio de documentos es
importante para administrar y guardar
todos los archivos de su interés como
una nube de información.

Paso 1. Para ingresar deberá estar

navegando en el sitio propio.

Paso2. Debe dirijírse al panel de

control y en el menú de lado izquierdo
selecciona la opción “Documentos y
Multimedia”. Allí podrá acceder a sus
documentos.

Nota: Recuerde que para poder

visualizar estos contenidos, deberá
tener los permisos necesarios para
acceder al repositorio.

Pag.54
9.9 Administrar la biblioteca de documentos.

Paso 3. En estas carpetas encontrará Paso 4. Para modificar los archivos

sus documentos según la
organización que usted o la facultad
le ha dado.
puede dar click derecho sobre este e
ir a “editar”. Si por alguna razón
realizo cambios en el archivo y desea
recuperar la versión anterior, podrá
acceder al historial donde se
encuentran versiones anteriores del
documento.

Se recomienda que los archivos que

allí guarde sean preferiblemente
imágenes y Pdf, evitar los archivos
tipo office.

Los documentos no deben pesar mas

de 10 Mb y a cada archivo cargado es
necesario colocarle Etiquetas que
faciliten después su búsqueda (SEO).

Pag.55
9.10 SEO (Search Engine Optimization)

Hemos hablado anteriormente de SEO (Search Engine Optimization), pero no

sobre su importancia y el porque se deben demarcar los contenidos con
etiquetas. Cuando catalogamos con palabras nuestros contenidos permitimos
que otros puedan ubicar estos elementos desde los motores de búsqueda
fácilmente, además de posicionar nuestra información en la red. También nos
permite clasificar los contenidos según los requerimientos.

SEO (imágenes): para colocar estas

etiquetas a una imagen por favor
diríjase a las propiedades de la
imagen dando click derecho sobre
ella. Aparecerá esta ventana donde
deberá colocar las etiquetas
separadas por coma en el campo
destinado para “texto alternativo”.

Pag.56
9.10 SEO (Search Engine Optimization)

SEO (Textos): es necesario colocar

las etiquetas que identifican el texto.
Para ello diríjase al la sección
“clasificación” , ubicada en el menú
izquierdo del editor de contenidos.
Cuando este allí , deberá colocar
todas la palabras claves o etiquetas
que identifican este texto. como
mínimo es necesario colocar 3
palabras y máximo 10.

SEO(Videos): Los video no poseen

varias etiquetas, necesitan una
descripción. Para ello de click
derecho sobre el video y vaya a
propiedades de Iframe. Cuando este
allí por favor llene el campo
“Descripción larga URL” con un
resumen sobre el video.
Pag.57