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