📚 Introducción al desarrollo web: HTML y CSS (1/2)

🗂️ Cómo funciona la Web

🎥⏱️ 7m 19s

📖 Creación de una página web con Blogger (4): edición avanzada de una entrada

⭐ Aspectos clave

¿Quieres crear un enlace en una entrada? ¿Quieres insertar una imagen o un vídeo? En el siguiente vídeo te explicamos cómo hacerlo.

Además, también te mostramos cómo puedes asignar etiquetas a tus entradas. En el vídeo de la siguiente lección te explicaremos cómo las puedes usar para que los visitantes de tu blog puedan navegar por las entradas a través de las etiquetas.

📝 Transcripción

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é la edición básica de una entrada en Blogger. En este vídeo vamos a ver lo que ha quedado pendiente: cómo crear un enlace, cómo insertar una imagen y cómo insertar un vídeo en una entrada. Además, también vamos a ver cómo asignar etiquetas a las entradas.

Para enseñarte la forma de insertar una imagen, un vídeo o crear un enlace voy a crear una entrada nueva en el blog de prueba. Defino una nueva entrada, le pongo de título "Una nueva entrada para probar otras opciones". Escribo pues "Un párrafo de prueba" y voy a empezar creando un enlace. Por ejemplo, pongo "La página principal de la Universidad de Alicante". Y "Universidad de Alicante" va a ser un enlace, un enlace a la página principal de la Universidad de Alicante. Así que, en primer lugar necesito conseguir la URL. Para ello me voy a la página de la Universidad de Alicante, copio la URL, vuelvo al blog y teniendo el texto seleccionado que quiero que sea el enlace le doy al botón de "Añadir o eliminar un enlace", "Enlace", y defino que quiero enlazar a una dirección web y pego la URL. Ahora ya he convertido este texto en un enlace.

A continuación voy a insertar dos imágenes. Podemos insertar imágenes de varias formas. Le doy a este botón de insertar la imagen. Yo puedo insertar una imagen desde una URL, para ello tengo que localizar la imagen que quiero insertar y ver si puedo obtener su URL. Por ejemplo, me sitúo sobre esta imagen, pulso botón derecho y le digo "Abrir imagen en una pestaña nueva", aquí tenemos la imagen y esta es la URL de la imagen. Yo puedo copiar la URL de la imagen, vuelvo al blog y en la opción "Desde una URL" pego, me aparece la imagen, le doy a añadir, y ya tengo añadida la imagen. Esto para una imagen que esté disponible en Internet.

También puedo por supuesto añadir una imagen subiéndola desde mi ordenador. Le doy a "Subir", "Elegir archivos", y busco la carpeta donde tengo mis imágenes. Por ejemplo aquí, en la carpeta imágenes tengo dos imágenes que quiero subir. Puedo seleccionar varias imágenes y subirlas a la vez. Ahora mismo se están subiendo dos imágenes y una vez que se han subido yo puedo seleccionar las dos imágenes y las puedo añadir a mi blog.

Las imágenes tienen unas opciones. Yo puedo elegir el tamaño con el que quiero que la imagen aparezca en la entrada, en la página. Puedo poner tamaño pequeño, mediano, grande, extra grande o tamaño original. En este caso las imágenes que he subido son muy grandes, no conviene ponerle en este caso el tamaño original, sino por ejemplo el tamaño grande. Le pongo a las dos imágenes el tamaño grande.

Yo ya puedo ver cómo va quedando mi entrada. Le puedo dar aquí al botón "Vista previa", se me abre una pestaña nueva y aparece la previsualización de mi página y puedo ver cómo va quedando.

También puedo añadir una imagen a partir de imágenes que ya existan en mi blog o a partir de álbumes que tenga en Picasa.

Y por último vamos a ver pues cómo añadir un vídeo. Tenemos que usar este botón "Insertar un vídeo" y tenemos varias opciones. Podemos subir el vídeo desde nuestro ordenador o lo más común será añadir un vídeo desde YouTube. Podemos aquí desde YouTube buscar un vídeo, por ejemplo voy a buscar los vídeos de iDESWEB y una vez localizado un vídeo de iDESWEB, por ejemplo este "Introducción al desarrollo web", la presentación del curso, lo puedo seleccionar y lo puedo insertar. Y el vídeo funcionará como lo vamos a comprobar a continuación.

También tenemos la opción de etiquetas. Las etiquetas me permiten clasificar las entradas en función de varios términos que yo defina, en función de varias etiquetas. Por ejemplo yo a esta entrada le voy a añadir los términos "imagen", porque he puesto unas imágenes, y "vídeo". Le doy a "Listo" y voy a publicar la entrada. Fíjate que aquí me aparece la entrada con las etiquetas "imagen" y "vídeo". Y yo cuando visualizo mi blog pues la entrada me aparece con las etiquetas "imagen" y "vídeo".

Por ejemplo, esta entrada no tiene ni imagen ni video, podríamos etiquetarla como texto. ¿Cómo lo podemos hacer? Lo podemos hacer de varias formas, desde aquí yo puedo seleccionar la entrada y le doy a este botón y le digo "Etiqueta nueva", "texto". Y ya tendríamos la entrada con esa etiqueta. Yo puedo seleccionar varias entradas y le puedo asignar simultáneamente varias etiquetas a la vez.

Sencillo, ¿verdad? Y bien, ¿y para qué sirven las etiquetas además de que aparezcan aquí con la entrada? Bueno, lo más interesante es poder añadir aquí lo que se llama un gadget para poder navegar por las entradas en función de las etiquetas, pero esto te lo explicaré en el siguiente vídeo.

Ahora te invito a que veas la quinta parte de este vídeo, en el que te explicaré cómo modificar el diseño de tu blog y cómo añadir gadgets.

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.