Sitio Web 3
-
Upload
lorenadesaa -
Category
Education
-
view
712 -
download
1
description
Transcript of 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