Tutorial

Mdulo Proyectos Virtuales Educativos

Tutorial: Creacin de Pginas Web en

Google Page Creador

Existen muchas opciones para crear pginas Web, en esta ocasin crearemos un sitio Web con la herramienta de Google Page Creador.

Visitar sitios Web

Para crear un sitio Web, primero tienes que pensar cules sern las pginas que crears. Si el sitio es para una Institucin Educativa, puedes visitar estos sitios Web para tomar ideas:

Colegio Andino Antillanca

http://www.colegioandino.cl/catalog/home.htm

Colegio Andino de Bogot

http://www.colegioandino.edu.co/

Colegio Tierra Nueva

http://www.colegiotierranueva.edu.co/

Comenzar a crear el propio sitio Web

Para eso:

1) Abrir un navegador de pginas Web (Internet Explorer, Mozilla, Netcaspe, Opera, Ares, etc.)

2) Escribir en el campo de la direccin

http://googlepages.comSi escribiste bien la direccin vers la siguiente pantalla:

Figura Nro. 13) Para ingresar debes usar tus datos de acceso de la cuenta de gmail, en email y password.

4) Una vez ingresado aparece la siguiente ventana de bienvenida, hacer clic en Im ready to create my pages

Figura Nro.2

5) Luego se muestra la siguiente ventana activar la aceptacin de los trminos y condiciones de uso. Hacer clic donde indica la flecha.

Figura Nro. 36) Luego aparece la siguiente ventana. Para comenzar, elige una plantilla con la opcin Change Look,

Figura Nro.47) Selecciona el diseo de tu agrado haciendo doble clic sobre el mismo de entre todas las plantillas que aparezcan.

Figura Nro. 58) Aparece la plantilla elegida. Esa primera pgina es el HOME o pgina principal. All se puede actualizar la informacin, haciendo clic el los lugares donde hay textos en ingls. Escribir el ttulo del sitio en el lugar donde dice: clic here to enter your pages title tal cual aparece en la siguiente pantalla.

Figura Nro. 6Salir y volver a ingresar al sitio. Cuando se reingresa se visualiza la siguiente pantalla:

Figura Nro. 7La arquitectura del Sitio

Ahora agregaremos las pginas al sitio, donde publicaremos el proyecto de grado. Luego pueden crear otro para promover el proyecto.

1) En la imagen anterior, se visualizan dos cuadros, hacer clic en el que tiene la casita, esa es la pgina principal.

Figura Nro. 82) Luego se visualiza la siguiente ventana

Figura Nro. 93) En la caja de texto de la izquierda, hacer clic y escribir los NOMBRES de las pginas que tendr el sitio Web. Por ejemplo:

Sitio Web de Proyecto

Inicio

Planteamiento del Problema

Descripcin

Justificacin

Marco Terico

Estado del Arte

Objetivos

Metodologa Propuesta

Introduccin con enfoque

Fases y Etapas

..

Sitio Web Institucional

Inicio

Misin

Visin

Modelo Pedaggico

PEI

Aula Virtual

Plan de estudios

Sedes

Docentes

Estudiantes

Promociones

Para ENSENET, tener en cuenta la gua para publicacin del proyecto de grado entregado por el profesor.

4) Una vez hecho el listado de pginas que tendr el sitio comenzar a agregarlas. Cmo? 4.a- Marcar (seleccionar) con el mouse el ttulo. Luego hacer clic sobre el botn Link

Figura Nro. 104.b- Luego aparece la siguiente ventana, hacer clic en el botn Add Page

Figura Nro. 114.c- Luego se visualiza la siguiente pgina, ver que ya aparece una pgina con el ttulo elegido. All hacer clic en el botn Ok.

Figura Nro. 124.d- Aparecer la pgina principal con el link hecho. Repetir los pasos desde el 4.a y hasta el 4.c hasta finalizar con todas las pginas.

Figura Nro.135) Ahora a copiar ese MEN de NAVEGACIN en cada una de las pginas. Para eso, seleccionar con el mouse todos los ttulos, COPIAR. Hacer clic en Back to Site Manager.

Figura Nro. 146) Luego visualizarn la siguiente ventana, con todas las pginas creadas. Hacer en la segunda pgina, en este caso: Misin

Figura Nro. 157) Una vez all, en el marco de texto de la izquierda PEGAR el men de la pgina principal. Luego seleccionar el primer ttulo, en este caso: Inicio, hacer clic en el botn Link, y enlazarlo a la pgina principal (el que tiene el icono de una casita). En este ejemplo: I.E. Distrital Juan B. Alberti. Verificar que est marcado en color naranja suave, luego hacer clic en el botn Ok.

Figura Nro. 168) Luego se visualiza la siguiente ventana, con los links sealados en color rojo (en este ejemplo). Esta ventana est en modo EDICIN.

Figura Nro. 179) Luego agregar este men en las dems pginas:9.a Seleccionar y copiar este men.

9.b - Hacer clic en Back to Site Manager.9.c- Ingresar a cada una de las pginas.

9.d- Pegar en la caja de texto de la izquierda.

10) Una vez copiado el men en todas las pginas. Estando en la ventana de la figura Nro. 15 (para eso hacer paso 9.b). Una vez all:10.a Hacer clic en All, para seleccionar todas las pginas.

10.b Luego hacer clic sobre el botn Publish

Figura Nro.1810.c- Luego debern ver todas las pginas en un cuadro celeste claro. Como en la siguiente figura. Eso significa que todas las pginas ya pueden visitarse desde Internet.

Figura Nro. 1911) Hacer la prueba de funcionamiento del sitio. Para eso hacer clic en la direccin en celeste donde dice: (en el ejemplo de este ejercicio). Deben poder navegar por todo el sitio sin ningn problema. Site Manager: http://gpeucc23.googlepages.com

12) Una vez que hayan comprobado que todo funciona bien, comenzar a ingresar textos e imgenes a cada pgina. Agregar imgenes

Para agregar imgenes o fotos seguir los siguientes pasos:

1) Entra a la pgina en la que deseas incluir fotos o imgenes.

2) All veras una men como en la siguiente imagen:

Figura Nro. 20Haz clic en el botn Image. Luego aparece la siguiente ventana. All buscas la imagen que deseas incluir, si lo deseas puedes subir todas, de a una.

Figura Nro. 213) Una vez que lograste subir todas las imgenes (despus puedes seguir este proceso), se visualiza como el siguiente ejemplo:

Figura Nro. 22All, seleccionas la imagen que deseas agregar y luego hacesclic en el botn Add Image.

4) Una vez agregada la imagen, aparece la pgina que se est editando:

Figura Nro. 23Si la deseas dejar como se ve, haces clic en algn lugar de la pgina y desaparece la ventana de dialogo para ampliar o hacer algo ms con la imagen, ensaya a ver que pasa.

Pginas hechas en Google Page

Monte Cristo

http://montecristofan.googlepages.com/Literatura Latina Activa

http://literaturalatinaactiva.googlepages.com/

Quinto Encuentro Continental Tawaintisuyu Pacha De Jovenes Y Nacionalidades Originarios

http://quintoencuentrotawaintisuyu.googlepages.com/

Asociacin Escolar de Gimnasia Artstica

http://aegachile.googlepages.com/Promocin 96 Externado San Jos

http://prom96externado.googlepages.com/

Pgina personal Hoja de Vida de Mara Patricia Ochoa Valbuena

http://mpochoav.googlepages.com/Agregar cosas al sitio.

Foros:

http://www.webconferencia.net/forum.php

Crear el foro y luego hacer el link desde la pgina al foro.

Sitios creadas en la cohorte XII

http://puntadalaboral.googlepages.com/

Puntada laboral

http://programaepe.googlepages.com/Escuela para el Emprendimientos

http://nancyagopo2.googlepages.com/homeFundacin de Turismo Ambiental Cogua A.T.A.

Haz clic aqu

Haz clic aqu

Autor: Crescencio Orrego- 1 -