En el Máster de profesorado me pidieron que impartiera la Unidad Didáctica de Diseño de Páginas Web en 3ro y 4to de la ESO, por lo que pude ver previamente a empezarla como era cada grupo y decidí que con los primeros emplearía Google Sites, puesto que tenía solo tres clases y no se les veía tan avispados que 4to, y con los mayores codificación HTML + CSS (siguiente post que escriba será sobre esto).
Así pues os dejo un tutorial, que me hice para saber que puntos tratar en clase, que seguramente haya a patadas pero prefería ese toque personal, aunque no los expliqué todos puesto que había que experimentar la Competencia de Aprender a Aprender y la del Autoaprendizaje para que fueran ellos quienes experimentaran:
1. Registro
1.1. Darse de Alta en Google Sites
El primer paso de todos es darse de alta en la herramienta de Google, para ello primero se debe ir o bien en las opciones que hay en la parte superior primero a “Más” y luego a “Sites” o bien acceder a la URL : http://sites.google.com/ y a partir de ahí en la parte izquierda se puede observar dos tipos de registro:
• Con una cuenta de Google asociada
• O con cualquier otra cuenta de correo (Hotmail, Yahoo, AOL, …), que es la parte que se puede ver como “Registrarse en Sites”
La 1ra opción será para aquellos que tengan asignada una cuenta de Google o una vez que se hayan dado de alta con otra cuenta distinta a @gmail.com puedan acceder con ella.
Para la 2da opción se tiene la siguiente pantalla:
• Dirección de correo electrónico actual (E-mail al que se asociará la cuenta de Google Sites)
• Contraseña: será la requerida para acceder a Google Sites (no tiene porque ser igual a la del correo, de hecho es mejor que no se parezca en nada)
• Verificación de la palabra: Palabra Captcha que usa Google para ver que no eres un Robot
1.2. Confirmación de la cuenta
Una vez aceptado el formulario. Se procederá a la página de Confirmación de creación de cuenta y se deberá hacer clic en el enlace “Haga clic aquí para continuar” que está abajo del todo y se habrá enviado un correo a esa cuenta que se acaba de dar, por ello será necesario entrar en el email y el email que te envía account-verification-noreply @ google.com con Asunto: Verificación de correo electrónico de Google tendrá dentro un enlace a una página web en la segunda línea del cuerpo del mensaje del email, algo parecido a esto:
Te damos la bienvenida a Cuentas de Google. Para activar tu cuenta y verificar tu dirección de correo electrónico, haz clic en el siguiente enlace:
https://www.google.com/accounts/VE?service=jotspot&c=CLiz9Yaun-T4_wEQFvFvr5L22vFFTAF&hl=es
Y una vez que se haya hecho clic te envía a una página de confirmación, donde habrá un enlace con el texto “Haga clic aquí para continuar” abajo. Al haber clicado ahí te envía a está página donde habrá que hacer clic en el botón “CREAR SITIO” :
1. Creación del sitio web
1.1. Datos del sitio
Una vez dentro, saldrá un primer formulario como este, donde habrá que indicar:
- El nombre de tu sitio Web (como se titulará)
- El nombre de la URL que tendrá (el que se podrá ver en la dirección web del sitio)
- El tema (diseño) que quieras que tenga
- La descripción de tu sitio
- Un captcha como verificación
1.2. Página principal
Al ingresar las opciones y que el nombre URL no coincida con ningún otro existente se hará clic en el botón “Crear Sitio” que nos enviará a la página de inicio de tu propio sitio web :
La cual se divide en tres partes:
- La parte Superior.
- La parte del menú Izquierdo.
- La parte Central.
La parte Central:
Será donde irá el contenido de cada página del sitio web, editable desde la parte superior.
La parte Izquierda:
Será donde se sitúa el menú del sitio web (para acceder a las distintas páginas que un usuario podrá ver cuando acceda a él), y donde se podrán añadir Gadchets para el sitio, así como tiene un enlace que será visible sólo sí estamos dados de alta con nuestra cuenta para acceder a las opciones del sitio, que es el enlace “Editar Barra lateral” y cumple la misma función que el botón “Más opciones” de la parte superior
La parte Superior:
Será desde donde se podrá:
- crear una página al sitio (con el Botón “Crear Página”)
- Editar la página en la que se esté (con el Botón “Editar Página”)
- Y el Botón “Mas acciones” con el cual se podrá acceder a todas las opciones del sitio Web, como son:
- Editar el Contenido del sitio
- Actividad reciente del sitio
- Páginas
- Archivos adjuntos
- Plantillas de páginas
- Secuencias de comandos de Apps
- Elementos eliminados
- Editar la Configuración del sitio
- General
- Compartir este sitio
- Obtener ingresos
- Dirección web
- Editar la Apariencia del sitio
- Presentación del sitio
- Colores y fuentes
- Temas
1.3. Crear una página nueva
Para ello será suficiente con pulsar el botón que hay en el marco superior de “Crear página” y saltará al siguiente formulario donde habrá que poner:
- El nombre que tendrá esa página
- En que nivel estará contenido, servirá para hacer subpáginas (por ejemplo si se tiene un menú que sea “Unidades Didácticas” y se quiere crear la página “Tema 1 – Arquitectura de Ordenadores” para introducirla dentro de “Unidades Didacticas” y no sobre “Página Principal”
- El tipo de plantilla para esa página (a elegir entre los cuatro posibles), este resumen de las posibles tipos de páginas ha sido sacado de la ayuda de Google:
- Página web, Una página web es el tipo de página más simple. Permite escribir texto, insertar gadgets y disponer el contenido de la forma que quieras. La página web incluye controles de formato estándar como negrita, cursiva, subrayado, viñetas, etc. Puedes adjuntar documentos del disco duro de tu ordenador en la parte inferior de la página y permitir que otros colaboradores del sitio comenten tus páginas. Google Sites guarda periódicamente las versiones de tu página a medida que la modificas, por lo que es muy fácil volver a las versiones anteriores para comparar y deshacer cambios.
- Anuncios, de forma parecida a los blogs, las páginas de la plantilla Anuncios muestran entradas que has publicado en la página en orden cronológico, comenzando por la más reciente. Por ejemplo, una página de anuncios es la mejor forma de llevar un registro de las notas de las reuniones semanales; así se tiene acceso rápido a la información más reciente.
anuncio
Esta será la página que se mostrará si se crea con una plantilla de “Anuncios” con el nombre de “MisAnuncios”, y si se quiere insertar una nueva entrada se deberá pulsar el botón “Nueva Entrada” el cual llevará a una página para realizar una entrada nueva en los anuncios que se realicen:
- Archivador, las páginas de la plantilla Archivador te permiten almacenar y organizar los archivos del disco duro de tu ordenador. Es una forma de compartir fácilmente los archivos con otros usuarios del sitio. Cada vez que se añadan, se cambien o se eliminen archivos, se notificará debidamente a los usuarios que estén suscritos a la página.
Esta será la página que se creará si se selecciona un tipo de plantilla de tipo “Archivador”:
- Página de lista, este tipo de plantilla permite crear y organizar listas de información. Es muy fácil añadir elementos a las listas, así como modificarlos y eliminarlos. Los lectores de la lista pueden ordenarlos por cualquiera de las columnas. Como ocurre con las páginas de la plantilla Archivador, se notifica a los suscriptores cada vez que se añadan, se cambien o se eliminen elementos.
Y esta será la página que se cree si se selecciona una plantilla de tipo “Lista”:
Al pulsar sobre el botón “Crear Página” nos redireccionará al modo de edición de esa página que se acaba de crear, quedando dividida la página en cuatro partes:
- El marco, o parte, superior.
- El marco Izquierdo,
- El marco central
- El marco inferior.
El marco central
Será donde esté situada la zona de edición del contenido de esta página.
Al haber creado una página nueva, salen dos recuadros, uno estrecho y alargado que se referirá al título que tenga esa página y otro más ancho e igual de largo que el anterior, que será donde vaya el contenido de la página.
El marco izquierdo
Será donde esté situada el menú de navegación del sitio, con la lista de las páginas disponibles y los gadchets que se tengan. No es editable en esta ocasión.
El marco inferior
Desde aquí se podrán subir los documentos relacionados que tenga esta página web o añadir los comentarios pertinentes.
El marco superior
Desde aquí se tendrá la opción de guardar el contenido que se ha introducido o el de cancelarlo, mediante los botones de “Guardar” y “Cancelar” que hay en la parte superior derecha.
Nota: Siempre que se cree o modifique una página se deberá pulsar el botón de guardar, sino se perderán los cambios introducidos.
Luego están dos partes más, una que son cuatro menús desplegables desde donde se podrá editar la información de la página:
1.3.1. Menú Insertar
Donde se podrá insertar cualquier tipo de elemento, se agrupan por tipo:
De donde se destacará como insertar una imagen y un enlace, el resto es igual que estos pero cambiando el contenido a añadir, muy intuitivo todo. Depende de la necesidad que se tenga para insertar un tipo u otro de datos.
1.3.1.1. Insertar una Imagen
Hay dos opciones de insertar una imagen:
- Desde nuestro ordenador, después de buscarla en el ordenador la subirá a nuestro sitio y siempre que se muestre accederá a ella para enseñarla
- Desde un sitio web externo, no estará en nuestro sitio (y por lo tanto no ocupará espacio) y siempre que se quiera mostrar se accederá al servidor donde está alojado para enseñarla
1.3.1.2. Insertar un enlace
Nos mostrará esta página desde la cual se podrá crear un enlace de tres maneras posibles:
- a una página de nuestro propio sitio, donde en la parte de debajo del cuadro de texto y el botón “buscar páginas” sale el listado de las páginas disponibles
- a una dirección web externa a nuestro sitio, “Dirección Web”, incluso si es un enlace a una dirección de correo. Donde en el único recuadro disponible se insertará la URL del sitio (http://www…) o la dirección de correo que se desee. Se acepta con el botón de abajo a la izquierda y se verá en la parte central con el estilo http:// … y subrayado.
- mediante un script que se tenga creado
1.3.2. Menú Formato
Con un texto de la página seleccionado se le cambiará el formato al que se quiera del siguiente menú:
1.3.3. Menú Tabla
Todo lo referente a las tablas:
1.3.4. Menú Diseño
Referente al diseño del sitio web, para añadir columnas o quitar, o cambiar de posición la barra lateral.
1.4. Editar una página
Para editar una página existente será suficiente con pulsar el botón de “Editar página” situado arriba a la derecha, el cual nos llevará al formato de edición de la página que se acaba de mostrar en el punto anterior 2.3 Crear una página por lo que las funciones de edición serán las mismas que las de crear una página nueva, a diferencia que aquí se modificará el contenido de una página pero frontal de edición es el mismo, con sus cuatro partes ya descritas.
2. Opciones del sitio
Todas las opciones editables del sitio web estarán dividas en tres grupos los cuales son bastante intuitivos, si se desea editar alguna opción de un documento o de un archivo en concreto o cambiar la plantilla estará todo agrupado en Contenido del sitio.
Si se desea cambiar la información sobre el sitio o cualquier otra operación de datos sobre el global, se agrupa en Configuración del sitio, puesto que si se desea editar el estilo o diseño, todas esas operaciones irán sobre Apariencia del sitio.
De igual manera que al añadir una página, se recuerda que antes de salir de aquí se deberán guardar los cambios realizados con el botón “Guardar cambios” situado arriba a la derecha del menú lateral.
A continuación reseñamos con imágenes los más destacables, puesto que casi todos son inmediatos su uso o triviales.
2.1. Contenido del sitio
2.1.1. Actividad Reciente del sitio
Últimos movimientos que se han realizado, añadir una página, editarla, darla de baja …
2.1.2. Páginas
Listado de las páginas que tiene el sitio web. Se puede visualizar en forma de árbol o en lista. Si una página se arrastra sobre otra, esta cambiará y ahora dependerá de la página sobre la que se haya arrastrado (subpágina)
2.1.3. Archivos Adjuntos
Listado de los documentos que están disponibles en el sitio web. Desde aquí también se puede subir, mover , cambiar el nombre o eliminar cualquier archivo.
2.1.4. Plantillas de Páginas
Desde aquí se podrán ver las cuatro plantillas de páginas que hay por defecto, así como crear tu propia plantilla para páginas.
2.1.5. Secuencias de Comandos de Apps
Desde aquí se podrá crear un script (en el lenguaje de JavaScript) como secuencia de comandos para alguna acción que se quiera realizar.
2.1.6. Elementos Eliminados
Funciona a modo de “Papelera de reciclaje” donde se puede Recuperar la página o eliminarla de forma permanente.
2.2. Configuración del Sitio
2.2.1. General
Desde aquí se podrá cambiar la información general del sitio:
- Nombre del sitio
- Descripción
- si es contenido para adultos,
- la página de inicio que se mostrará cuando un usuario abra la URL,
- añadir un tag de verificación de Google (empleado para posicionamiento de Webs)
- Cambiar el Idioma del sitio
- Cambiar el tipo de configuración de acceso
- Realizar acciones como:
- Copiar este sitio a otro (todo el contenido que se tiene en este sitio web se copia y se crea otro nombre de sitio y se aloja ahí)
- Publicar en el directorio de Google tu sitio como una plantilla
- Eliminar definitivamente este sitio web y que deje de existir.
2.2.2. Compartir este sitio
Saltará una ventana con la que se podrá añadir nombres o direcciones de correo a las que se enviará tu dirección URL para que la visiten o sepan de su existencia
2.2.3. Obtener ingresos
Se trata de añadir Anuncios “Ad-sense” (publicidad de Google) en tu sitio para poder tener beneficios económicos
2.2.4. Dirección Web
Mostrará la dirección URL de tu sitio web, así como la posibilidad de añadir alguna dirección más.
2.3. Apariencia del Sitio
2.3.1. Presentación del sitio
Desde aquí se podrá modificar:
- el tamaño de la cabecera y su alineación.
Desde estas opciones el ancho del sitio que ocupará es preferible dejarlo como “predeterminado” puesto que sino dependerá del tamaño que se ponga se visualizará más o menos grande según el navegador que use la persona que lo esté visualizando.
La cabecera se puede cambiar el tamaño y su alineación por una determinada.
La barra de navegación horizontal es como una barra de menú lateral, solo que esta se situará sobre el contenido de cada página y ahí se podrá mostrar las páginas que uno desee. Al hacer clic en la opción y aceptar, aparecerá el siguiente menú:
Si se pulsa el enlace se mostrará:
donde se podrán añadir las páginas que se deseen si se pulsa “Añadir página” o “Añadir URL” (página externa a nuestro sitio) y se podrán ordenar como nosotros deseemos.
Asimismo podremos darle el estilo que se quiera, que se muestren con cuadros o como pestañas o como simples enlaces.
- el logotipo que haya (imagen que se muestra en diversas páginas en la parte superior, normalmente suele estar centrada al resto del documento.
- el contenido que haya en la barra lateral además de poder añadir nuevos gadchets al menú lateral.
Si se hace clic sobre el “editar” de “Navegación”
se podrá cambiar:
- el titulo que aparezca
- Tener, o no, organizadas las páginas que se muestren en el menú lateral (si hay subpáginas, …)
- Definir el nivel de niveles que se mostrarán
- Añadir un enlace en el menú lateral al sitemap y/o a la actividad reciente.
2.3.2. Colores y fuentes
Desde esta opción se podrá modificar cada color que se esté empleando para cada elemento, por citar (puesto que es una retahíla muy larga):
- Cambiar la fuente del contenido
- Cambiar el tamaño de la fuente del contenido
- Cambiar el color de texto del contenido
- Cambiar la fuente del titulo del contenido
- Cambiar el color de fondo de la cabecera lateral
- ….
2.3.3. Temas
Desde esta opción se podrá modificar el tema que se ha empleado (tipo de color e imágenes asociadas al fondo), dependiendo del objetivo que se desee usar el sitio web interesará el uso de uno u otro.