Departamento de Tecnología & Informática 10th Nombre: 2012
GOOGLE SITES Unidad 1. Creando el Sitio Google Sites es un Gestor de Contenidos (o CMS por sus siglas en ingles Content Management System) ofrecido gratuitamente por Google para la construcción de sitios en internet de una manera rápida y sencilla. En este documento, veremos los fundamentos básicos para crear un sitio Web con esta herramienta. Lo primero será entrar a la herramienta a través de la dirección http://sites.google.com/ y colocar su dirección de correo Gmail y su Password. Ten en cuenta que si la página abre en ingles, podrás cambiar el idioma a español utilizando el menú desplegable ubicado en la esquina inferior derecha. Si es la primera vez que ingresas en la herramienta, te aparecerá una pantalla como la siguiente donde deberás hacer clic en el botón Crear Una vez hecho esto, deberás seleccionar la plantilla que mejor se adapte al sitio que quieres crear. Google Sites generalmente propone los más usados (los cuales varían con el tiempo). Sin embargo dispones de una galería con una gran cantidad de plantillas prediseñadas para facilitar la construcción de tu sitio. También debes indicar el nombre del sitio y la dirección URL a utilizar. The Mayflower School Tecnology & Information page 2
ventana veremos un mensaje como este: En este punto es importante tener en cuenta dos cosas. En primer lugar un nombre completo puede tener todo tipo de caracteres especiales (espacios, paréntesis, puntos, comas, etc.) pero la dirección URL no; y en segundo lugar, el nombre puede ser cualquiera, pero la dirección URL dependerá de la disponibilidad del nombre. Por ejemplo, El nombre de sitio Aprendiendo Google Sites es totalmente válido, pero la dirección URL aprendiendogooglesites no está permitida sea porque otra persona lo está utilizando o porque Google se la reserva por algún motivo. Podremos saber que una URL no está permitida porque al intentar crear el sitio, ubicado en el centro de la parte superior de la También puedes seleccionar un tema predefinido al ampliar el menú Selección de un tema: Al desplegar el menú Más opciones podrás definir la descripción del sitio (fundamental para ayudar a los buscadores a colocar tu sitio en los primeros lugares de búsqueda cuando busquen sitios de tu tema de trabajo), el nivel de acceso al sitio al compartirlo con cualquier usuario o solo con las personas que especifique y en caso de ser necesario, la opción de indicar que el sitio contiene contenidos solo para adultos. The Mayflower School Tecnology & Information page 3
Finalmente, coloca el código de seguridad que le indica al sistema que eres un humano y no un robot, y haz clic en el botón Crear. Si todos los datos ingresados fueron correctos, podrás ingresar a la página de Inicio de tu Sitio donde podrás poner manos a la obra con tu contenido personal. The Mayflower School Tecnology & Information page 4
Unidad 2. Editando el sitio Una vez creado el sitio, debemos comenzar por la página de inicio. Es importante recordar que esta página será la primera que verán nuestros visitantes, por lo que lo más recomendable es evitar que esté muy recargada a fin de que tarde lo menos posible en cargar y además, que invite a revisar el resto de los contenidos que dispondremos en los menús tal como se verá más adelante. Si dejamos tanto la plantilla como el tema por defecto, al entrar veremos una página como la que se muestra a continuación: Tal como se muestra en la imagen anterior, en la esquina superior derecha hay cuatro botones con los que trabajaremos de manera constante: un lápiz para modificar la página actual, una hoja para agregar una página nueva, un botón de Más para otras acciones y un último botón para Compartir el sitio. The Mayflower School Tecnology & Information page 5
2.1. Modificar páginas La función del botón modificar la página es activar el Editor HTML que nos permitirá modificar el contenido de cualquier página del sitio indistintamente de la plantilla que se esté utilizando. Tal como se puede ver en la imagen anterior, al hacer clic sobre este botón, se activan las barras de menú y de formato, los espacios editables (título de la página y área de contenido) y aparecen en la esquina superior derecha los botones de Guardar y Cancelar. Es sumamente importante hacer clic sobre el botón Guardar para que se guarden los cambios que hemos hecho, de lo contrario, se descartará cualquier cambio realizado. La barra de formato funciona igual que en la mayoría de los editores de texto, y para conocer la función de cada uno de los botones basta con posar el cursor sobre él lo que hará aparecer una pequeña descripción o ToolTip tal como se muestra en la siguiente imagen: The Mayflower School Tecnology & Information page 6
El menú Diseño permite definir la estructura de diagramación del contenido de la página que estemos editando con una gran cantidad de opciones disponibles. El uso de una u otra opción dependerá fundamentalmente del contenido que se quiera agregar a la página. Por lo que es a discreción del diseñador, utilizar un modelo u otro de diseño. El menú Tabla permite agregar o eliminar tablas, así como ajustar las que ya se hayan insertado y/o suprimiendo filas encima o debajo, o columnas a la izquierda o a la derecha de la celda que tengamos seleccionada. El menú Formato permite agregar otras opciones de formato a los textos no disponibles en la barra de formato tales como: Cabeceras a distintos niveles (Cabecera (C2); Subcabecera (C3); Cabecera inferior (C4)), texto tachado, superíndice, subíndice, texto tipo código, bloque de cita (Código blockquote), y la alineación del párrafo (única opción disponible en la barra de formato). The Mayflower School Tecnology & Information page 7
Finalmente el menú Insertar es el más interesante de todos pues permite insertar en la página una serie de objetos de diversa índole tales como: imágenes, enlaces, gráficos, fotos de Picasa, documentos, hojas de datos y presentaciones de Google Docs, videos, Gadgets, etc. A través de estos menús podrás diseñar páginas como todo un profesional y en muy poco tiempo, es solo cuestión de poner a volar tu creatividad. The Mayflower School Tecnology & Information page 8
2.2. Creación de páginas y las plantillas El botón Página nueva permite agregar más páginas sitio. Al hacer clic sobre este botón, lo primero será indicar el nombre de la página, luego la plantilla a utilizar (que analizaremos más adelante), y finalmente la ubicación en el menú del sitio tal y como se muestra a continuación: Con respecto a la ubicación Es importante aclarar lo siguiente: siempre que agreguemos una página, la misma estará por defecto en el Nivel superior, es decir se mostrará en el menú al mismo nivel que la página de inicio. Sin embargo, si queremos crear estructuras de contenido como la que se muestra a continuación donde algunas páginas son sub-contenido de otras: - Estrategias didácticas en la Web - WebQuest - Tareonomía de Dodge - Wikis Se debe abrir primero la página a la que le queremos agregar la página nueva y al momento de crear la página seleccionar la opción Clasificar la página en tal como se muestra en la siguiente imagen: The Mayflower School Tecnology & Information page 9
Con respecto a las plantillas Google Sites ofrece las siguientes 4 plantillas de página a utilizar: Página Donde se pueden colocar cualquier tipo de contenido estático tal y como ya se Web discutió en el apartado anterior. Anuncios Miniblog donde se pueden postear actualizaciones con respecto a algún tema. Un ejemplo puede ser en el caso de utilizar el sitio como un aula virtual, este tipo de página puede servir como una cartelera de anuncios para los profesores. Archivador Página tipo disco duro virtual donde el dueño del sitio puede subir archivos de cualquier tipo (PDF, DOC, XLS, ZIP, MPG, AVI ) que los visitantes pueden descargar. Lista Este tipo de páginas, agregan una funcionalidad interesante a nuestro sitio, y es la posibilidad de incluir datos utilizando diversas columnas que fungirán como filtros de dicho contenido. Los ejemplos más sencillos son lista de notas y actividades de un proyecto. En el primer caso, podríamos tener como columnas: Cedula o ID de la persona, actividad y nota, y en el segundo, responsable, tarea, estatus. Pudiendo el lector en cualquiera de los casos organizar el contenido en cualquiera de las columnas disponibles de acuerdo a su interés Es importante destacar que indistintamente de la plantilla seleccionada, TODAS admiten contenido que puede ser agregado con el editor HTML quedando este por encima del contenido específico de la plantilla. Veamos esto un poco más a fondo: La plantilla de página Web solo permite agregar contenido utilizando el editor HTML. La plantilla de Anuncios funciona como un blog donde vamos posteando noticias, cada cierto tiempo. Dichos post o entradas, son organizadas automáticamente en orden cronológico inverso, es decir, la última entrada agregada va primero, debajo la penúltima, y así sucesivamente. Un dato importante es que aquellos visitantes que utilizan lectores RSS pueden suscribirse a ellas utilizando el vínculo de Suscribirse a las entradas disponible en la página. En esta imagen, se destacó el botón Crear entrada. Será este botón el que permitirá postear nuevas noticias activando un editor como el que se muestra a continuación: The Mayflower School Tecnology & Information page 10
De este editor, es importante destacar varios puntos: La caja de Entrada sin título es donde se debe indicar el título de la nota que deseemos publicar, y debajo está la caja de contenido que puede ser editada de la misma manera que cualquier página Web. La diferencia entre el botón Guardar borrador y el botón Guardar, es que el primero, permite guardar el post y diferir su publicación, mientras que el segundo, guarda y publica los últimos cambios que se hayan agregado a la entrada. Conforme se van agregando posts, los mismos se organizan automáticamente en orden cronológico inverso y se colocan automáticamente como submenú de la página principal de Anuncios tal y como se muestra en la imagen: La plantilla de Archivador permite tener un espacio para gestionar archivos con carpetas incluso. Al crear una página con esta plantilla nos encontraremos con una página como la siguiente: Aquí se resaltan una serie de botones cuyas funciones son: Añadir archivo: permite agregar un archivo sea de un medio local (disco duro, disco portátil, PenDrive, Unidad de CD ) o desde una ubicación web. Mover a: permite mover un archivo determinado a una carpeta ya existente o crearla antes de moverlo. Eliminar: permite borrar un archivo. Suscribirse a los cambios: permite al visitante suscribirse a los cambios hechos a la página, al recibir un correo enviado automáticamente por el sistema cada vez que el autor o algún coautor agrega, mueve o elimina un archivo. The Mayflower School Tecnology & Information page 11
Al crear una página de tipo Lista nos encontraremos con una página como la siguiente: Aquí se muestran algunas subplantillas recomendadas por el editor, pero siempre existe la posibilidad de crear su propia plantilla utilizando la opción de Crear tu propia lista. Al seleccionar esta opción se deberá indicar el nombre de las columnas y los tipos de contenido que tendrán, pudiendo incluso reorganizar su posición (subiéndolas o bajándolas de la lista) o eliminarlas. The Mayflower School Tecnology & Information page 12
Un ejemplo de lista puede ser la que se muestra a continuación donde destacan además de los elementos de la lista, el botón Añadir elemento para agregar un nuevo elemento a la lista, así como el vínculo de Personalizar esta lista para ajustar, agregar o eliminar columnas: Al hacer clic sobre el botón añadir elemento aparecerá una ventana con los distintos campos disponibles para ingresar los datos requeridos como se muestra a continuación: Entre los Gadgets disponibles están los que permiten mostrar en una página las actualizaciones hechas en otra de diverso tipo tales como: Post más reciente del mini blog del sitio, archivo recientemente actualizado del gabinete de archivos del sitio y el último objeto agregado a una lista y cuyo uso dependerá de que tengamos previamente creado una página de este tipo. The Mayflower School Tecnology & Information page 13
Unidad 3. Administrando el sitio En el botón Más ubicado en la esquina superior derecha, hay un conjunto de acciones de página, de plantilla y de sitio que son importantes para la gestión efectiva del sitio. Las opciones más importantes son: 3.1. Acciones de página Historial de revisiones Cada vez que realizamos cambios en alguna página, el sistema guarda una copia de las distintas versiones en orden cronológico inverso, es decir la última versión primero a objeto de poder mirar y de ser necesario revertir el diseño a un estado anterior tal como se muestra en la siguiente imagen de ejemplo: Configuración de la página Dependiendo de la plantilla página con la que se esté trabajando, se podrán ajustar algunas opciones tales como: Mostrar/Ocultar el título de la página [disponible en todas las plantillas]. Permitir/No permitir comentarios [disponible en todas las plantillas]. Mostrar/Ocultar enlaces a subpáginas [no disponible en el MiniBlog]. Si bien la herramienta dispone de la plantilla de Archivador para gestionar archivos dentro del sitio, TODAS las plantillas admiten agregar archivos adjuntos con la salvedad de que no se pueden organizar en carpetas tal y como lo permite la página de tipo archivador. The Mayflower School Tecnology & Information page 14
A continuación se muestra una imagen con todas las opciones disponibles recordando que algunas de ellas no están disponibles en algunas plantillas: The Mayflower School Tecnology & Information page 15
3.2. Acciones de plantilla Guardar como plantilla de página Esta opción permite guardar una página como plantilla para ser utilizada más adelante para crear otras páginas parecidas. Al activar esta opción, se debe primeramente indicar el nombre de la plantilla, una descripción, y si se tiene, un icono de referencia (una imagen de 48x48 pixeles) y la ubicación por defecto (si es de nivel superior, o deberá crearse debajo de otra). Por ejemplo, si queremos que algunas páginas del sitio tengan un diseño de barra a la derecha donde se muestre un Gadget con el timeline de Twitter, entonces creamos la primera página con este diseño y luego se selecciona la opción de Guardar como plantilla de página del menú Más, y se indica el nombre de la plantilla, la descripción tal y como se muestra en la siguiente imagen: Luego se hacen los ajustes finales que quieras agregar o eliminar, y se guarda la plantilla con el botón guardar ubicado en la esquina superior derecha. Cuando quieras crear otra página con esas características se selecciona la plantilla para agregar los contenidos. Cambiar la plantilla de página Esta opción permite cambiar la plantilla de la página con la cual se esté trabajando a otra, ya sea prestablecida o creada por el usuario. Tal como se muestra en la imagen, esta opción nos llevará a una página donde se puede seleccionar la nueva plantilla a utilizar. Es importante destacar el check Aplicar contenido predeterminado de la plantilla que viene desactivado por defecto, al activarlo se resetea la página eliminando toda la información previamente existente. The Mayflower School Tecnology & Information page 16
3.3. Acciones de Sitio La opción de administrar sitio nos llevará a una página desde la cual tenemos acceso a las siguientes opciones del menú lateral: Actividad reciente del sitio: para conocer el historial de actividades del sitio. Páginas del sitio: donde podrás cambiar de posición las páginas actuales del sitio con solo arrastrar y soltar. Archivos adjuntos al sitio: donde podrás, subir, sustituir, mover cambiar nombre y eliminar archivos adjuntos a las páginas del sitio. Plantillas de páginas: donde podrás crear y eliminar plantillas de página, mostrar, ocultar y/o establecer como predeterminada alguna plantilla. Secuencias de comandos de Apps: para aquellos que estén utilizando una cuenta de Google Apps y manejen su lenguaje de programación. Elementos eliminados: donde van a parar las páginas, archivos adjuntos y plantillas que eliminamos ya sea para recuperarlas o para eliminarlas definitivamente. Configuración general: es la primera página que se abre cuando entramos al menú Administrar sitio. Desde esta página podrá controlar los siguientes elementos: Nombre, descripción y check de activar/desactivar el aviso de que el sitio contiene contenido para adultos. Dispondrás de tres botones para: Copiar el sitio lo que te permitirá generar un sitio idéntico pero con una URL diferente con solo un par de clics. Publicar este sitio como plantilla que le permitirá a los usuarios que creen nuevos sitios, utilizar tu creación como base para la construcción de sus propios sitios (especialmente bueno para cuando se crea una plantilla a ser rellenada por los estudiantes de una clase por ejemplo); Eliminar este sitio que le permitirá borrar el sitio creado con todas las páginas y documentos adjuntos que haya agregado. También podrás Habilitar Google Analytics, cambiar el idioma de la herramienta, activar/desactivar el autoajuste para presentación del sitio en dispositivos móviles. Controlar la configuración de acceso que te permitirá indicar quienes pueden ver la actividad del sitio así como los usuarios con acceso al historial de revisiones. Compartir y permisos: permite distribuir el link de nuestro sitio a través de las principales redes sociales, compartir el sitio con otros usuarios para que puedan editar, ver, o ser dueños del sitio. En este apartado es importante recordar que para que las personas a quienes invitemos puedan tener acceso como editores a la herramienta es necesario que tengan una cuenta Google, pues el sistema se los exigirá. The Mayflower School Tecnology & Information page 17
Google añadió recientemente la posibilidad de dar acceso a nuestros invitados solo a algunas páginas en concreto dentro de esta sección. AdSense Permite registrar nuestro sitio en el servicio de Google AdSesnse a fin de que colocar publicidad relevante para nuestro sitio y así poder monetizarlo (ganar dinero con las visitas). Es necesario recordar siempre, que además de registrar el sitio, se requiere colocar los Gadgets de AdSense en las páginas donde se quiera mostrar la publicidad. Web Adress Esta opción nos muestra la dirección Web predeterminada de nuestro sitio, sin embargo, nos permite también indicarle que utilice un dominio personalizado en caso de tenerlo (por ejemplo http://www.misitio.com/) Aunado a esto, y teniendo en cuenta que un aspecto vital del diseño del sitio es su apariencia, Google Sites dispone de un conjunto de opciones con las que se podrán realizar todos los ajustes que se quieran. The Mayflower School Tecnology & Information page 18
3.4 Presentación del Sitio Dependiendo de la plantilla seleccionada al momento de crear el sitio, variará la distribución del sitio: Tal como se puede observar, por defecto los sitios creados con esta herramienta tienen una cabecera, donde va el título del sitio. En esta posición, se puede colocar un logo personalizado haciendo clic sobre el vínculo de Cambiar logotipo y buscar la imagen en una unidad local para subirlo y ver su vista previa tal como se muestra en la siguiente imagen: El diseño por defecto, también tiene una barra lateral con el menú de navegación predeterminado donde van apareciendo cada una de las páginas que vamos creando. Dicho menú puede o no mostrar un título, organizarse automáticamente (en cuyo caso debemos indicar la cantidad de niveles o sub-menús a mostrar), permitirnos que lo reorganicemos manualmente, incluir links al mapa del sitio (sitemap) y/o a la actividad reciente del sitio The Mayflower School Tecnology & Information page 19
Las siguientes imágenes muestran las opciones de configuración en caso de que se decida que el menú se organizará automáticamente (izquierda) o en caso de que se organice manualmente (derecha). Se puede observar en la imagen de la derecha, las flechas en el lateral derecho, sirven para reubicar las páginas disponibles hacia arriba o hacia abajo, y las flechas de izquierda y derecha el nivel del menú (principal o submenú). También se pueden eliminar páginas (con la x), Añadir páginas del sitio previamente creadas y que en algún momento se eliminaron del menú, así como agregar direcciones de páginas Web (URLs) externas En la parte superior de todo el diseño, hay un botón denominado Cambiar diseño del sitio que permite hacer diversas modificaciones sobre la presentación del sitio entre las cuales destacan: Cambiar el ancho del sitio a una cantidad de pixeles específicos o a un porcentaje determinado de la pantalla. Mostrar/Ocultar la cabecera (Header) además de permitir definir su altura (cantidad de pixeles específicos, automática o de acuerdo al tamaño del logo en caso de tenerlo) así como la alineación vertical y horizontal de su contenido. Mostrar/ocultar una barra de navegación horizontal(cuyo contenido debe ser agregado manualmente. Mostrar/ocultar la barra lateral así como definir su ubicación (izquierda o derecha) y su tamaño en pixeles. Mostrar/ocultar un pie de página (distinto del pie de página del sistema) así como definir su altura (automática o en pixeles específicos). The Mayflower School Tecnology & Information page 20
Como se acaba de mencionar, en caso de querer agregar un menú horizontal, luego de activarlo en el conjunto de opciones anteriormente descrito, debe ajustarse manualmente en la página principal del diseño haciendo clic sobre el vínculo de editar contenido de navegación horizontal tal como se muestra a continuación: Tal como se observa, igual que con el menú lateral, se deben Añadir páginas previamente creadas en el sitio o direcciones Web (URLs) Foráneas y utilizar las flechas de dirección (arriba, abajo, izquierda y derecha) para ajustar la posición de los objetos del menú. También se puede definir cómo se mostrarán dichas opciones, pudiendo elegir entre: cuadros, pestañas o links. IMPORTANTE: cuando se utiliza el menú horizontal, para reajustar las opciones de este menú, debe reactivarse en el botón de Cambiar diseño del sitio. The Mayflower School Tecnology & Information page 21
3.5 Temas, colores y fuentes Un aspecto importante en el diseño de un sitio, tiene que ver con los colores y las fuentes que utilizamos, algo así como el maquillaje o la estética del sitio. En este sentido, Google Sites ofrece dos opciones. La primera es un conjunto de temas con combinaciones de colores y fuentes creados por la propia Google, así como temas creados por otros usuarios. Tal como se puede observar en la siguiente imagen, hay una gran colección de temas predefinidos de los cuales escoger. Y solo con hacer clic sobre la lupa ubicada debajo de cada tema o en el botón de vista previa ubicado la parte superior, se abrirá una ventana mostrando un ejemplo de nuestro sitio con la nueva plantilla seleccionada. Al hacer clic sobre el botón Buscar más temas ubicado a la derecha de la página, podremos escoger entre los temas creados por otros usuarios. Estos temas están en constante cambio pues los usuarios de la herramienta, están agregando continuamente nuevos temas. También podrás crear tu propio tema haciendo clic sobre el vínculo de crea tu propio tema personalizado o directamente sobre la opción colores y fuentes del menú izquierdo lo cual te llevará a una página como la que se muestra a continuación donde es importante destacar que tal como se resalta, en esta opción de menú está disponible la opción de Buscar más temas (en la esquina superior derecha) que permite seleccionar temas prediseñados por otros usuarios, así como un listado con los temas básicos creados por Google en un menú desplegable a la izquierda, esto es con la intención de ahorrar tiempo partiendo de un tema ya hecho: The Mayflower School Tecnology & Information page 22
Si los temas existentes no cumplen con sus expectativas, tal y como se observa en la siguiente imagen podrá seleccionar la opción que requiera y realizando los ajustes que el sistema permita al lado derecho del recuadro de opciones: De la imagen anterior es importante resaltar dos aspectos. El primero es el recuadro de opciones susceptibles de cambio o de ajuste en la página (imagen de fondo, color de fondo, fuente de la página ) así como las opciones de cada selección a la derecha de este recuadro. Así mismo, es importante denotar que debajo de este recuadro hay una vista previa de los cambios que se vayan realizando. Finalmente, está el botón Guardar de uso obligatorio para que el sistema guarde los cambios que se realicen sobre la apariencia o Look & Feel del sitio. En esta sección, hay muchas opciones susceptibles de cambio, es importante ir explorando cada una de ellas, pues es la mejor manera de conocer cómo influye sobre el diseño particular de cada sitio cada una de las opciones allí disponibles, recordando siempre que puede utilizar el botón Cancelar para evitar que se guarde cualquier cambio que no se desee, así como el botón de Borrar todas las personalizaciones que elimina cualquier cambio que se haya hecho, devolviendo el look de la página al tema original. The Mayflower School Tecnology & Information page 23