Viceministerio de Ciencia y Tecnología

Gerencia de Tecnologías Educativas

Departamento Web y Portales

Plantilla Estaá ndar para crear los Sitios Web de

Centros Escolares

Sitios Web en MiPortal

San Salvador, febrero de 2012.

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
Introducción

Como una estrategia de apoyo a los Centros Educativos que desean tener su
paá gina web y publicar en el Internet, El Portal Educativo de El Salvador pone a
disposicioá 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 informacioá n de actualidad
en el Internet, siendo los servidores del MINED el hosting para almacenar toda
la informacioá n ahíá publicada.

1
Estructura y Diseño para el Sitio Web

El disenñ o es una representacioá 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 disenñ o para
la Plantilla de los Sitios Web para los Centro Escolares esta disenñ ad a con la
idea de facilitarles la labor de publicar toda la informacioá 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 recopilacioá n de

informacioá n que manejan en su mayoríáa los Centros Escolares, y es p or ello que
se ha trabajado en un disenñ o praá ctico y de faá cil uso y administracioá n, con el
contenido maá s esencial a publicar.

Para ello se ha considerado la utilizacioá n de estaá ndares web que ayudaraá a

optimizar el sitio web y hacerlo compatible con todos las tecnologíáas web. La
funcionalidad es otro factor que se incluye en el disenñ 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
informacioá n que buscan.

La estructura propuesta para el disenñ o de la Plantilla es sencilla y de faá cil

implementacioá n, a continuacioá n se muestra el diagrama que recopila la
informacioá n que llevara la plantilla web :
 Diagrama para la Estructura de la Plantilla del Sitio Web:

Comités de Apoyo
Tecnológico
Aula Informática
Aula Informática 1 nstitucional

Proyecto V-15

En caso de desastres
Guias de Estudio

Reglamento Interno

MiPortai
Sitios Web
de CE
r----
-1Personal
Consejo Directivo Escolar
Calendario de Actividades

Proyectos ¿Qué ruta tomamos?

Graduaciones
Recreos Orientados

www.mined.gob.sv
Servicios
Enlaces de Interés
www.miportal.edu.s
v Buzón de Sugerencias
www.piensa.edu.sv Contáctenos
Ubicación Geográfica
Descripción de la Estructura y Contenido

En este apartado de describiraá la informacioá n de cada una de las opciones que

posee la propuesta de la Plantilla Web con el fin de homogenizar los conceptos
y la informacioá n que se colocaraá en cada uno de ellos.

MENÚ DE NAVEGACIÓ N SUPERIO R

- Institucional.
La informacioá n que llevaraá el Menuá Principal seraá lo relacionado con la
institucioá n, su quehacer, su misioá n y visioá n, su historia, oferta acadeá mica,
organigrama, el mensaje del Director o directora, entre otros. Que
muestren toda su oferta acadeá mica y demaá 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 tambieá n el personal
administrativo de la institucioá n. Otro punto importante de publicar en este
apartado es la labor que desempenñ a El Consejo Directivo Escolar con sus
funciones y organigrama.

- Proyectos.
Acaá se publicaran todos los proyectos que se estaá n desarrollando en el
Centro Educativo, con toda la informacioá n relevante de cada uno de l os
proyectos en los que trabaja, fotos, datos estadíásticos, entre otros.

- Servicios.
Este íátem se deberaá 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 acadeá mico, etc.

- Contáctenos.
Es importante contar con esta seccioá n para que los usuarios que visiten
nuestro sitio web pueda atender cualquier duda del usuario, es por ello
que se debe publicar la informacioá n referente a nuá meros de teleá fono,
correo electroá nico, etc. Incluir tambieá n la ubicacioá n geograá fica para faá cil
localizacioá n del Centro Escolar.
IMAGEN PRINCIPAL.

- Imagen.
Esta seccioá n esta destinada a insertar una imagen que identifique al Centro
Escolar, con ello se busca darle realce al disenñ o del Sitio y que brinde una
armoníáa en conjunto con la informacioá n del mismo. No olvidar imprimir
dentro de esta imagen el escudo de la institucioá n asíá como el Nombre y
Coá 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Ú PRINCIPA L.

- Noticias.
Las noticias son el medio para la divulgacioá 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 tambieá n con la
Comunidad o gobiernos Locales y otras entidades con quien se relaciona la
Escuela y sea informacioá n importantes de difundir .

- Aula Informática.
Este apartado esta destinado para publicar el trabajo que se realiz a en las
Aulas Informaá ticas, con el fin de dar a conocer este recurso tecnoloá gico y
tan importante para el desarrollo de las competencias tecnoloá gicas en los
estudiantes. En ella podraá n publicar informacioá n relacionada con los
comiteá s de apoyos tecnoloá gicos, proyectos de V -15, entre otros.

- Guías de Estudio.
Esta seccioá n esta destinada para la publicacioá n de archivos con contenido
de apoyo a la prevencioá n de desastres, ayuda a los programas de estudio,
apoyo al trabajo comunitario, entre otros.

- Biblioteca Virtual
Esta seccioá n esta destinada para la biblioteca de archivos documentados
del Centro Educativo, asíá como archivos de apoyo al curríáculo y tambieá n
como documentos de consulta. Tambieá n podemos crear cat egoríáas con
enlaces a sitios de intereá s educativos.

- Multimedia
En esta seccioá 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 maá s utilizados
en la Internet.

- Eventos.
Aquíá se podraá publicar toda la calendarizacioá n de actividades de los
Centros Educativos con el fin de tener informad a a toda la comunidad
educativa de los eventos a desarrollarse, actividades important es y demaá s,
cosas de intereá s.

- Graduaciones
Este apartado se ha designado a publicar la galeríáa fotograá fica de las
graduaciones o promociones de egresados de los Centro Escolares, con ello
se destaca la historia acadeá mica del Centro Educativo y su legado a la
comunidad.

- Enlaces de Interés
Esta seraá una seccioá n en donde podraá n publicar todos los enlaces de
intereá s tanto para docentes, como para estudiantes, incluyendo la
comunidad escolar. Tambieá n pueden ir catalogados por categoríá as para
agruparlos y organizarlos de mejor manera y sea de faá cil uso.

CONTENIDO PRIN CIPAL

- Pagina de Contenido
Se deberaá crear una paá gina por cada íátem del Sitio Web, la plantilla
muestra una propuesta de colocar l a informacioá n por cada paá gina creada,
se debe tomar en cuenta que cada paá gina debe ir enlazada a los menuá s del
sitio. La paá gina que se ha colocado en la plantilla tiene la siguiente
informacioá n: Titulo de la Seccioá n, un apartado para un mensaje secundario
relacionado con el Calendario Escolar o alguna actividad del CE, El Titulo
de la Pagina, Fecha de publicacioá n, autor de la publicacioá 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 direccioá n
geograá fica de la institucioá n, asíá como los nuá meros de teleá fono de contacto y
un correo electroá nico para consultas o sugerencias de parte de los
usuarios. Se incorpora tambieá n un menuá resumen de informacioá n del sitio.
Diseño Gráfico

 Menú de Navegación Superior.

El menuá de navegacioá n se ubica en la parte superior de la plantilla, lo cual

permite un faá cil acceso a las opciones de navegacioá n, el color de fondo para
este menuá es #17304e y #479dd6 , el tipo de fuente es Arial #12 y tambieá n
posee un componente de buá squeda de informacioá n para todo el sitio el cual
tiene una ancho de textbox de 159 pixeles, el ancho de la barra de
navegacioá n es de 30 pixeles.

 Imagen Principal.

La imagen principal es un parte esencial en el disenñ o graá fico del sitio el

cual su funcioá n principal es destacar una imagen distintiva del Centro
Escolar, tambieá n mostrar el escudo de y el Nombre y coá digo de
Infraestructura. Las dimensiones de esta imagen deben de ser de 780
pixeles de ancho por 255 pixeles de alto.

 Menú Principal

Este menuá posee la informacioá n dinaá mica de la

institucioá n por lo que se deberaá prestar atencioá n en
la actualizacioá n constante de la misma.
 Contenido Principal

Esta aá rea esta destinada a insertar la informacioá n de cada paá gina creada
para el sitio Web, la informacioá n a considerar para este íátem es el
siguiente: Título de la Sección: muestra el tíá tulo de la seccioá n a la que
pertenece la pagina y tiene un tamanñ o de fuen te de 20 pixeles en color
#299fcd; Apartado para mensajes de ideas fuerza : acaá se puede colocar
un mensaje o idea fuerza que aporte informacioá n raá pida sobre el contenido
de la pagina, este contenido esta en marcado y con fondo color #f6fafd, y
tipo de fuente Arial y tamanñ 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 tamanñ o 22 pixeles, este tambieá n lleva
la fecha de publicación de la pagina asíá como el autor de la publicacioá n y
posee un tipo de fuente Arial, color # A4A4A4 y tamanñ o 12 pixeles;
Contenido: el texto tiene un tipo de fuente Arial tamanñ o 12 pixeles, y
posee una imagen con tamanñ o 118 pixeles ancho y 118 pixeles alto
alineada a la izquierda.
 Pie de Página

La seccioá n del Pie de paá gina contempla la informacioá n siguiente: Direccioá n

Geograá fica del Centro Educativo: tipo de fuente Arial, tamanñ o 12 pixeles,
color #FFFFFF pixeles, lo mismo aplica para el menuá de navegacioá n que se
encuentra bajo la direccioá 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 paá gina llamada “plantilla.html”.

2. Cambie el nombre de la paá gina por un nombre que sea
descriptivo.
3. Remplace el contenido, el nombre de la seccioá n y el titulo de la
paá gina que creo en el paso 2.
4. Vincule la paá gina que acaba de crear en los menuá 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 institucioá n
b. Coá digo de infraestructura
c. Departamento
d. Logo del CE
 Agregar o eliminar menú de la barra
superior

Para agregar o eliminar elementos del menuá 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 seccioá n de menuá s.
3. La estructura del menuá respeta la jerarquíáa HTML <ul><li>, en
donde <ul> es el menuá superior y <li> es el submenuá , seleccione
el nivel en el que desea agregar o eliminar.
4. Si desea eliminar borre la opcioá 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 alguá n aspecto de disenñ 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 arc hivo “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 coá digo:

#menu_top{ height:32px; background-color: #17304e; border-

bottom:solid 9px #479dd5;}

En donde background-color: #17304e es el color de fondo del menuá 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 coá 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:#FF F 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
seccioá n de ayuda:
http://www.miportal.edu.sv/index.php/ayuda/conta ctenos
solicite la creacioá n de su sitio web especificando su numero de
infraestructura
3. Esperar el correo, confirmando su peticioá n y los datos de acceso
que en eá l se especifican.
4. Descargue el software libre para gestioá n de FTP filezilla de:
5. http://filezilla -proje ct.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 paá gina principal debe llamarse “inicio.html” para

que el servidor pueda encontrar el punto de entrada a su sitio.

3. Su sitio web seraá visible por medio del dominio

http://sitiosescolares. miportal.edu.sv/{su coá digo de
infraestructura} en donde {su coá digo de infraestructura} es
el coá digo que identifica uá nicamente a cada institucioá n educativa
de manera que si su coá digo de infraestructura es 123456 su URl
del sitio seraá : http://s i tiosescolares.miportal. edu.sv/12 3 45 6.
 Software a utilizar

Para trabajar con las plantillas necesitaras un editor de HTML , te

podemos recomendar:

1. Notepad ++
2. Composer

Y para trabajar con imaá genes te recomendamos

1. Gimp