Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso "Introducción al desarrollo web", te voy a explicar cómo puedes crear una página web con Blogger, un sistema de gestión de contenidos cuyo propósito principal es crear blogs.

En el vídeo anterior te expliqué algunas cosas avanzadas sobre la edición de una entrada en Blogger. En este vídeo te voy a explicar cómo puedes cambiar el diseño visual de tu blog. Si recuerdas, cuando creaste tu blog, una de las cosas que tuviste que hacer fue elegir la plantilla, el aspecto visual de tu blog. Blogger ya te avisaba, "Puedes ver muchas más plantillas y personalizar tu blog más tarde". ¿Te has arrepentido, ya no te gusta tu plantilla? No te preocupes, el diseño visual de tu blog lo puedes cambiar en cualquier momento, no es como el matrimonio que es para toda la vida, o eso dicen algunos.

Además, te voy a explicar cómo puedes añadir gadgets, también llamados a veces widgets, a tu blog. En español un gadget se puede llamar complemento o componente, y es un pequeño fragmento de código que realiza una función muy concreta, como por ejemplo mostrar los datos personales del autor del blog o mostrar el archivo del blog. En el blog de prueba queda mucho espacio disponible, así que voy a añadir algún gadget para, por ejemplo, mostrar las etiquetas que utilizo en el blog y así poder navegar por las entradas a través de las etiquetas.

En primer lugar voy a cambiar la plantilla, el diseño visual de mi blog. Para ello, desde la página en la que se muestra la visión general de mi blog accedo a la opción de plantilla. Aquí me aparece una miniatura con la presentación actual de mi blog, con la plantilla que estoy utilizando. Y me aparece toda esta galería de plantillas en las que puedo elegir pues otra. Por ejemplo, voy a elegir esta rosa. Yo pulso sobre ella y me aparece una previsualización, cómo se vería mi blog con esta plantilla. Que no me gusta, pues no pasa nada, cierro y busco otra plantilla.

Puedo aplicar la plantilla tal cual, o si le doy al botón este de "Personalizar" entro a una herramienta en la que pudo cambiar muchas de las opciones, muchas de las características del diseño visual de mi blog. Si por ejemplo vengo aquí a fondo, podría cambiar el color de fondo. Si me vengo aquí a ajustar ancho, podría cambiar el ancho. Por ejemplo, puedo hacer que la página sea más estrecha o que sea más ancha. Y puedo ir cambiando pues muchas más cosas de mi blog, por ejemplo el diseño, si quiero a dos columnas, a tres columnas, si quiero solamente a una columna, etc. Y en avanzado pues puedo cambiar por ejemplo el tipo de letra. Por ejemplo, quiero cambiar el tipo de letra del título. Pues yo me vendría aquí, buscaría "Título del blog" seleccionado y pudo cambiarle por ejemplo el tamaño, ponerle un tamaño más grande, ponerle un tamaño más pequeño, lo cual sería una tontería al título del blog. Le puedo cambiar el tipo de letra, le puedo cambiar el color. Evidentemente, como puede ir cambiándolo todo al final puedo estropearlo, puedo acabar con un diseño bastante malo. Bueno, imaginemos que me gusta así. Pues simplemente le doy ahora al botón "Aplicar al blog", y ya está.

Ahora lo que voy a hacer es cambiar el diseño. Para eso me voy a esta otra opción, "Diseño". Aquí en "Diseño" aparece una visualización esquemática de cuál es la estructura de mi blog. En esta visualización esquemáticas pues podemos ver que tenemos una zona con el título, tenemos la zona de contenido de las entradas y a la derecha una columna. Es justo lo que tenemos aquí: el título, la zona de contenido con las entradas y a la derecha una columna. Yo en cada una de estas áreas puedo añadir un gadget, puedo añadir un elemento que aumenta las funciones de mi blog.

Por ejemplo aquí, en la columna de la derecha voy a añadir un gadget para mostrar las etiquetas. Mis entradas tienen etiquetas, pero ahora mismo es un poco complicado navegar por las entradas a través de las etiquetas. Voy a añadir un gadget, y aquí me aparece la galería de gadgets. Hay muchos gadgets, aquí tenemos lo básico y tenemos muchos más gadgets, como vemos aquí pues casi 900 gadgets. El que yo busco está en el apartado "Lo básico" y se llama "Etiquetas". Me desplazo, hasta que lo encuentre, aquí lo tenemos, "Etiquetas", le doy a más para añadir, y a veces un gadget tiene alguna opción de configuración. Me aparecerá pues una ventana para que yo configure algunas características. Por ejemplo, aquí puedo elegir si quiero mostrar toda las etiquetas o solamente algunas etiquetas seleccionadas; si quiero que las etiquetas aparezcan por orden alfabético o por frecuencia de aparición en mis entradas, y si quiero que aparezca como una lista o como una nube. Bueno, voy a añadir una nube, le doy a guardar, y aquí me aparecerá mi gadget "Etiquetas".

Muy importante, cuando realices un cambio en la plantilla, en el diseño, dale a guardar y una vez que los cambios se hayan guardado podemos recargar la página, el blog y aparecerá aquí el gadget con las etiquetas. Las etiquetas son enlaces que nos permiten navegar por las entradas. Yo ahora puedo navegar a las entradas que tenga la etiqueta "imagen", las entradas que tenga la etiqueta "texto" o aquellos que tengan la etiqueta "vídeo". Tengo una forma nueva de navegar.

Aquí el gadget está colocado en una posición que quizás no me interesa, quizás yo quiero que aparezca aquí debajo, quizás yo quiero que primero aparezca mi datos personales. No hay problema, vuelvo aquí a diseño y yo el gadget lo puedo arrastrar y situar en uno de estos huecos que la plantilla me ofrece para añadir gadgets. Le doy a guardar, ya se han guardado los cambios y ahora le doy a recargar y aquí lo tenemos, ya he movido el gadget con las etiquetas.

Bien, podemos añadir muchos más gadgets, te lo dejo a ti como ejercicio, que explores los distintos gadgets que aparecen y descubras para qué sirve cada uno.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso "Introducción al desarrollo web" que está disponible en la dirección idesweb.es. Muchas gracias por tu atención.