Sitios Web en MiPortal

Transcripción

1 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 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 PERSONAL... 4 PROYECTOS SERVICIOS CONTÁCTENOS IMAGEN PRINCIPAL IMAGEN MENÚ PRINCIPAL NOTICIAS AULA INFORMÁTICA GUÍAS DE ESTUDIO BIBLIOTECA VIRTUAL... 5 MULTIMEDIA... 5 EVENTOS 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 IMAGEN PRINCIPAL MENÚ PRINCIPAL... 7 CONTENIDO PRINCIPAL... 8 PIE DE PÁGINA... 9

3 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 CAMBIO DE COLOR DE FONDO DE LA PÁGINA CAMBIANDO EL FONDO DE PANTALLA CAMBIO DE COLORES DEL MENU SUPERIOR CAMBIANDO EL PIE DE PÁGINA GUÍA PARA LA PUBLICACIÓN DE LOS SITIOS WEB PARA CREAR TU SITIO WEB REALICE LOS SIGUIENTES PASOS: RECOMENDACIONES: SOFTWARE A UTILIZAR... 12

4 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. 1

5 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:

6 Diagrama para la Estructura de la Plantilla del Sitio Web:

7 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.

8 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.

9 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.

10 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.

11 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 # 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.

12 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 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

13 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  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; borderbottom: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:

14 #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 2. Por medio del formulario publicado en el portal educativo en la sección de ayuda: 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: 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 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 su URl del sitio será:

15 Software a utilizar Para trabajar con las plantillas necesitaras un editor de HTML, te podemos recomendar: 1. Notepad Composer Y para trabajar con imágenes te recomendamos 1. Gimp

16