IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

DECIMO TERCERA SESIÓN. PASO 11: ORGANIZACIÓN DE LA INFORMACIÓN EN LOS BLOGS. Terminamos la creación y el diseño de nuestro blog con la organización de toda la información que hemos introducido. ORGANIZACIÓN CON ETIQUETAS. En cada una de las entradas que hemos ido introduciendo en el blog, la hemos acompañado de una etiqueta para posteriormente identificarla. Así es posible que haya introducido varias entradas con la etiqueta: 1-bach. Todas esas entradas contendrán información sobre el curso de 1-bach. ¿Cómo tener disponible todas las etiquetas que he utilizado en mis entradas? Es posible poniendo un gadget en el margen derecho o si tenemos más de dos columnas en cualquiera de ellas. Normalmente este gadget viene instalado por defecto en la mayoría de las plantillas para blog (labels), nos aseguraremos que no lo tenemos instalado para seguir los siguientes pasos. 1. Abre la página de blogger: http://blogger.com 2. Accede a la carpeta de diseño. 3. En la columna que queramos (la derecha por ejemplo) elegimos “Añadir un gadget”, buscamos en la ventana emergente: “Etiquetas”

4. Configuramos el gadget según se ve en la siguiente ventana:

IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

5. Hacemos clic en guardar y accedemos al blog para ver cómo ha quedado: (Dependiendo del diseño que tengamos la siguiente imagen puede tener otro aspecto, lo importante es que aparezca un listado de las etiquetas que tengamos creadas)

Al hacer clic sobre una de ellas aparecerán en el blog tan sólo las entradas que tengan dicha etiqueta. ARCHIVO DEL BLOG. Otra forma de clasificar la información es a través del archivo del blog, de este modo tenemos disponibles las entradas por orden cronológico. El archivo del blog puede servirnos de diario de clase en el caso de un blog de aula, o bien para clasificar las actas de un departamento. La mayoría de las plantillas también tienen por defecto el archivo del blog, comprueba si es así en el tuyo. Si no dispones de archivo del blog o bien quieres configurarlo de forma personal sigue los siguientes pasos: 1. Abre la página de blogger: http://blogger.com 2. Accede a la carpeta de diseño. 3. En la columna que queramos (la derecha por ejemplo) elegimos “Añadir un gadget”, buscamos en la ventana emergente:

IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

4. Configuramos el gadget según se ve en la siguiente ventana:

IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

EDICIÓN Y CONFIGURACIÓN DE LA BARRA DE MENÚ. Como vimos en el paso 4, al elegir un diseño del blog es preferible que tenga una barra de menú que me permita organizar la información del blog. Entonces veíamos algunos ejemplos.

Este menú viene configurado por defecto, normalmente con las entradas: Home, About, Contact, Log in,…. Y similares. Lo importante es que podemos configurar ese menú como nosotros queramos. Tendremos que tener pensado qué enlaces queremos poner y a donde, los enlaces se pueden direccionar a una página web externa al blog o a entradas etiquetadas. Por ejemplo, sería bueno clasificar el material de mi blog por cursos. Entonces quiero hacer varias entradas (apartados), 1-eso, 2-eso, 3-eso, 4-eso, 1-bach, 2-bach. Cada una de estas entradas tendrá un enlace a todas las entradas etiquetadas como 1-eso, 2-eso,…

IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

Necesitamos trabajar con dos pestañas, en una de ellas tendremos el blog abierto y en la otra la zona de trabajo de blogger.

Accedemos a la pestaña de blogger Y seguimos los siguientes pasos: 1. Accedemos a la carpeta de Diseño y a la subcarpeta de edición html.

2. Seleccionamos la opción Expandir plantillas de artilugios.

3. Entonces pasamos a apretar al mismo tiempo las teclas Control y F. Sin darnos cuenta aparecerá una barra debajo de las pestañas con las que estamos trabajando.

IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

4. Esta nueva barra nos ayuda a buscar cualquier palabra dentro del código html. Vamos a buscar con esta barra el siguiente texto: div class='menu'. Tecléalo tal cual. El texto encontrado aparecerá resaltado en amarillo, como puedes ver aquí: <div class='menu'><ul><li class='current_page_item'> <a expr:href='data:blog.homepageUrl'>Home</a></li><li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li><li class='page_item page-item-15'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li><li class='page_item page-item-11'><a href='#' title='Edit'>Edit</a></li></ul></div> 5. En la etiqueta anterior comienza el menú que hemos visto en nuestro blog. Volvemos al blog para anotar todas las palabras que aparecen en el menú.

Debemos anotar en una hoja las palabras que aparecen en el menú. En el ejemplo: HOME, POSTS RSS, COMMENTS RSS, EDIT. Estas palabras las buscaremos entre el código html anterior. Volvemos a blogger. 6. Buscamos en el código html las palabras anotadas. <div class='menu'><ul><li class='current_page_item'> <a expr:href='data:blog.homepageUrl'>Home</a></li><li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li><li class='page_item page-item-15'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li><li class='page_item page-item-11'><a href='#' title='Edit'>Edit</a></li></ul></div>

IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

Si cambiamos esas palabras por los nombres de las carpetas que queremos, ya habremos conseguido cambiar el aspecto del menú. Voy a poner 1_eso, 2_eso, 3_eso, 4_eso. (OJO, GUIÓN BAJO. EL GUIÓN NORMAL PUEDE REALIZAR MODIFICACIONES NO DESEADAS) El aspecto queda así. <div class='menu'><ul><li class='current_page_item'> <a expr:href='data:blog.homepageUrl'>1_eso</a></li><li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>2_eso</a></li><li class='page_item page-item-15'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>3_eso</a></li><li class='page_item page-item-11'> <a href='#' title='Edit'>4_eso</a></li></ul></div> Hacemos clic en Guardar plantilla y accedemos al blog para ver los cambios.

7. Ahora por último tendremos que cambiar el enlace de cada una de las nuevas palabras del menú. Así al hacer clic en 1_eso se deben mostrar todas las entradas del blog que tengan esa etiqueta. Al hacer clic en 2_eso se deben mostrar todas las entradas del blog que tengan esa otra etiqueta y así sucesivamente. 8. Volvemos a blogger la barra de búsqueda sigue estando donde apareció. Y aparecerán las palabras que anteriormente buscamos: div class='menu'. Hacemos clic en siguiente y de nuevo aparece el menú en el código. El enlace con la dirección donde va cada palabra se encuentra justo delante de cada una de ellas, entre comillas. Veámoslo. <div class='menu'><ul><li class='current_page_item'> <a expr:href='data:blog.homepageUrl'>1_eso</a></li>><li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>2_eso</a></li><li

IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

Fijémonos tan solo en el primer enlace: <a expr:href='data:blog.homepageUrl'>1_eso</a></li> Tenemos que cambiar el enlace haciendo lo siguiente: <a expr:href='data:blog.homepageUrl'> Eliminamos la palabra expr y sustituimos la dirección entre comillas por la que queremos poner de nuestro blog. <a href='data:blog.homepageUrl'> Ahora buscamos la dirección URL que tiene que ir entre comillas. 9. Volvemos al blog y desde el gadget de las etiquetas hacemos clic en 1-eso.

En el blog aparecen las entradas que tienen dichas etiquetas y en la barra de direcciones aparece la dirección URL que el blog le tiene asignado.

Copiamos dicha dirección que será la que peguemos en el código html. Para copiarla nos situamos encima y hacemos clic, entonces se selecciona la dirección poniéndose azul, hacemos clic botón derecho y en copiar. 10. Nos vamos de nuevo a blogger y en el código html localizamos el enlace de la primera palabra 1_eso y la seleccionamos, sin hacer nada más sobre el enlace que queremos eliminar y que está señalado en azul, hacemos clic con botón derecho y a pegar. De este modo se sustituye el texto que había por el nuevo. El nuevo enlace tiene que ir entre comillas simples ‘ ‘ hay veces que desaparecen con el enlace anterior y habrá que añadirlas.

IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

El resultado es el siguiente: <div class='menu'><ul><li class='current_page_item'> <a href='http://matesporzuna.blogspot.com/search/label/1eso'>1_eso </a></li><li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>2_eso</a></li><li class='page_item pageitem-15'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>3_eso</a></li><li class='page_item page-item-11'><a href='#' title='Edit'>4_eso</a></li></ul></div> Hacemos clic en guardar plantilla y comprobamos los cambios realizados en el blog. Volvemos al blog, vamos a la página principal del blog y luego hacemos clic en nuestro nuevo enlace. 11. Repetimos el proceso para los enlaces 2_eso, 3_eso, 4_eso. Hacemos clic sobre la etiqueta del blog 2-eso. Copiamos la dirección URL y volvemos al código html de blogger. Eliminamos expr de la dirección de 2_eso y sustituimos la dirección URL, quedándonos: <div class='menu'><ul><li class='current_page_item'> <a href='http://matesporzuna.blogspot.com/search/label/1eso'>1_eso </a></li><li class='page_item page-item-2'> <a href=’ http://matesporzuna.blogspot.com/search/label/2-eso'>2_eso </a> </li><li class='page_item page-item-15'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>3_eso</a></li><li class='page_item pageitem-11'><a href='#' title='Edit'>4_eso</a></li></ul></div> Comprobamos los cambios guardando la plantilla y viendo el blog. 12. Repetimos el proceso con los enlaces 3_eso y 4_eso. Quedándonos: <div class='menu'><ul><li class='current_page_item'> <a href='http://matesporzuna.blogspot.com/search/label/1-eso'>1_eso</a> </li>&gt;<li class='page_item page-item-2'><a href='http://matesporzuna.blogspot.com/search/label/2-eso'>2_eso</a> </li><li class='page_item page-item-15'><a href='http://matesporzuna.blogspot.com/search/label/3-eso'>3_eso</a> </li><li class='page_item page-item-11'> <a href='http://matesporzuna.blogspot.com/search/label/4-eso' title='Edit'>4_eso</a></li></ul></div> 13. Por último, si queremos, podemos añadir más enlaces al menú bastará con copiar y pegar parte del código tantas veces como entradas queramos.

IES RIBERA DEL BULLAQUE

GRUPO DE TRABAJO: CREACIÓN Y DISEÑO DE BLOGS Y PAG. WEB

14. Una entrada del menú comienza con <li…… y acaba con </li> Así del código que nos ha quedado: <div class='menu'><ul><li class='current_page_item'> <a href='http://matesporzuna.blogspot.com/search/label/1eso'>1_eso</a></li>&gt;<li class='page_item page-item-2'><a href='http://matesporzuna.blogspot.com/search/label/2eso'>2_eso</a></li><li class='page_item page-item-15'><a href='http://matesporzuna.blogspot.com/search/label/3eso'>3_eso</a></li><li class='page_item page-item-11'> <a href='http://matesporzuna.blogspot.com/search/label/4-eso' title='Edit'>4_eso</a></li></ul></div> Copiamos el código que está señalado en negrita y amarillo y lo pegamos a continuación antes de </ul> Siendo este el resultado: <div class='menu'><ul><li class='current_page_item'> <a href='http://matesporzuna.blogspot.com/search/label/1eso'>1_eso</a></li>&gt;<li class='page_item page-item-2'><a href='http://matesporzuna.blogspot.com/search/label/2eso'>2_eso</a></li><li class='page_item page-item-15'><a href='http://matesporzuna.blogspot.com/search/label/3-eso'>3_eso</a></li> <li class='page_item page-item-11'> <a href='http://matesporzuna.blogspot.com/search/label/4-eso' title='Edit'>4_eso</a></li> <li class='page_item page-item-11'> <a href='http://matesporzuna.blogspot.com/search/label/4-eso' title='Edit'>4_eso</a></li> </ul></div> Cambiamos el último enlace por 1-bach y también su dirección URL <div class='menu'><ul><li class='current_page_item'> <a href='http://matesporzuna.blogspot.com/search/label/1eso'>1_eso</a></li>&gt;<li class='page_item page-item-2'><a href='http://matesporzuna.blogspot.com/search/label/2eso'>2_eso</a></li><li class='page_item page-item-15'><a href='http://matesporzuna.blogspot.com/search/label/3-eso'>3_eso</a></li> <li class='page_item page-item-11'> <a href='http://matesporzuna.blogspot.com/search/label/4-eso' title='Edit'>4_eso</a></li><li class='page_item page-item-11'> <a href='http://matesporzuna.blogspot.com/search/label/1-bach' title='Edit'>1_bach</a></li></ul></div> Guardamos y vemos los resultados.

Sign up to vote on this title
UsefulNot useful