Un par de menús desplegables

Para empezar la semana, vamos a aprender a crear menús desplegables similares al que tengo en la lateral de mi blog con enlaces a las ediciones digitales de cinco periódicos nacionales. En primer lugar vais a crear uno exactamente igual al mío, pero en lugar de agregarlo en un lateral como gadget, lo vais a crear en una entrada. Para ello, copiad el siguiente código en HTML:

<form>
<SELECT NAME="urldestino">
<option selected>Seleccionar
<option value="http://www.heraldo.es/"/>Heraldo de Aragón
<option value="http://www.elpais.com"/>El País
<option value="http://www.elmundo.es/"/>El Mundo
<option value="http://www.lavanguardia.es/"/>La Vanguardia
<option value="http://www.abc.es/"/>ABC
</SELECT>
<input type="button" value="IR" onClick="location=this.form.urldestino.value" name="button">
</form>

Id a creación de entradas, cread una nueva y pegad el código copiado en "HTML" y no en "Redactar":

Guardad y comprobad si funcionan los cinco enlaces a los periódicos. De esta forma podéis informaros de lo que sucede por el mundo y comprobar que, aunque no sea tan interesante, también hay vida más allá de vuestros hermosos pueblos.

A continuación, vais a crear otro menú desplegable con al menos cuatro enlaces a páginas webs que sean de vuestro interés. Para conseguirlo, utilizad el mismo código pero sustituyendo las direcciones de los periódicos (lo que está entre comillas) por las direcciones de las páginas que queráis enlazar. Así mismo, debéis sustituir los nombres de los periódicos que hay al final de cada línea por los nombres de las nuevas páginas enlazadas. Podéis insertarlo en una nueva entrada o como gadget en un lateral.

Eso es todo por hoy. El próximo día, más.

Directos a la wikipedia

En primer lugar, deciros que sólo algunos me habéis enviado un mensaje con la dirección de vuestro blog. Ya sé que podría enlazar al resto a partir de cualquiera de esos blogs, pero quiero que todos os toméis la molestia de enviarme el correo. Os recuerdo que mi dirección es juancarloszaurin@gmail.com.

Bueno, hoy vamos a aprender (si es que no lo sabéis hacer ya) a crear un enlace a una página web desde una imagen. A modo de ejemplo, vamos a enlazar la wikipedia. En primer lugar, buscad en internet la imagen que os servirá de enlace al ser pulsada, a ser posible alguna que guarde relación con la wikipedia, como su logotipo. Podéis guardarla en la parte de datos del disco duro (y fijaos bien dónde la guardáis para encontrarla cuando la necesitéis), o bien podéis copiar la URL de la imagen. Para ello, colocad encima el puntero del ratón, pulsad el botón secundario y en la ventana que se abre seleccionad "Copiar URL de imagen":

Una vez localizada la imagen, entrad como siempre en "diseño", y pulsad "añadir un gadget" en la parte lateral. En la ventana que se abre, seleccionad "imagen":

Se os abrirá otra ventana en la que podéis añadir un título y un pie de foto a la imagen (no es imprescindible), el enlace (en nuestro caso la dirección de la wikipedia) y la imagen. Si la habéis guardado en el disco duro, seleccionad "Desde tu equipo":

Y si habéis copiado la URL, seleccionad "Desde la web" y pegad dicha URL en el cuadro correspondiente:

Guardad y comprobad que funciona el enlace.

A continuación, cread otro enlace a la página que queráis a partir de otra imagen. Podéis añadir el gadget en cualquier zona de vuestro blog.

Vamos a llevar la cuenta de las visitas recibidas

Antes de pasar a esta actividad, aseguraos de que habéis acabado las del primer día:

- Escribir una entrada de bienvenida.

- Crear un enlace a mi blog.

- Crear enlaces a todos los blogs de vuestros compañeros de clase.

- Enviarme un mensaje con la dirección de vuestro blog para que pueda enlazaros.

Probablemente sepáis que las páginas web se elaboran en un lenguaje llamado HTML. Durante este curso no vamos a aprender a programar en este lenguaje. Pero vamos a aprovecharnos de que otros sí saben hacerlo, ya que existe la posibilidad de añadir gadgets a partir del código HTML. Vamos a aprender a hacerlo agregando un contador similar al que he insertado yo en mi blog.

Id a esta dirección: http://www.contadorgratis.es/. Debería apareceros la siguiente página:

Debéis crear una cuenta con vuestro nombre de usuario, la dirección de vuestro correo y una contraseña, y además debéis indicar la dirección de vuestro blog. Así mismo, podéis elegir el modelo de contador que más os guste entre los disponibles. Cuando hayáis introducido los datos, pulsad el botón "crear cuenta", y se abrirá una ventana con el texto del código HTML de vuestro contador. Copiadlo y volved a vuestro blog.

Pinchad en el enlace "diseño", y luego en "añadir un gadget". En la ventana que se abre, elegid la opción HTML/Javascript:

Se os abre otra ventana. Pegad el código copiado en el cuadro de contenido:

Guardad y comprobad que realmente se ha insertado el contador.

No sé ni en qué día vivo

Vais a añadir un calendario en el lateral de vuestros blogs.

La forma más sencilla de conseguirlo consiste en ir a la sección de diseño y, en añadir un gadget, elegir en el menú de la izquierda el enlace "Más gadgets". Añadid la segunda opción que aparece, llamada "Daily Calendar", guardad y comprobad que os ha salido el calendario.

Como es muy feo, podéis entrar en otra página, free-blog-content.com, donde hay una mayor variedad de calendarios disponibles (de coches, animados, con reloj que va 12 horas retrasado, con animales, con motivos de la naturaleza, sencillos, ¡¡de CHICAS!!). Curiosead un poco y cuando hayáis elegido uno, copiad el código que hay debajo del calendario, id a la sección de diseño de vuestro blog, añadid un gadget del tipo HTML/Javascript, pegad el código, guardad y comprobad si os sale el calendario.

Bienvenidos al blog del profesor

Este va a ser el blog que voy a llevar durante el curso, paralelo a los vuestros, desde el que os iré indicando algunas de las actividades que tendréis que realizar. 

En este primer día, primero vais a crear vuestro propio blog, y después vais a enlazarlo con el mío y con los  de vuestros compañeros de clase.

Vamos allá.

Vamos a crear nuestro propio blog

Existen numerosos servidores en la red que permiten crear blogs de forma gratuita. Nosotros vamos a utilizar el de Google, que se llama Blogger, con el que me temo que ya estáis todos familiarizados. Entrad en la página de blogger, https://www.blogger.com/, y seguid los pasos indicados.


Una vez que lo hayáis creado, escribid en vuestra primera entrada un mensaje de bienvenida similar al que he escrito yo. Si os encontráis en la página principal del blog, pulsad en el enlace "diseño" que aparece en el vértice superior derecho:

En la pantalla siguiente, pulsad el icono del lapicero que se encuentra en la parte superior a la izquierda, y ya podéis escribir vuestra primera entrada:

Una vez que tengáis entradas creadas, si en la columna de la izquierda pulsáis el enlace "entradas", podréis modificar las existentes:

Si tenéis alguna duda sobre cómo crear entradas o directamente no os acordáis, preguntadme.

Vamos a enlazarnos

A partir de hoy, será habitual que al comienzo de la clase tengáis que entrar en mi blog para leer las instrucciones necesarias para realizar las actividades que os haya preparado. Podríais hacerlo tecleando la dirección de mi blog; pero, para hacerlo más sencillo, vais a crear en vuestro blog un enlace con el mío.

Para ello, pulsad en el enlace "diseño" que aparece en el vértice superior derecho de vuestro blog:

Se os abre la pantalla desde la que podéis hacer las modificaciones. En este caso, pulsad en otro enlace llamado también "diseño"  situado en la columna de la izquierda:

Se os abre una pantalla desde la que podéis añadir elementos  a vuestro blog. En este caso, vamos a crear el enlace a mi blog en la parte derecha. Pulsad el enlace "añadir un gadget" que hay en esa parte:

Se os abrirá una ventana nueva en la que tenéis que elegir la opción "Lista de enlaces":

Os aparecerá otra ventana, en la que debéis introducir la dirección de la página web que queréis enlazar, en este caso la de mi blog: "infozaurin.blogspot.com.es". También podéis poner un título a dicho enlace, por ejemplo: "blog del profesor".

Después, enviadme un correo a mi dirección juancarloszaurin@gmail.com (o introducid un comentario a esta entrada) con la dirección de vuestro blog para que pueda enlazarlo con el mío. Así podré ir leyéndolos y evaluándolos.

Finalmente, repetid el proceso para crear una lista nueva con los enlaces a los blogs de vuestros compañeros de clase. Preguntadles sus direcciones.

Y esto es todo por hoy.