Práctica sobre servicios de Google utilizando tu cuenta de Gmail

Crea una carpeta en Mis documentos con el nombre captura para guardar todas las capturas de imágenes que realices. Comenzamos esta práctica con el objetivo de
que seas autosuficiente en la resolución de las diferentes cuestiones informáticas planteadas, por lo que te recomiendo leer atentamente las cuestiones e indagar e
investigar la solución correcta, vamos a incentivar la investigación individual y la motivación en encontrar soluciones utilizando y probando diferentes vías. Por tanto el
éxito en la resolución de la práctica va a estar relacionado inversamente a la ayuda que necesites para resolverla. En todas las capturas debe aparecer tu correo. Se
valorará la rapidez en la resolución de las diferentes prácticas.
1. Barra de Google: (hay que tener instalada la barra de Google en Internet Explorer)
a. En añadir botones a la barra de Google añade, el botón de Gmail en Internet Explorer.
b. En Marcadores crea una etiqueta de nombre “Seguridad” e introduce las siguientes 5 direccio-
nes, que debes buscar en Internet:
1. OSI, herramientas gratuitas
2. Grupo de delitos telemáticos
3. Hispasec: Seguridad Informática
4. Seguridad en la red
5. Un informático en el lado del mal
El resultado final debe parecerse a:

Captura la pantalla con el programa Snagit y guárdala con el nombre “barra.png”

c. Entra en la página de fútbol del periódico “The Mirror”, pincha en la primera noticia y traduce la
página al español, con la opción de la barra de Google, traducir esta página al español. Una vez
traducida, captúrala con el programa Snagit con la opción “Scrolling windows” y la guardas con
el nombre “TheSun.png”, salvando el contenido de la noticia el resultado debe ser algo así:
2. Calendar: Agenda y calendario asociado a tu cuenta de Google
Entra en Calendar y realiza las siguientes anotaciones:

Como siempre, captura esa imagen y la guardas con el nombre “Calendar.png”.

3. Maps: Aplicación para localizar mapas y direcciones

a. Localiza la calle Jimena de Granada, una vez encontrada captura la pantalla y la guardas con el
nombre “Jimena.png”, la imagen debe ser como ésta:

b. Con la utilidad Street view de Maps captura esta imagen de esa calle y guárdala con el nombre
“casa.png”.
c. Utiliza en Google Maps la herramienta de medición de distancias, ¿dónde se encontrará?, para
medir la distancia entre el punto de identificación de la C/ Jimena y La Catedral, como ves la
distancia es de 3.52 Km.
d. Comprueba que la distancia de la Catedral al Ies Alba Longa es de 4.35 Km:

Guarda ambas imágenes con los nombres distancia-1.png y distancia-2.png. Recuerda que en todas
las fotos debe salir tu correo electrónico.
e. Por último vas a capturar dentro de la aplicación Maps, esta imagen del Ies Alba Longa que la
vas a guardar con el nombre “albalonga.png”.

f. Comprueba que el campo la Base Aérea de Armilla tiene una longitud de 8.71Km. Guarda la
imagen con el nombre base.png

Una vez llegados a este punto vas a rebajar el peso de las 9 imágenes guardadas hasta ahora con la
aplicación GIMP, que ya tienes instalada en tu equipo. Solo tienes que abrir Gimp, abrir cada una de
las imágenes y guardarlas con el mismo nombre pero con formato jpg, con una reducción de calidad
de 25%.
Ahora debes seleccionar las 9 imágenes y con el botón derecho del ratón pulsa en la opción “Añadir
al archivo” y las comprimes con WINRAR en formato zip con el nombre captura-1-tunombre.zip.
Este fichero lo subes a la carpeta con tu nombre.
4. Blogger: creación de blog y páginas web.
En la 1ª parte vamos a usar el navegador Firefox, accede con tu nombre de usuario y contraseña a la cuenta
de Google, pulsa en Aplicaciones---Más y selecciona Blogger. Pulsa en Nuevo blog porque vas a crear un
blog en Internet que es como una página web propia, donde vas a ir almacenando información que vas a ir
enviando en forma de noticias que pueden ir acompañadas de imágenes, video, sonido etc. Tienes que pen-
sar en un tema que te interese para que la página vaya recogiendo toda la información referente a ese tema
elegido, puede ser una página personal, con reflexiones personales, o de deporte, música, juegos, amigos,
etc. Una vez que terminemos los ejercicios con este recurso, la página se queda para uso personal vuestro,
aunque la utilizaremos para algunos ejercicios más adelante.
a. El asistente que te indica como configurar el blog es muy simple, Título: tienes que pensar en un
título del blog que aparecerá con letras grandes al inicio de la página y debe tener relación con el
contenido informativo de tu blog, debes elegir el que tú prefieras. Después tienes que poner la
Dirección: dirección de la página web que contiene el blog, con esta dirección cualquiera puede
acceder a los contenidos de tu página desde cualquier lugar en Internet. Para que sea más fácil
debes poner el mismo nombre que tienes de usuario, antes de la @ en la dirección de correo de
Gmail, si te aparece, el signo de correcto a la derecha de la dirección, es que esa dirección está
disponible.
b. Ahora te aparecen una serie de plantillas para tu blog, puedes elegir alguna de las que se te
muestran, aunque después puedes cambiarla y personalizarla y pulsa en Crear blog.
c. En este momento se ha creado ya tu blog, puedes pulsar en Empezar a publicar y una vez que se
abra una entrada, la cierras, para ver antes como funcionan los elementos que contiene el blog:
Visión general, Entradas, Páginas, Comentarios, Google+, Estadísticas, Ingresos, Campañas, Di-
seño, Plantilla y Configuración.
Realiza un recorrido por cada uno de ellos y familiarízate con su contenido.
d. En Diseño el “diseñador de plantillas” de Blogger te permite hacerte una idea de cómo es la
plantilla que has elegido en tu blog.
e. En “Plantilla” tienes la visión de cómo queda el blog ahora y en el móvil, después tienes planti-
llas del tipo “Sencillo”, “Vistas dinámicas”, “Picture Window”, Fantástico, S.A.”, “Filigrana”,
“Etéreo”, “Viajes” y al final aparece “Volver a las plantillas clásicas”. Por último en Personali-
zar, puedes modificar el la Plantilla, el Fondo, Ajustar el ancho, el Diseño y en Avanzado, cam-
biar muchos elementos de configuración de la página, en algunos de los cuales se requiere cono-
cimiento del lenguaje Html.
No hay que olvidarse de cuando se modifique algún elemento, guardar la configuración para que
los cambios sean tenidos en cuenta.
f. En este punto hay que explicar las dos configuraciones de plantilla existentes en Blogger:
1. La plantilla que acabas de crear que sería el modelo actual, donde la forma de interactuar
en la plantilla viene definida a través de gadgets o elementos predefinidos que se integran
en el blog, con muy poca intervención por parte del usuario y donde apenas se puede
modificar el código HTML de la plantilla.
2. La plantilla clásica, que proviene de la primera etapa de Blogger, donde se puede incor-
porar código HTML y el usuario tiene un mayor protagonismo. Se puede pasar de una a
otra, pero las modificaciones de código HTML realizadas en la plantilla clásica se pier-
den al reconvertirla en la plantilla más actual.
g. En una primera parte, vamos a empezar a trabajar con la plantilla clásica, para realizar algunos
ejercicios en los que vamos a incluir código HTML para modificar el modelo de plantilla exis-
tente: en “Plantilla”, bajamos hasta el final de la página y pulsamos en “Volver a las plantillas
clásicas” si pulsamos en Volver a las plantillas clásicas, entramos en este tipo de plantilla. Va-
mos a jugar un poco con el código Html y recuerda que vamos a utilizar Firefox. Para ver si es-
tás en la opción correcta, te tiene que aparecer en la mitad inferior de la pantalla, el títuloen rojo
“Editar código HTML de la plantilla.

a. Descripción de la plantilla clásica de Blogger

a. En el menú Configuración, vamos a ir repasando todas las pestañas:
 1. “Lo básico”, donde puedes cambiar el título del blog si no te gusta el que has puesto,
puedes poner una descripción de su contenido, el resto de los elementos déjalos como es-
tán, al salir pulsa en Guardar configuración.
2. “Publicación”, aquí puedes ver la dirección que tiene tu página, una vez comprobada,
envía un correo a infor@albalonga.es, con asunto “blog de (tu curso y grupo) y en el
contenido, tu nombre curso y grupo y la dirección del blog como un hipervínculo.
3. “Permisos”, te indica quién es el administrador o propietario del blog.
4. “Entradas y comentarios” donde aparecen diversas posibilidades de configurar las Entra-
das y Comentarios, estos últimos serían las opiniones que le merecen a los lectores las
entradas de tu blog.
5. “Móvil y correo electrónico”, aquí tienes la opción de poder publicar entradas mediante
SMS de Móviles o a través del Correo electrónico, mediante el correo que aparece en ese
apartado, al que le tendrás que añadir el texto que va delante de la @. Fíjate bien porque
una vez que definas una palabra en la dirección para la creación de entradas por correo
electrónico, (que tiene que tener al menos 4 caracteres), y que tienes que definir tú, apun-
ta la dirección de correo que termina en @blogger.com, porque a través de esa dirección
podrás publicar entradas en tu blog desde el correo electrónico enviando la entrada a esa
dirección, y será un ejercicio que habrá que realizar más adelante.
6. “Idioma y formato” modifica la Zona horario, y configura la de España.
7. “Preferencias para motores de búsqueda” se pueden quedar como están por defecto.
8. Por último en “Otros” observa las 5 opciones que aparecen, aunque de momento no hay
que modificar nada.
b. Entradas:
1. “Entrada nueva” es donde se crea la información que vas a subir a tu blog, tienes un edi-
tor para formatear el texto y además puedes insertar hipervínculos, imágenes, vídeos, etc.
una vez acabado el texto puedes pulsar en “Vista previa” para ver como va a quedar todo
y si es correcto y pulsas en “Publicar”, la información pasa al blog.
2. “Editar entrada”, aquí puedes modificar una entrada que esté publicada, borrarla y visua-
lizarla.
c. Plantilla:
1. “Editar código HTML de la plantilla, te permite añadir elementos que inicialmente no fi-
guran en la plantilla, y que va a ser objeto de algunos ejercicios, como es lógico, todo lo
que se escriba en esa parte tiene que ser código HTML.
2. No hay que pulsar en “Actualizar la plantilla” porque se perderían todas las modifica-
ciones realizadas en el código HTML de la plantilla y vamos a realizar antes una serie de
ejercicios, si pulsamos en Actualizar la plantilla, pasamos al modelo de plantilla más
moderno y se perderían todos los código HTML de los elementos que vamos a añadir.
d. Para acabar, no empieces a realizar esta práctica que se encuentra en este enlace, hasta que no
te hayas familiarizado con todos los elementos del blog. Todo lo que aparece en el enlace ante-
rior, se muestra a continuación, aunque en algunos pasos tendrás que realizar una adaptación a
las presentaciones de algunas aplicaciones en este momento, esto es parte de la investigación
que debes realizar, para poder concluir la práctica.
 b. Ejercicios a realizar con la plantilla clásica de Blogger
1. Barra de búsqueda de Google: pulsamos en la pestaña Plantilla y en edición HTML y nos apa-
rece el código de nuestra plantilla, tienes que conseguir que aparezca la barra de búsqueda de
Google, encima del título de tu blog, para lo cual debes insertar el siguiente código HTML entre
la etiqueta <head> y <title> en edición Html:

<center> <!-- esta etiqueta sirve para centrar la barra de búsqueda de Google -->
<br> <!-- esta etiqueta corresponde a un salto de línea -->
<br>
<!-- Búsqueda Google -->
<form method="get" action="http://www.google.com/custom"> <!-- esta etiqueta crea un formulario -->
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0"> <!-- esta etiqueta crea una tabla -->
<tr> <!-- esta etiqueta crea la fila de la tabla -->
<td> <!-- esta etiqueta crea una celda de la tabla -->
<a href="http://www.google.com/custom/"> <!-- esta etiqueta crea un hipervínculo y la siguiente img carga una imagen -->
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle">
</a>
</td>
<td>
<input type="text" name="q" size="25" maxlength="255" value=""> <!-- define un objeto de ingreso en el formulario -- >
</td>
<td>
<input type="submit" name="btnG" value="Buscar en Google">
</td>
</tr>
</table>
</form>
<!--Búsqueda Google-->
</center>

En HTML casi todas las etiquetas abren con < etiqueta > y cierran con </etiqueta>, por ejemplo
<table> inicia la creación de una tabla y </table> la finaliza.
Al final el resultado tiene que ser como la imagen de abajo que puedes observar pulsando en Vista
Previa y que tienes que guardar con el nombre barra-1.png.

Pero para que puedas conseguir el resultado de la barra de búsqueda de Google, antes tienes que en-
viar una primera entrada que va a tener como título tu nombre y como contenido tu dirección de co-
rreo. Solo tienes que pulsar en Creación de entradas --- nueva entrada --- poner el título --- el conte-
nido--- y publicar entrada, si quieres ver el resultado, pulsa en “Ver blog”.
Intenta observar tu blog desde el navegador Internet Explorer y verás que la presentación no es
exactamente igual, esto se debe a que por desgracia no todos los navegadores interpretan el código
Html con los mismos estándares.

2. Generar un icono de tu dirección de Gmail y situarlo en la barra de Google, encima del título
del blog:
a. Primero vas a generar el icono de tu dirección de correo de Gmail, el resultado tiene que
ser parecido al siguiente icono solo que con tu nombre de usuario. No
solo obtenemos la imagen en formato png sino que además esta página nos proporciona
un enlace URL donde se guarda este icono en Internet:
http://services.nexodyne.com/email/icon/Ycnudflshg%3D%3D/Foj%2BgyY%3D/R01haWw%3D/0/image.png
b. Ahora tienes que introducir el icono de tu dirección de correo de Gmail, en la barra de
búsqueda de Google, tienes que tener en cuenta cual es la etiqueta HTML que carga una
imagen (ver el código de la barra de Google anterior) y tienes que introducir la etiqueta
 con la dirección de tu icono en Internet en el código html de la barra de Google, esta en-
trada te puede servir de ayuda. El resultado final debe ser el siguiente:

Esta imagen debes guardarla con el nombre icono-2.png

3. Hipervínculos: inserta las 5 direcciones de Internet que más utilices, con sus hipervínculos co-
rrespondiente en la misma entrada, de manera que aparezcan los nombres de los sitios y no sus
direcciones, algo parecido a esta entrada, pero con tus direcciones preferidas.

4. Imagen con hipervínculo:

a. Primero tienes que subir la imagen en una entrada y una vez que la has subido tienes que
incluir en el código HTML de la imagen, la dirección a la que quieras que se dirija la
imagen al pulsar encima de ella, puedes ver este ejemplo de lo que tienes que conseguir.
Es decir tienes que subir la imagen del Ies Alba Longa a tu blog y después en “Edición
de HTML”, ver cual es la etiqueta que define un hipervínculo (ver el código de la barra
de Google) y sustituir el que tiene la imagen por el de la dirección de la página del insti-
tuto.

5. Feed del sitio: un canal web es un medio para suministrar información actualizada y frecuente a
los suscriptores de la página web, es decir a través de este canal, los internautas se pueden sus-
cribir a una página web para estar informados de sus novedades. Se utiliza mucho en los blogs y
en prensa electrónica. Vamos a ver los pasos que hay que dar para conseguir instalar este botón
que va a permitir a cualquiera que lea tu blog, suscribirse a sus contenidos:

a. En la pestaña “Configuración” de tu blog hay un elemento que se llama “Feed del sitio”,
cuando tengas la dirección que te proporciona el servicio “FeedBurner”, tendrás que es-
cribirla en la sección “Publicar URL redireccionada del feed” .
b. Vas a entrar en FeedBurner que es quien te va a proporcionar el servicio de suscripción a
tu blog. Se entra con los datos de tu cuenta de Google y, como en todos los servicios, te
van a solicitar la información necesaria para que te registres. Puedes ayudarte de la tra-
ducción de palabras de la barra de Google, aunque no es aconsejable realizar la traduc-
ción completa de la página al español.
1. Te dan la bienvenida y te piden que introduzcas la dirección de tu blog, pulsa en
siguiente (Next in english).
2. En la identificación de la fuente hay 2 opciones aunque las 2 nos llevan al mismo
destino. Vas a marcar la opción RSS y pulsa en siguiente.
3. Aparece ahora el título y la dirección del Feed, pulsa en siguiente.
4. Ahora te felicitan por haber terminado el proceso y te dan la dirección del feed de
tu sitio que tendrás que poner en la pestaña “Publicar URL redireccionada del
feed” del apartado a. Pulsa en siguiente 2 veces puesto que la siguiente pantalla
habla sobre estadísticas del servicio.
5. Al final aparece una pantalla donde te dicen que has logrado realizar el feed de tu
blog y aparecen 5 pestañas: analyze, optimize, publicize, monetize y troubleshoo-
tize, que vienen a ser, estadísticas, optimizarlo en audiencia, darle publicidad, ha-
cer negocio con el blog y aclaración de dudas.
6. En la pestaña Publicize, en hacer más fácil la suscripción, (make it easy to subs-
cribe), pulsa en friendly graphic , para localizar un icono a partir del cuál se reali-
ce la suscripción.
 7. Elige el que está marcado por defecto y fíjate en el código HTML al final de la
página, necesario para que salga ese botón en tu blog. Debes copiar ese botón y
pegarlo en el código HTML de la plantilla de tu blog en el sitio indicado para que
salga como éste. Tendrá que ir por lo tanto debajo del código de la barra de Goo-
gle y debe aparecer también la palabra “Suscríbete”. Para comprobar que todo es
correcto, al pulsar en el botón, deben aparecer los contenidos de tu blog.
8. A partir de este momento cualquiera que entre en tu página y pulse en ese botón
quedará suscrito a las entradas de tu blog.

6. Contador de páginas con SiteMeter: No hay un blog que se precie que no tenga un contador
para saber el número de internautas que lo visitan. Vamos a utilizar la aplicación SiteMeter para
este fin, aquí puedes encontrar indicaciones de cómo hacerlo. El resultado final debe aparecerse
al contador que aparece en esta página.

a. Elegimos Site Meter Basic Free, pulsa en Sign Up, introduce la dirección del blog y su
nombre, escribe el código, comprueba si la hora es correcta, acepta las condiciones y
pulsa siguiente.
b. Introduce la dirección de tu correo y los demás datos, al final te salen los datos introdu-
cidos, pulsa en siguiente y ya has acabado.
c. Aparece un menú con 3 elementos, estadísticas, administración y salir de la cuenta. Entra
en Administración, elige el tipo de icono para indicar el número de visitantes en “meter
style”, donde debes elegir uno en el que aparezcan valores numéricos, una vez elegido lo
guardas y en la opción código Html, copias el segundo código HTML que aparece en la
página. Este código debes pegarlo en el sitio adecuado de tu blog para que aparezca co-
mo aquí, justo al lado del icono del feed del sitio.
d. Ya has logrado tu objetivo que es tener un contador de páginas visitadas encima del títu-
lo de tu blog. Ahora viene un reto para investigadores que es el siguiente, si observas
en esta figura el número de visitas está ligeramente por encima y muy pegado a
la palabra “Suscríbete”, pues bien tienes que conseguir que el número baje un poco hacia
abajo y que quede de esta forma es decir perfectamente alineado y algo
más separado de “Suscríbete” y donde se ha añadido la palabra Visitas. Este último deta-
lle no es obligatorio pero si lo logras, tendrás un punto más en la nota final de esta eva-
luación.

7. Vídeo en Blogger. Blogger admite 2 formas de enlazar vídeos, una es subiendo directamente un
vídeo desde tu ordenador como una nueva entrada, y la otra es enlazar un vídeo existente desde
Youtube.

a. En tu caso vas a utilizar un vídeo que previamente he subido a YouTube y lo vas a enla-
zar en tu blog para obtener un resultado parecido a éste. El vídeo lo puedes encontrar en
YouTube con el nombre cuco-albalonga.

8. Google Maps en el Ies Alba Longa. Tienes que ser capaz de crear una entrada tal como la que
aparece aquí donde como puedes comprobar se puede visualizar nuestro Centro desde cualquier
ángulo y desplazarte por su entorno.

a. Como siempre tienes que utilizar en la entrada del blog el código HTML que te propor-
ciona la aplicación Google Maps, una vez localizado el Instituto.

9. Crea una entrada en tu blog desde Outlook Express. Aparte de crear entradas en tu blog des-
de un navegador de Internet, también se pueden crear dentro de “Configuración” utilizando el
elemento Correo electrónico y móvil utilizando la dirección de correo que aparece en “Dirección
para la creación de entradas por correo electrónico” donde el asunto del correo aparece como tí-
tulo de la entrada y el contenido del correo como contenido de la entrada del blog.
 a. Vas a crear una entrada cuyo título va a ser Resolución del puzzle desde Outlook Ex-
press, y el contenido, va a ser tu nombre y la solución que bajo tu punto de vista tiene es-
ta cuestión, es decir algo parecido a ésto. El primero que lo resuelva tiene ½ punto más
en la nota final de la evaluación.

10. Traductor de Microsoft. Uno de los elementos más interesantes para tu blog, es que se pueda
traducir a otro idioma en tiempo real, esto te lo permite la aplicación Microsoft Translator. Ima-
gina la comodidad que le vas a proporcionar a los internautas de los distintos países que van a
visitar tu blog, cuando solo pulsando un botón, pueden tener traducido a su idioma el contenido
de tu página web.

a. Para utilizar este recurso basta con que entres en la página de Microsoft Translator, pul-
ses en “widget de la página web”, indiques la dirección de tu blog, eligas el color, acep-
tes las condiciones de uso y pulses en generar el código HTML. Como siempre tendrás
que copiar ese código en tu plantilla para que obtengas un resultado parecido a éste.
b. No te preocupes por la posición del widget, lo importante es que aparezca debajo de la
barra de búsqueda de Google. Si además eres capaz de situar el widget en la parte supe-
rior derecha como en la página anterior, serás acreedor a 1 punto más en la nota final de
la evaluación.

11. Texto con voz sintetizada. Hay veces en que el texto escrito se lee pero no se entiende, esa es
una de las principales razones de que los alumnos no puedan realizar una tarea con éxito. En
esos casos puede venir bien que una voz sintetizada lea el texto por nosotros.
a. Este servicio lo presta vozMe, basta con que entres en la página, pulses en “webmasters”
y elijas el código HTML correspondiente para pegarlo en una entrada de tu blog. El texto
a incluir para que se lea de manera automática lo puedes elegir libremente.

Una vez hayas concluido la práctica que es individual, me envías un correo a infor@albalonga.es,
donde aparezca en el asunto nº-práctica de Google (donde nº se sustituye por el número de tu mesa) y
en el cuerpo del mensaje, debes poner la dirección de tu blog como hipervínculo, para que podamos
comprobar el resultado final.