Tutorial Sobre Paguina Web Educativa

1. 1
I. CONOCIENDO NUESTRA WEB
Ingresar en su navegador su dirección de su página web, para este ejemplo utilizaremos la web
de la I.E. San Pedro (http://sanpedro.piuraeduca.com/), ud. debería ingresar a su respectiva
dirección web proporcionada por AulaPeru.
Banner de bienvenida:
 Al iniciar nuestra página web lo primero en mostrarse es la ventana emergente de
bienvenida.
 Sobreponemos el mouse y damos click en (cerrar) para salir de esta ventana.
Distribución de nuestra página web:
1. Logo y nombre de la web
2. Dirección de la página web.
3. Animación en flash.
4. Sección de redes sociales (Facebook, twiter y youtube).
5. Inicio de sesión.
6. Slider Informativo (4 imágenes que se alternan entre ellas).
7. Menú principal de nuestra web (contiene los enlaces a las diferentes ventanas)
8. Título y texto principal.
9. Links de descargas para archivos pdf.
10. Links de ingreso para Galería, Talleres y Aula Virtual.
11. Video principal de nuestra web
12. Texto de referencia a nuestro video.
13. Dirección de la IE en google maps.
14. Contador de visitas.

2. 2
15. Imagen n°1 del pie de pagina
16. Dirección completa de la IE
17. Números de referencia de la IE
18. Correos y páginas de referencia de la IE
19. Sección de redes sociales (Facebook, twiter y youtube).
20. Imagen n°2 del pie de página.
21. Descripción del pie de pagina.
Modelo de página web:

3. 3
II. ADMINISTRAR PAGINA WEB
INGRESO AL ADMINISTRADOR
Para empezar a modificar nuestra web empezaremos por iniciar sesión como administrador:
Nos ubicamos en ingresar y damos click
Ingresamos nuestro usuario y contraseña respectivamente y le damos en el botón ingresar
Luego ingresamos en el link (IR A ADMINISTRADOR)

4. 4
Nos aparecerá la ventana principal del Administrador Web la cual está dividida en 3secciones:
1. Menú principal: Contiene la lista de todas las ventanas de nuestro menú izquierdo (INICIO, NOSOTROS, IDENTIDAD,
PRINCIPOS PEDAGOGICOS, SRRVCIOS, ADMISION, CONTACTO), desde aquí podemos modificar la información
contenida en dichas ventanas.
2. Enlaces: Contiene la lista de los enlaces izquierdos (TALLERES Y FOTOS), desde aquí podemos modificar la información
contenida en dichos enlaces.
3. General: Desde aquí se modificara los títulos de nuestro menú, subir los archivos pdf descargables y la información
contenida en el pie de pagina.
MENU PRINCIPAL
INICIO
Ingresamos a la opción INICIO, desde aquí se modificara la información de la ventana INICIO.
Link retornar: redirige automáticamente al menú principal.
Subir animación: subimos el archivo animado para nuestra web, el archivo debe tener el
nombre animación.swf.
Noticia: modifica la ventana emergente (POP-UP) que aparece al inicio de la pagina web

5. 5

6. 6
NOSOTROS
Ingresamos a la opción NOSOTROS, desde aquí se modificara la ventana NOSOTROS.+
Modificamos la VISIÓN de la institución tanto el titulo como el contenido, siempre se modifica
uno por uno
Modificamos la MISIÓN de la institución tanto el titulo como el contenido, siempre se modifica
uno por uno
En este cuadro N° 3 podemos ingresar un nuevo TITULO y CONTENIDO con información de la
institución (Ejm. VISIÓN y MISIÓN).

7. 7
En este cuadro N° 4 podemos ingresar un nuevo TITULO y CONTENIDO con información de la
institución (Ejm. VISIÓN y MISIÓN).
Primero buscamos y seleccionamos la imagen que subiremos, segundo modificamos y por
ultimo le agregamos los títulos a las imágenes

8. 8
IDENTIDAD
En esta sección contamos con ocho secciones editables donde primero buscamos y
seleccionamos la imagen, segundo lo modificamos, tercero modificamos el título y por último
el contenido
PRINCIPIOS PEDAGOGICOS
Podemos editar las imágenes que tenemos en esta sección.
Esta sección cuenta con nueve partes editables para colocar texto
SERVICIOS
En esta sección se ingresa los servicios que brinda la institución y se modifica

9. 9
Podemos modificar las imágenes de los servicios que brinda la institución
Cuenta con tres listas y cada una de ellas con doce ítems los cuales se puede agregar los
servicios y talleres de la institución
Cuenta también con una parte donde podemos ingresar el horario de atención

10. 10
ADMISIÓN
En esta parte podemos ingresar los requisitos que se solicitan a la hora de realizar la matricula,
cuenta con ocho requisitos y una sección para subir una imagen
CONTACTO
En esta sección se pude agregar los datos para que las personas se pongan en contacto con
ustedes y se puede agregar una imagen

11. 11
ENLACES
TALLERES
Ingresamos a la opción TALLERES, desde aquí se modificara la información de la ventana
TALLERES.
Link retornar: redirige automáticamente al menú principal.
Modificar el título del taller: modificaremos cada título que tendrá los talleres de la institución
educativa.
Modificar el contenido de cada taller: se modificara el contenido de cada taller, que está
divido en párrafos.

12. 12
Seleccionar y modificar imagen: seleccionamos y modificamos un archivo de imagen de dicho
taller.
FOTOS
Ingresamos a la opción FOTOS, desde aquí se modificara la información de la ventana FOTOS.
Link retornar: redirige automáticamente al menú principal.
Seleccionar y modificar la foto: seleccionamos y modificamos las fotos que tiene la institución
educativa.

13. 13
GENERAL
MENU
Ingresamos a la opción MENU, desde aquí se modificara la información de la ventana MENU.
Link retornar: redirige automáticamente al menú principal.
Modificamos el título de las páginas: modificamos los títulos de las páginas principales de la
página web de la institución educativa.
Subir los archivos PDF: se tendrá que seleccionar y subir los archivos PDF respectivamente.
(El archivo PDF tiene que tener la siguientes sintaxix:”archivo1.pdf”,”archivo2.pdf” y “archivo
pd3”).

14. 14
Subir el logo de la I.E: seleccionamos y subimos el logo respectivo de la que tendrá la página
web de la institución educativa. (El logo de la ventana tendrá la siguiente
sintaxis:”logo_ventana.png”).
Modificar los links: modificar los links de las páginas de la intranet, aula virtual y google maps.
PIE DE PÁGINA
Ingresamos a la opción PIE DE PAGINA, desde aquí se modificara la información de la ventana
PIE DE PAGINA.
Link retornar: redirige automáticamente al menú principal.
Imágenes de pie de página: seleccionamos y modificamos las imágenes respectivas que irán en
el pie de página.
Imágenes de pie de página: modificamos la dirección, teléfono y web de la I.E; y los links
respectivos de sus redes sociales.

15. 15
Título de pie de página: modificamos el título de la página con el nombre respectivo de la
institución educativa.
NOTA:
Estimados docentes, queremos informarles que la WEB ADMINISTRABLE INSTITUCIONAL irá
implementándose, conforme avancemos en el programa CIEN AULAS EN LA NUBE.