Sitios Web – Liceos

Documento de referencia para actualizar contenidos en los sitios web institucionales.

Documento Rev.:2.0
Administración básica del CMS Joomla 2.5
Joomla! es un potente gestor de contenidos web (CMS o Content Management System)
que permite crear sitios web elegantes, dinámicos e interactivos. Por su diseño, potencia,
flexibilidad y por sus enormes posibilidades de ampliación se está convirtiendo en el
sistema de publicación preferido por muchos centros educativos y por millones de
webmasters en todo el mundo para desarrollar su portal web.

Con Joomla! podemos crear en poco tiempo un completo portal para un centro escolar o
una web docente en la que publicar noticias, blogs, directorios de enlaces o documentos
para descargar sin necesidad de conocimientos técnicos especiales o de complejos
lenguajes de programación.

A partir de una plantilla y de unos contenidos de ejemplo iniciales podemos desarrollar un

vistoso y completo portal añadiendo los contenidos, menús y elementos visuales
deseados a través de un entorno web y sin necesidad de programas auxiliares ni de
conocimientos especiales de diseño o de programación ya que todas estas operaciones de
edición y administración se realizan a través de cualquier navegador.

La introducción y edición de contenidos resultan así una tarea cómoda y sencilla y ello nos
permite mantener nuestro sitio permanentemente actualizado.

Joomla! es Open Source

Joomla! es una aplicación Open Source o de código abierto programada en lenguaje PHP
bajo una licencia GPL y que utiliza una base de datos MySQL para almacenar el contenido
y los parámentros de configuración del sitio. Además de libre, Joomla! es gratuito y no
tendrás que pagar nada por usar este CMS para construir tu web.
Descripción del Diseño del Front-End (parte pública)
 Administración del Sitio Web (Back-End)

La administración del portal se realiza ingresando al directorio /administrator

Obs.: El procedimiento es el mismo para todos los Sitios de los liceos de Corporación
SOFOFA.

Al ingresar a la administración del sitio web saldrá el formulario para ingresar los datos del
usuario autorizado para realizar cambios dentro del sitio.

Una vez completados los datos presionar el botón “Acceso”

Una vez dentro de la administración, se observa el Panel de control con las distintas
herramientas para gestionar el sitio web

Para la administración básica, utilizaremos los siguientes botones:

Permite Crear un artículo nuevo dentro del portal.

Gestiona el repositorio de artículos ingresados al sitio web.

Permite Agregar y cambiar ítems dentro de los distintos menús

 Gestiona los módulos habilitados (Banners Laterales, Animación
superior, pie de página, etc.)

Gestión multimedia, permite administrar las imágenes utilizadas en los

distintos artículos o módulos.

Herramienta para gestionar Respaldos, permite administrar los

respaldos existentes y generar nuevo (herramienta habilitada para Usuarios con permisos
de Súper Usuario)
 Crear un nuevo artículo dentro de Joomla 2.5
En el panel de administración seleccionar el botón “Añadir un nuevo artículo” para
desplegar la pantalla con la cual se crean los artículos.

Aplica los Cambio al Artículo en edición.

Permite Guardar y Cerrar o Guardar y crear un nuevo

artículo, sin salir de la pantalla.

Cancela el proceso de edición.

 Determina si el artículo se
encuentra publicado y si es visible
para los visitantes.

Permite publicar el artículo en la

portada (sección Noticias)

En esta sección de la pantalla es donde se escribe el artículo.

Permite agregar un botón “leer más” el cual permite ocultar una parte del
artículo para no extender tanto la cantidad de texto en la sección de noticias.

Permite subir una imagen desde nuestro computador, para luego utilizarla
dentro del artículo.
 Utilización de la función “Leer más” y “Remover Formatos”
 Borrar Formatos

En el editor de Jooma se encuentran 2 herramientas sumamente útiles para poder

reorganizar de mejor manera la presentación final de nuestro sitio web.

Herramienta borrar
formatos

Cuando generamos un nuevo artículo dentro de nuestro sitio, puede que la presentación no se vea
clara o los formatos de texto no se encuentren acorde al resto del sitio.

Seleccionamos todo el texto del artículo y luego presionamos el botón “Borrar Formatos”. Al
realizar esta acción los parámetros regresan a su configuración por defecto.
  Utilización de la función “Leer más”

La función “Leer más”, permite dividir la forma en cómo se visualiza un artículo en el Fron-End de
nuestro sitio web.

La imagen a continuación muestra un artículo en el cual no se utiliza la función “Leer más”

Como se puede apreciar el articulo utilizar un gran espacio de la portada de nuestro sitio web
(Front End).

Al utilizar la función “Leer más”, el texto se divide quedando oculta una sección a la cual se accede
presionando en enlace.

El uso de esta función, permite ordenar la presentación de nuestro sitio web, permitiendo que los
artículos que se exponen no extiendan largamente la portada (Front End).

En la siguiente imagen, se observa el mismo artículo, pero ahora utilizando la función “Leer más”

El artículo se encuentra dividido por el botón “Leer más: (Nombre del artículo)”, al momento de
pinchar el botón, se extenderá la noticia de forma completa.

Para aplicar la función, tenemos que editar el artículo desde el “Panel de control de Joomla”

Al ingresar al artículo, seleccionamos la ubicación en la cual queremos realizar la división

Punto de División
Una vez determinado el punto en el cual realizaremos la división, presionamos el botón

“Leer más”.

Al realizar la operación el texto quedara dividido por una línea de color rojo, esto señala posición
en donde se encuentra el corte del artículo.

La siguiente imagen permite comparar el resultado de la utilización de la función en la portada

(Front – End).
 Opciones del Artículo

Las opciones del artículo

permiten realizar algunas
personalizaciones a los
distintos artículos.

Para evitar complicaciones,

en la edición o creación,
los parámetros se
encuentran previamente
configurados, de esta
forma no es necesario
cambiar ninguna opción.

Una vez terminada la edición recuerde presionar el botón Guardar para no perder el
trabajo realizado.

Obs.: El sistema tiene una herramienta que desconecta al usuario después de 5 minutos
sin actividad.

No copiar textos directamente desde Microsoft Office, ya que esta operación genera
dificultades con la herramienta de edición.
 Gestionar los artículos dentro del repositorio
Para gestionar los artículos ingresados a Joomla, seleccionamos la opción “Gestor de
artículos” ubicado en el panel de control.

Nombre del Indica si el Indica si el artículo se

Artículo artículo se encuentra publicado en el
encuentra frontis (sección noticias)
publicado

Para eliminar un artículo, se coloca el ticket de selección y luego pinchar el botón

Papelera.
 Gestionar Menú de Joomla 1.7
Para realizar la gestión de los menús, seleccionamos el botón “Gestor de Menús” dentro
del panel de control.

Al ingresar al gestor se despliega la pantalla con los menús habilitados para el sitio web.

Para visualizar los ítems que contiene

cada menú, pinchamos el título del
menú.

Nombre del Indica si el Permite, cambiar la

menú menú se posición del ítem dentro
encuentra del menú
publicado
Para modificar el sector izquierdo (Destacados), se realiza mediante el menú “Banners”
dentro del gestor de menús.

Para agregar un ítem al menú banners o cambiar la imagen que este menú muestra,
seleccionamos el ítem a modificar haciendo clic en el título.

Al desplegar la pantalla de modificación observamos lo siguiente

 Permite seleccionar el tipo de elemento,
Ej: URL Externa (permite enlasar el item
de menu con un sitio web externo).

Para cambiar el tipo de elemento pinchamos el botón “Seccionar” y se desplegara el

listado con los elemento que se pueden enlazar con el ítem de menú.
Si se quiere enlazar el ítem del menú con un artículo creado, seleccionamos dentro del
listado “Articulo Simple”

Cuando se realiza el cambio del elemento, cambia la configuración requerida.

Para seleccionar el articulo pinchamos el botón “Seleccionar / Cambiar” y se desplegara el

listado completo de los artículos existentes dentro del sitio.
Seleccionamos el artículo que necesitamos enlazar con el ítem del menú.
Para agregar la imagen al menú seleccionamos “Tipo de Opciones para los Enlaces”

Seleccionamos la imagen que necesitamos

ultilizar en el item de menu (esta imagen
puede estar almacenada en el
administrador multimedia o de lo
contrario puede ser subida directamente)

Para ocultar el titulo del item de menu y

solo visualizar la imagen seleccionada,
marcamos la opcion “NO”

Finalizada la edición del menú pinchamos el botón “Guardar y Cerrar”

Obs.: El procedimiento anteriormente descrito, se utilizar para crear y modificar un ítem

de menú.
 Administrar módulo de animación del sitio web
Para realizar el cambio de las imágenes que se presentan en la portada, ingresamos al
“Gestor de módulos”, el cual se encuentra en el panel de control de Joomla.

El modulo “Autson Slideshow” administra la animación de la portada, para realizar los

cambios, seleccionamos el título del módulo para desplegar la pantalla de modificación.

Como recomendación, se solicita

no cambiar los siguientes
parámetros.
Las imágenes tienen que ser ingresadas por el “Gestor multimedia” dentro de la carpeta
SlideShot.

Las imágenes a utilizar tienen que ser a una resolución de 950x340 en formato JPG. El
Nombre de los archivos no puede ser muy largo ya que puede generar problemas al
momento de conectar las imágenes.
Para conectar las imágenes buscamos dentro del módulo la sección imágenes.

El modulo permite agregar hasta 20 imágenes.

Ubicación de las imágenes.

(images/SlideShot/01.jpg)

Nombre de la Imagen.

En esta seccion se mostrara un pequeño

texto bajo el título.

Si se requiere enlazar la imagen con

alguna dirección web, tiene que ser
ingresada en elte campo.

Ejemplo de la imagen con título y descripción

Obs.: Este procedimiento tiene que ser realizado para todas las imágenes que se quieran
presentar en la animación.
 Creación de ventana Emergente (POP UP) para el Front-End
La utilización de una ventana emergente al ingresar al sitio permite anunciar rápidamente
alguna noticia importante a la comunidad.

Para administrar la ventana emergente del sitio, entramos al Gestor de Módulos el cual se
encuentra dentro del panel de control.

El módulo administrador de la ventana emergente se llama “Simple POPUP”

La utilización de este pequeño PLUN-IN dentro de un módulo de HTML personalizado,

permite ocupar textos e imágenes dentro de la ventana emergente.

Tipo de Módulo

Indica si el módulo
se encuentra activo

Nombre del
Módulo
Posición del módulo
dentro de la plantilla

Para evitar problemas con el correcto funcionamiento de la ventana emergente, se

recomienda no modificar los campos destacados en “Rojo”

La Salida personalizada es donde redacta el mensaje que saldrá como ventana emergente

Es importante destacar que para que funcione correctamente la ventana emergente es

necesario colocar los siguientes comentario al inicio y al final del aviso que queremos
publicar. Las dimensiones de la ventana son 640 x 480.

{simplepopup} AVISO A PUBLICAR COMO VENTANA EMERGETNE {/simplepopup}

Si los comentarios no son colocados, la ventana no funcionara como emergente y solo

quedara como un texto en la zona de la plantilla seleccionada.
La presentación de la ventana en el Fron-End, quedará de la siguiente forma:
 Protocolo para la publicación de contenidos
Para poder estandarizar la forma como se publica la información en los sitios web de cada
uno de los liceos, se solicita seguir las siguientes indicaciones:

 El mismo tipo de fuente, tamaño, color y márgenes justificados (para todos los
artículos que se publiquen y/o actualicen).
 Si necesitan publicar textos que fueron entregados en documentos de Word, estos
tienen que ser primero copiados y pegados en un Notepad (para eliminar todos los
formatos, ya que Joomla no es compatible con los formatos utilizados por Word) y
luego de eso, pasados a Joomla.
 No publicar noticias extensas en el Font-end (no más de 15 líneas de texto), utilizar
la función de “Leer más”.
 Pueden agregar una pequeña imagen a la izquierda de cada noticia (tamaño de
aprox. 130x150 pixeles).
 El tamaño recomendado para las imágenes en las noticias es de 640x480, si
necesitan almacenar imágenes de mayor tamaño, utilizar servicios como flickr que
permite subir imágenes de mucha mejor resolución y se dispone de 1Tb de
almacenamiento.
 Para las imágenes del SlideShot de la portada, utilizar imágenes 1024x300, se
recomienda recortar la imagen en esas medidas para evitar deformaciones.
 Mantener la misma estructura al modificar los banners laterales (colores y
esquemas) y retirar los que ya no se encuentren en uso.
 Cuentas en redes sociales:
o Si utilizarán cuentas en redes sociales, crearlas utilizando un correo
electrónico de liceosofofa.
o Utilizar nombres de perfiles fáciles de recordar, por ejemplo:
www.facebook.com/liceosofofa/
www.flickr.com/photos/liceosofofa/

Contenidos mínimos e Información relevante

Cada uno de los sitios web es una puerta de acceso a información tanto para los
integrantes de la comunidad educativa como para los visitantes, es por esta razón que
existe información que siempre tiene que está disponible y actualizada.

A continuación se detallara la información mínima que tendrá que estar disponible en

cada uno de los sitios web, así como también los contenidos de constante actualización.
Menú Principal.

 Inicio: Portada del sitio web, se visualizarán las noticias que se publican
constantemente por cada encargado (respetar el formato detallado en el punto
anterior), ya que textos con distintos tamaños y formatos da una impresión de
desorden.
 Quienes Somos: Contiene una breve reseña del establecimiento en la actualidad.
o Historia: Contiene la historia del establecimiento, es importante actualizar
eventualmente dependiendo de los eventos importantes que se generen.
o Misión y Visión: Este artículo contiene la misión y visión del
establecimiento como también los corporativos, si alguno de estos sufre
modificaciones, es importante realizar las actualizaciones necesarias.
o Objetivos Institucionales: Este artículo al igual que el anterior contiene los
objetivos de la institución y los corporativos, si el establecimiento se
encuentra en proceso de actualización, es importante realizar los cambios
necesarios.
o Organigrama corporativo: contiene el organigrama, actualizar
dependiendo de los cambio que pueda tener la institución.
o Himno: si el establecimiento tiene himno propio, incorporar en este menú.
o Ubicación: indica a los visitantes del sitio web la dirección física del
establecimiento, se recomienda incluir los números telefónicos de
contacto.
 Especialidades
o En el menú de especialidades se detalla cada una de las especialidades los
liceos técnicos, haciendo referencia a datos técnico pedagógicos, planes y
programas, convenios con empresas, cursos de perfeccionamiento, etc.
o Cada especialidad tendrá que tener su ítem separado en el menú.
 Consejo Asesor empresarial y DUAL: Menú incluye datos relacionados con el
sistema DUAL de enseñanza en terceo y cuarto medio. La información relacionada
con el Consejo asesor empresarial, tiene que ser actualizada según datos
entregados por los jefes de especialidad y dirección.

 Nuestra Corporación: Link de conexión con sitio web de Corporación SOFOFA.

 WebMail: Link de conexión al sistema de correo interno.
Menú Alumnos.

 Centro de Alumnos: Contiene la estructura del centro de alumnos de cada uno de

los establecimientos, este tiene que ser actualizado cada vez que se generen
cambios en las directivas.
 Logros y Eventos: Recopila todos los artículos que se categorizaron como
“Eventos” al momento de su edición desde el back-End.
 Guías y Apuntes: Contiene guías y apuntes dejados por docentes, también
contiene documentos subidos por dirección (PEI, Decreto de evaluación, etc.).
 Otros ítems de menú: Cada liceo es libre de agregar ítems al menú de alumnos
según sea su necesidad.

Banner lateral Izquierdo.

 Contacto: Despliega formulario para realizar consultas al establecimiento.

 Información UTP: Permite acceder a los distintos documentos entregados por UTP
y Dirección (PEI, Decreto de evaluación, etc.).
 Resultados SIMCE: Permite obtener la información sobre el SIMCE (actualizar cada
vez que se entreguen nuevos resultados de parte de MINEDUC).
 Comunidad Liceos SOFOFA: Permite conectar con el sistema de RRHH de
Corporación SOFOFA.
 Otros ítems de menú: Cada liceo es libre de agregar ítems al menú de alumnos
según sea su necesidad.

Banner Lateral Derecho.

 Ingreso a SINEDUC: menú conecta con la plataforma SINEDUC.

 Encuestas: Cada vez que se realicen procesos de encuestas coordinadas por
Corporación SOFOFA, se activara un banner con los accesos necesarios para el
proceso.
 Otros ítems de menú: Cada liceo es libre de agregar ítems al menú de alumnos
según sea su necesidad.