Viceministerio de Ciencia y Tecnología
Gerencia de Tecnologías Educativas
Departamento Web y Portales
Plantilla Estándar para crear los Sitios Web de
Centros Escolares
Sitios Web en MiPortal
S a n S a l v a d o r , f e b r e r o d e 2 0 1 2 .
Contenido INTRODUCCIÓN ...................................................................................................................... 1
ESTRUCTURA Y DISEÑO PARA EL SITIO WEB ......................................................................... 2
DESCRIPCIÓN DE LA ESTRUCTURA Y CONTENIDO ................................................................ 4
MENÚ DE NAVEGACIÓN SUPERIOR ....................................................................................... 4
INSTITUCIONAL. ............................................................................................................. 4
PERSONAL...................................................................................................................... 4
PROYECTOS. .................................................................................................................. 4
SERVICIOS. ..................................................................................................................... 4
CONTÁCTENOS. ............................................................................................................. 4
IMAGEN PRINCIPAL. ............................................................................................................... 5
IMAGEN.. ....................................................................................................................... 5
MENÚ PRINCIPAL. .................................................................................................................. 5
NOTICIAS. ...................................................................................................................... 5
AULA INFORMÁTICA. ..................................................................................................... 5
GUÍAS DE ESTUDIO. ....................................................................................................... 5
BIBLIOTECA VIRTUAL ..................................................................................................... 5
MULTIMEDIA ................................................................................................................. 5
EVENTOS. ....................................................................................................................... 6
GRADUACIONES ............................................................................................................ 6
ENLACES DE INTERÉS ..................................................................................................... 6
CONTENIDO PRINCIPAL ........................................................................................................ 6
PAGINA DE CONTENIDO ................................................................................................ 6
PIE DE PÁGINA ........................................................................................................................ 6
INFORMACIÓN DE LA INSTITUCIÓN .............................................................................. 6
DISEÑO GRÁFICO .................................................................................................................... 7
MENÚ DE NAVEGACIÓN SUPERIOR. ............................................................................... 7
IMAGEN PRINCIPAL. ......................................................................................................... 7
MENÚ PRINCIPAL ............................................................................................................. 7
CONTENIDO PRINCIPAL ................................................................................................... 8
PIE DE PÁGINA .................................................................................................................. 9
MANUAL DE ESTRUCTURACIÓN Y UTILIZACIÓN ................................................................... 9
CREACIÓN DE PÁGINAS DE CONTENIDO ........................................................................ 9
CAMBIO DE LA IMAGEN PRINCIPAL ................................................................................ 9
AGREGAR ELIMINAR MENÚ DE LA BARRA SUPERIOR ................................................ 10
CAMBIO DE COLOR DE FONDO DE LA PÁGINA ............................................................ 10
CAMBIANDO EL FONDO DE PANTALLA ........................................................................ 10
CAMBIO DE COLORES DEL MENU SUPERIOR ............................................................... 10
CAMBIANDO EL PIE DE PÁGINA .................................................................................... 10
GUÍA PARA LA PUBLICACIÓN DE LOS SITIOS WEB ............................................................. 11
PARA CREAR TU SITIO WEB REALICE LOS SIGUIENTES PASOS: ................................. 11
RECOMENDACIONES: ..................................................................................................... 11
SOFTWARE A UTILIZAR .................................................................................................. 12
1
Introducción
Como una estrategia de apoyo a los Centros Educativos que desean tener su
página web y publicar en el Internet, El Portal Educativo de El Salvador pone a
disposición una plantilla para el Sitio Web .
Esto con la finalidad de que cada Centro Educativo pueda hacer uso de esta
plantilla, como una guía y de esta manera publicar la información de actualidad
en el Internet, siendo los servidores del MINED el hosting para almacenar toda
la información ahí publicada.
Estructura y Diseño para el Sitio Web
El diseño es una representación formal y por tanto suele ser el primer punto de
contacto entre el usuario y el sitio. Es por ello que la propuesta de diseño para
la Plantilla de los Sitios Web para los Centro Escolares esta diseñada con la
idea de facilitarles la labor de publicar toda la información que el Centro
Educativo genere y desee mostrar a los usuarios.
La estructura base de la plantilla se ha creado a partir de la recopilación de
información que manejan en su mayoría los Centros Escolares, y es por ello que
se ha trabajado en un diseño práctico y de fácil uso y administración, con el
contenido más esencial a publicar.
Para ello se ha considerado la utilización de estándares web que ayudará a
optimizar el sitio web y hacerlo compatible con todos las tecnologías web. La
funcionalidad es otro factor que se incluye en el diseño lo cual garantiza que el
sitio web se pueda ver en la mayoría de los navegadores y en los diferentes
sistemas operativos, y la accesibilidad y usabilidad favoreciendo su uso y
comprensible para todos los usuarios, encontrando de una manera sencilla la
información que buscan.
La estructura propuesta para el diseño de la Plantilla es sencilla y de fácil
implementación, a continuación se muestra el diagrama que recopila la
información que llevara la plantilla web:
Diagrama para la Estructura de la Plantilla del Sitio Web:
Descripción de la Estructura y Contenido
En este apartado de describirá la información de cada una de las opciones que
posee la propuesta de la Plantilla Web con el fin de homogenizar los conceptos
y la información que se colocará en cada uno de ellos.
MENÚ DE NAVEGACIÓN SUPERIOR
- Institucional.
La información que llevará el Menú Principal será lo relacionado con la
institución, su quehacer, su misión y visión, su historia, oferta académica,
organigrama, el mensaje del Director o directora, entre otros. Que
muestren toda su oferta académica y demás temas relacionados a la
institucionalidad.
- Personal.
Este apartado esta destinado para publicar el perfil de los profesores que
laboran para la Centro Escolar, así como también el personal
administrativo de la institución. Otro punto importante de publicar en este
apartado es la labor que desempeña El Consejo Directivo Escolar con sus
funciones y organigrama.
- Proyectos.
Acá se publicaran todos los proyectos que se están desarrollando en el
Centro Educativo, con toda la información relevante de cada uno de los
proyectos en los que trabaja, fotos, datos estadísticos, entre otros.
- Servicios.
Este ítem se deberá utilizar para poner a la orden los servicios que presta
el Centro Educativo a toda la comunidad estudiantil, pueden ser tramites
de certificados, consulta de historial académico, etc.
- Contáctenos.
Es importante contar con esta sección para que los usuarios que visiten
nuestro sitio web pueda atender cualquier duda del usuario, es por ello
que se debe publicar la información referente a números de teléfono,
correo electrónico, etc. Incluir también la ubicación geográfica para fácil
localización del Centro Escolar.
IMAGEN PRINCIPAL.
- Imagen.
Esta sección esta destinada a insertar una imagen que identifique al Centro
Escolar, con ello se busca darle realce al diseño del Sitio y que brinde una
armonía en conjunto con la información del mismo. No olvidar imprimir
dentro de esta imagen el escudo de la institución así como el Nombre y
Código de Infraestructura, con el objetivo de dar a conocer estos datos
importantes de primera mano a los usuarios que visiten nuestro sitio web.
MENÚ PRINCIPAL.
- Noticias.
Las noticias son el medio para la divulgación de las actividades escolares,
donde se publicaran todos los acontecimientos, eventos y acciones que el
Centro Escolar tenga, ya sea actividades internas así como también con la
Comunidad o gobiernos Locales y otras entidades con quien se relaciona la
Escuela y sea información importantes de difundir.
- Aula Informática.
Este apartado esta destinado para publicar el trabajo que se realiza en las
Aulas Informáticas, con el fin de dar a conocer este recurso tecnológico y
tan importante para el desarrollo de las competencias tecnológicas en los
estudiantes. En ella podrán publicar información relacionada con los
comités de apoyos tecnológicos, proyectos de V-15, entre otros.
- Guías de Estudio.
Esta sección esta destinada para la publicación de archivos con contenido
de apoyo a la prevención de desastres, ayuda a los programas de estudio,
apoyo al trabajo comunitario, entre otros.
- Biblioteca Virtual
Esta sección esta destinada para la biblioteca de archivos documentados
del Centro Educativo, así como archivos de apoyo al currículo y también
como documentos de consulta. También podemos crear categorías con
enlaces a sitios de interés educativos.
- Multimedia
En esta sección podemos publicar videos educativos, así como audios y
archivos multimedia que apoyen la labor del docente en materia de las TIC.
Tomar en cuenta que los formatos a publicar deben ser los más utilizados
en la Internet.
- Eventos.
Aquí se podrá publicar toda la calendarización de actividades de los
Centros Educativos con el fin de tener informada a toda la comunidad
educativa de los eventos a desarrollarse, actividades importantes y demás,
cosas de interés.
- Graduaciones
Este apartado se ha designado a publicar la galería fotográfica de las
graduaciones o promociones de egresados de los Centro Escolares, con ello
se destaca la historia académica del Centro Educativo y su legado a la
comunidad.
- Enlaces de Interés
Esta será una sección en donde podrán publicar todos los enlaces de
interés tanto para docentes, como para estudiantes, incluyendo la
comunidad escolar. También pueden ir catalogados por categorías para
agruparlos y organizarlos de mejor manera y sea de fácil uso.
CONTENIDO PRINCIPAL
- Pagina de Contenido
Se deberá crear una página por cada ítem del Sitio Web, la plantilla
muestra una propuesta de colocar la información por cada página creada,
se debe tomar en cuenta que cada página debe ir enlazada a los menús del
sitio. La página que se ha colocado en la plantilla tiene la siguiente
información: Titulo de la Sección, un apartado para un mensaje secundario
relacionado con el Calendario Escolar o alguna actividad del CE, El Titulo
de la Pagina, Fecha de publicación, autor de la publicación, una imagen
asociada al contenido de la pagina y el contenido.
PIE DE PÁGINA
- Información de la institución
El Pie de pagina del Sitio Web esta destinado para colocar la dirección
geográfica de la institución, así como los números de teléfono de contacto y
un correo electrónico para consultas o sugerencias de parte de los
usuarios. Se incorpora también un menú resumen de información del sitio.
Diseño Gráfico
Menú de Navegación Superior.
El menú de navegación se ubica en la parte superior de la plantilla, lo cual
permite un fácil acceso a las opciones de navegación, el color de fondo para
este menú es #17304e y #479dd6 , el tipo de fuente es Arial #12 y también
posee un componente de búsqueda de información para todo el sitio el cual
tiene una ancho de textbox de 159 pixeles, el ancho de la barra de
navegación es de 30 pixeles.
Imagen Principal.
La imagen principal es un parte esencial en el diseño gráfico del sitio el
cual su función principal es destacar una imagen distintiva del Centro
Escolar, también mostrar el escudo de y el Nombre y código de
Infraestructura. Las dimensiones de esta imagen deben de ser de 780
pixeles de ancho por 255 pixeles de alto.
Menú Principal
Este menú posee la información dinámica de la
institución por lo que se deberá prestar atención en
la actualización constante de la misma.
Contenido Principal
Esta área esta destinada a insertar la información de cada página creada
para el sitio Web, la información a considerar para este ítem es el
siguiente: Título de la Sección: muestra el título de la sección a la que
pertenece la pagina y tiene un tamaño de fuente de 20 pixeles en color
#299fcd; Apartado para mensajes de ideas fuerza: acá se puede colocar
un mensaje o idea fuerza que aporte información rápida sobre el contenido
de la pagina, este contenido esta enmarcado y con fondo color #f6fafd, y
tipo de fuente Arial y tamaño 12 pixeles, el ancho del cuadro es de 585
pixeles; Titulo de la Página: debe ir el titulo de la pagina la cual tiene un
tipo de fuente Arial, color #595959 y tamaño 22 pixeles, este también lleva
la fecha de publicación de la pagina así como el autor de la publicación y
posee un tipo de fuente Arial, color #A4A4A4 y tamaño 12 pixeles;
Contenido: el texto tiene un tipo de fuente Arial tamaño 12 pixeles, y
posee una imagen con tamaño 118 pixeles ancho y 118 pixeles alto
alineada a la izquierda.
Pie de Página
La sección del Pie de página contempla la información siguiente: Dirección
Geográfica del Centro Educativo: tipo de fuente Arial, tamaño 12 pixeles,
color #FFFFFF pixeles, lo mismo aplica para el menú de navegación que se
encuentra bajo la dirección. El color de fondo es #299fcd.
Manual de Estructuración y Utilización
Creación de páginas de contenido
Cuando dese crear un nuevo contenido en la plagian web, debe realizar los
siguientes pasos:
1. Copie la página llamada “plantilla.html”.
2. Cambie el nombre de la página por un nombre que sea
descriptivo.
3. Remplace el contenido, el nombre de la sección y el titulo de la
página que creo en el paso 2.
4. Vincule la página que acaba de crear en los menús respectivos.
Cambio de la imagen principal
La imagen principal del sitio se encuentra almacenada dentro de la carpeta”
images” y tiene por nombre “ce.jpg”, si desea remplazarla , tome en cuenta lo
siguiente:
5. La imagen debe ser en formato jpg.
6. El ancho de la imagen debe ser 780 x 255 pixeles.
7. No sebe pesar mas de 80 Kb.
8. Dentro de la imagen debe llevar :
a. El nombre de la institución
b. Código de infraestructura
c. Departamento
d. Logo del CE
Agregar o eliminar menú de la barra superior
Para agregar o eliminar elementos del menú desplegable siga los siguientes
pasos:
1. Abra la pagina index.html
2. Aproximada mente por la línea 29 busque la marca <!-- Inicia
Menu desplegable--> que indica que inicia la sección de menús.
3. La estructura del menú respeta la jerarquía HTML <ul><li>, en
donde <ul> es el menú superior y <li> es el submenú, seleccione
el nivel en el que desea agregar o eliminar.
4. Si desea eliminar borre la opción marcada dentro de las etiquetas
<li> y </li>
5. Si desea agregar utilice las etiquetas <li> y </li>con el texto
deseado.
Cambio de color de fondo de la página
Si desea cambiar algún aspecto de diseño del sitio web debe utilizar el archivo
“ce.css” ubicado en la carpeta “css” del su directorio raíz.
Cambiando el fondo de pantalla
Aproximadamente en la línea numero 4 del archivo “ce.css” en contrata la
línea:
body{background:#fbfbfb;margin:0px;padding:0px;font:12px Arial,
Helvetica, sans-serif;color:#333;}
En donde background:#fbfbfb hace referencia al color del fonde de
pantalla, si desea cambiarlo por un color blanco , por ejemplo, la línea
quedaría asi:
body{background:#ffffff;margin:0px;padding:0px;font:12px Arial,
Helvetica, sans-serif;color:#333;}
Cambio de colores del menu superior
Aproximadamente en la línea 19 del archivo “ce.css” se encuentra la linea
de código:
#menu_top{ height:32px; background-color: #17304e; border-
bottom:solid 9px #479dd5;}
En donde background-color: #17304e es el color de fondo del menú y
border-bottom:solid 9px #479dd5 representan el color de la línea inferior.
Cambiando el pie de página
Aproximadamente en la línea 72 del archivo “ce.css” se encuentra la linea
de código:
#footer{background-color:#299fcd;border-top:4px solid
#DCE9F6;color:#FFF;padding:5px 10px;margin:auto;}
En donde background-color:#299fcd es el color de fondo y color:#FFF es
el color del texto.
Guía para la Publicación de los Sitios Web
Para crear tu sitio web realice los siguientes pasos:
1. Cree su cuenta en http://www.miportal.edu.sv
2. Por medio del formulario publicado en el portal educativo en la
sección de ayuda:
http://www.miportal.edu.sv/index.php/ayuda/contactenos
solicite la creación de su sitio web especificando su numero de
infraestructura
3. Esperar el correo, confirmando su petición y los datos de acceso
que en él se especifican.
4. Descargue el software libre para gestión de FTP filezilla de:
5. http://filezilla-project.org/download.php?type=client
6.
7. Una vez instalado filezilla introduzca los datos que se le
proporcionaron en el correo y comience la transferencia de
archivos hacia el servidor.
Recomendaciones:
1. Utilice Filezilla como gestor de FTP.
2. Recuerde que la página principal debe llamarse “inicio.html” para
que el servidor pueda encontrar el punto de entrada a su sitio.
3. Su sitio web será visible por medio del dominio
http://sitiosescolares.miportal.edu.sv/{su código de
infraestructura} en donde {su código de infraestructura} es
el código que identifica únicamente a cada institución educativa
de manera que si su código de infraestructura es 123456 su URl
del sitio será: http://sitiosescolares.miportal.edu.sv/123456.
Software a utilizar
Para trabajar con las plantillas necesitaras un editor de HTML, te
podemos recomendar:
1. Notepad ++
2. Composer
Y para trabajar con imágenes te recomendamos
1. Gimp