Tutorial web[1]

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

Transcript of Tutorial web[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

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

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

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

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

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

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

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

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

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

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

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

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

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.