Sitio Web 3

Administración de la Página Web de Centro (Plataforma

Educacyl).Sitio Web

Febrero-Marzo 2009

Administración general

Compuesto por:

•Manuales

•Administración de los tres módulos

•Nombre del centro

•Productos disponibles

•Administradores de productos

•Backups

El Sitio Web

Dos secciones del CMS:

•El área de administración

•El área frontend

El Sitio Web

Administración del Sitio Web

Práctica 4. Esquema del sitio

• Crear el esquema que servirá de base para crear nuestra página

• Se indicarán las secciones y las páginas principales que mostraremos.

EjemploHOMEPAGE

SECCIONES

PÁGINAS

Área modificable

Interfaz gráfica

Configurar el banner superior (I)

Animación en flash: texto e

imágenes personalizables por cada

centro

Nombre del centro:

•En administración general/Datos

de la institución

Configurar el banner superior (II)

Cambiar las imágenes

•Identificar las fotografías (5)

•Modificar tamaño de las imágenes.

Optimizar las imágenes

•Tamaño de cada fotografía: 67

píxeles de ancho por 50 de alto

(jpg)

•Renombrar las imágenes:

centro1.jpg, centro2.jpg,...,

centro5.jpg.

•Subir ficheros a upload.

•Antes de subir debemos eliminar

los existentes.

Configurar el banner superior (III)

Importante

•Los archivos no pueden ser reemplazados

•Acordarse de subir los archivos que antes hemos eliminado

•Respetar los nombres de los archivos

Práctica 5. Configurar el banner de nuestra página

• Configuraremos el banner de la página, cambiar el

nombre del centro y las 5 imágenes

Para realizarlo seguir los pasos anteriores

Homepage

Características– Página inicial

– Todas las secciones y

páginas están

relacionadas con ella– Ancho máximo de la

imagen: 380 px

Información que hay que cumplimentar

-Título

-Contenido

-Fecha de modificación

-Mostrar fecha de modificación

El editor de textos (I)En modo texto o HTML.

El editor de textos (II)

Numeración y viñetas

Alineación texto Sangrías

Cortar pegar

Tabla Subíndice y superíndice

Hipervínculo

Repositorio

Seleccionar todo

Color de texto y de fondo

Fuente, formato, tamaño, limpiar

formato Html

Línea

Vista previa

Práctica 6. Crear la HomePage (I)

Elegir el texto y la imagen que deseamos que aparezca

– Distribuir el espacio de la HomePage: posición de la imagen,

texto, tablas, enlaces...

– Modificar la tabla, si es necesario

– Tamaño máximo de la imagen: <600 px de ancho. Optimizar

la imagen

– Crear el texto que aparecerá en la HomePage con el editor

de textos

Crear enlaces internos y externos

Permite vincular el texto o la imagen con un módulo, imagen,... del mismo sitio web o externa a él

Crear enlaces a otras páginas, internas o externas

Quitar enlaces a otras páginas, internas o externas

Crear enlaces dentro de la misma páginas

Insertar una imagen

Para poder insertar una imagen es necesario que

previamente haya sido cargada desde el área de imágenes

Práctica 7. Crear la HomePage (II)

• Insertar la imagen principal de nuestra HomePage. Agregar una imagen

• Insertar los logos que deseemos (por ejemplo logo de la Junta) y crear

los enlaces externos necesarios para estos logos.

• Introducir los enlaces externos que deseemos

Secciones (I)• Menú horizontal en la cabecera de la Homepage

• Número ilimitado

• Públicas o privadas

• Pueden contener páginas

Sitio Web

Secciones

Secciones (II)Crear una sección nueva

AGREGAR

Sitio Web

Secciones

Secciones (III)Datos a introducir

•Nombre del menú

•Descripción

•Imagen

•Sin enlaces

•URL•Módulo

-Buscador

-Formulario de contacto

-Otro tipo de formulario creado por nosotros

-Libro de visitas

-Noticias generales

-Noticias de determinado tipo

-Registro de usuario

•Contenido

Secciones (IV)Datos complementarios

Visible en la web

Mostrar fecha de modificación en la web

Fecha de modificación

Práctica 8. Crear las secciones (I)

• Crear las secciones de la página

Secciones (V)Modificar una sección

MODIFICAR

Sitio Web

Secciones

Secciones (VI)Eliminar una sección

ELIMINAR

Sitio Web

Secciones

Secciones (VII)Ordenar las secciones

A la derecha de la pagina de detalle de una sección

Seleccionar con un clic la sección y pulsar la flecha para trasladarla

Práctica 9. Secciones

• Como ya hemos creado las secciones de nuestra página. Vamos a

empezar a “llenarlas” de contenidos.

• Si en nuestro esquema de página web no tenemos pensado añadir

contenidos a nuestras secciones directamente, crearemos 4

secciones “no visibles” pero que nos permitirán realizar las

siguientes actividades.

– Una sección con indicación “sin enlaces”

– Una sección en la que indicaremos una URL

– Una sección en la que introduciremos texto y al menos una

imagen

– Una sección que luego eliminaremos

– Con estas secciones realizar pruebas de “modificar”

Páginas (I)Contiene información

Sitio Web

Páginas

Páginas (II)Crear una página nueva

AGREGAR

Sitio Web

Páginas

Páginas (III)

Apartados

•Sección del sitio

•Nombre del menú

•Título

•Texto alternativo

Páginas (IV)Datos complementarios

•Visible en la web

•Sección privada

•Mostrar fecha de modificación en la web

•Fecha de modificación

Páginas (V)Modificar una página

MODIFICAR

Sitio Web

Páginas

Páginas (VI)Eliminar una página

ELIMINAR

Sitio Web

Páginas

Páginas (VII)Ordenar las páginas

A la derecha de la pagina de detalle de una página

Seleccionar con un clic la página y pulsar la flecha para trasladarla

Práctica 10. Crear páginas

• Crear estructura de páginas que tendrá nuestra

página web

• Añadir los siguientes elementos en las páginas

creadas

– Una tabla, modificar colores de celda

– Añadir enlaces, en texto e imágenes

– Crear una marca de agua en una de las celdas

– Enlaces externos e internos dentro de la misma página

Imágenes (I)

• Gestionar ficheros gráficos (jpg, gif, bmp, tiff, png) y archivos flash

(swf)

• Diseño: programa de diseño gráfico: Gimp, Photoshop...

Sitio Web

Imágenes

Imágenes (II)Crear una imagen

AGREGAR

Sitio Web

Imágenes

Hay que introducir:

•Nombre

•Descripción

•Categoría

•Imagen

Administración

Imágenes (III)Modificar una imagen

MODIFICAR

Sitio Web

Imágenes

Administración

¡NO OLVIDAR!

En “Archivo” es necesario hacer clic en “Cambiar”

Imágenes (IV)Eliminar una imagen

ELIMINAR

Sitio Web

Imágenes

Administración

Optimizar las Imágenes (I)

• Tamaño de las imágenes

– Como máximo 80 o 100 KB

– Formato para guardar las imágenes

– Medidas de las imágenes (<600 pixel de

ancho)

Optimizar las Imágenes (II)Tipos de imágenes permitidos

JPG

PNG

TIFF

BMP

GIF

SWF

Reduce considerablemente el peso en KB y suele reducir la calidad

Reduce el peso en KB pero convierte las imágenes a 256 colores. Útil si se trabaja con pocos colores. Permite animaciones y transparencias

Tiene la calidad superior. Peso de las imágenes muy alto

Gran calidad de imagen, pero mas pesadas que en otros formatos

Buena calidad pero pesadas. Permiten transparencias pero no animaciones

Permite animaciones de muy poco peso

Optimizar las Imágenes (III)

Redimensionar imágenesimagewiz.exe

Redimensionar imágenes on lineresizr.lord-lance.com

photomajig.net

Cambia formato, nombre y dimensiones de imágenesBimp

Editor de fotos on linePicnik

Fauxto (splashup)

Pixenate

Programas para la edición de imágenes

–ACDSee

–Photoshop

–Gimp...

Optimizar las Imágenes (IV)Otros programas para la edición de imágenes

ACDSee 6.0.lnk

Imágenes (V)

Sitio Web

Imágenes

Categorías

Organización por categorías

Imágenes (VI)

Sitio Web

Imágenes

Categorías

AGREGAR

Añadir una categoría

Imágenes (VII)Modificar las categorías

Sitio Web

Imágenes

Categorías

MODIFICAR

Imágenes (VIII)Eliminar una categoría

Sitio Web

Imágenes

Categorías

ELIMINAR

Práctica 11. Imágenes

• Agregar las imágenes que tendrá nuestra página

• Agregar un archivo flash

• Insertarlos en diferentes páginas

• Realizar cambios en una de las fotos, y modificarlas

• Eliminar uno de los archivos

Gestión de Documentos. Upload (I)

Características

• Tipos archivos: pdf, word, excell, zip,...

• Agregar, modificar y eliminar archivos

• Archivos que modifican el banner superior

• Sin límite de espacio

Gestión de Documentos. Upload (II)

Añadir un documento nuevo

AGREGAR

Sitio Web

Uploads

Información solicitada

•Nombre

•Descripción

•Examinar

Gestión de Documentos. Upload (III)

Modificar un archivo

MODIFICAR

Sitio Web

Uploads

¡NO OLVIDAR!

En Archivo seleccionar “Cambiar”

Gestión de Documentos. Upload (IV)

Eliminar un archivo

ELIMINAR

Sitio Web

Uploads

Práctica 12. Uploads

• Agregar archivos: uno en formato pdf, otro en

formato word, un archivo de excell

• Insertarlos en diferentes páginas

• Realizar cambios en uno de ellos, y modificarlo

en la web

• Eliminar uno de ellos

Formularios de contacto

Formularios (I)Elemento que permite introducir información

Formularios definidos

Formularios (II)Creación de un formulario de contacto

Sitio Web

Formularios

Formulario de contacto

La opción seleccionada por defecto es la de

“modificar”

Formularios (III)Creación de un formulario propio (I)

Sitio Web

Formularios

Administración

Desde esta pestaña nos

permite “Agregar”,

“Modificar” o “Eliminar”

Formularios (IV)Creación de un formulario propio (II)

Sitio Web

Formularios

Administración

AGREGAR

Información solicitada

•Nombre del formulario

•E-mail del destinatario

•Agregar un campo

Formularios (V)Creación de un formulario propio (III)

Campos obligatorios Los que el usuario introducirá obligatoriamenteTipos de campos Una sola línea Líneas múltiplesNúmero de camposNo se puede eliminar un campo de un formulario, pero si es posible desmarcar la casilla “Disponible”

Formularios (VI)Modificación de un formulario propio (IV)

Sitio Web

Formularios

Administración

MODIFICAR

Formularios (VII)Eliminar un formulario propio (V)

Sitio Web

Formularios

Administración

ELIMINAR

Práctica 13. Formularios

• Modificar el formulario de contacto para nuestro centro.

• Crear un formulario para el centro.

Libro de visitas (I). Configuración

Permite que los visitantes publiquen un mensaje de saludo, mensajes para otros visitantes,...

Sitio Web

Libro de visitas

Libro de visitas

Libro de visitas (II)Control de las firmas recibidas (I)

Sitio Web

Libro de visitas

Firmas

Permite modificar o eliminar las firmas que han dejado los visitantes: faltas de ortografía, comentarios poco apropiados...

Libro de visitas (III)Control de las firmas recibidas (II). Modificar

Sitio Web

Libro de visitas

Firmas

MODIFICAR

Creado por

Libro de visitas (IV)Control de las firmas recibidas (III). Eliminar

Sitio Web

Libro de visitas

Firmas

ELIMINAR

Práctica 14. Libro de visitas

• Crear un libro de visitas• Insertar comentarios• Gestionar esos comentarios, eliminar,...

BuscadorHerramienta de búsqueda de información

Sitio Web

Buscador

Permite habilitar o deshabilitar las búsquedas dentro del contenido de las páginas o de las secciones del sitio

EstadísticasEstadísticas de acceso a la página web

Sitio Web

Estadísticas

Estilos (I)

• Podemos definir las características del formato de textos.• Tenemos Manuales y Estilos ya predefinidos.

http://www.sidar.org/recur/desdi/mcss/manual/indice.php

Estilos (II)

• Asignar estilo al texto en una página: seleccionar el texto y buscar en la lista el estilo que deseamos colocarle.

• Crear nuevos estilos, debemos escribir en el editor el nombre del nuevo Estilo y entre {} sus atributos:.nuevoestilo {

COLOR: #CC0000;

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

FONT-SIZE: 12px;

FONT-WEIGHT: bold;

TEXT-DECORATION: none

}

Gestor de noticias (I) • Administración de noticias

Noticias

Administración

AGREGAR

Noticias

Administración

ELIMINARMODIFICAR

Noticias

Administración

Gestor de noticias (II)

• Grupo de noticias• Título, volanta y copete• Fecha• Descripción• Imágenes• Archivo relacionado• Visible en la web• Mostrar fecha de

modificación en al web• Mostrar noticias en la

homepage

Información necesaria para crear una noticia

Gestor de noticias (III)Modificar una noticia

Gestor de noticias (IV)Eliminar una noticia

Grupos de noticias (I)

Noticias

Grupos

AGREGAR

Noticias

ELIMINAR

Grupos

MODIFICAR

Noticias

Grupos

Permite crear, modificar o eliminar grupos de noticias

Grupos de noticias (II)

Información necesaria

•Nombre

•Descripción

•Visible en la web

Crear un grupo de noticias

Grupos de noticias (III)Modificar un grupo de noticias

Grupos de noticias (IV)Eliminar un grupo de noticias

Práctica 15.Grupos de noticias y noticias

• Crear dos grupos de noticias “Administración” y

“Alumnos”.

• Crear dos noticias para cada uno de estos grupos.

Sindicaciones (I)

Sindicaciones (II)Agregar una sindicación

Sindicaciones (III)Modificar una sindicación

Sindicaciones (IV)Eliminar una sindicación

Práctica. Sindicaciones

• Sindicar nuestra página web a un periódico