Junio 2020
Cambios en el menú principal.
Habiendo creado la nueva página de "Índice", no había tenido tiempo de modificar el menú principal para incluir en él un acceso directo. Todas las modificaciones son cambiando el código HTML y, cuando el tema no urge, suele quedarse en la cola de las tareas pendientes. Aquí tenemos las vistas del antes y el después:
Antes
No teníamos un acceso directo al Índice del Blog
Ahora
Ahora sí tenemos el acceso directo.
Cómo modificar HTML sin morir en el intento.
La otra cuestión es que a veces un cambio aparentemente insignificante del código puede traer consecuencias "desastrosas".
El diseño web actual se realiza de manera que los elementos se distribuyen de forma totalmente diferente según el ancho de la ventana del dispositivo del usuario (se llama "responsive", o "adaptativo"). Esto implica que no podemos hacer un diseño "a ojo" distribuyendo los elementos y dejándolos en una posición fija (como se ideó este blog allá por 2010 cuando se creó), sino que el diseño debe comprobarse en pantallas más pequeñas (móviles o tabletas).
Es decir, un estupendo "menú principal" visto desde el ordenador puede ser un horror poco práctico al manejarse desde un móvil. Además, hay que asegurar siempre la compatibilidad con diferentes navegadores, de unos y otros dispositivos.
Inspeccionar codigo.mp4Vídeo: inspeccionar código con Mozilla Firefox.
1. Comprobar el diseño.
Para comprobar que un diseño es correcto podemos usar las opciones de revisión de código que dan los navegadores, pulsando el botón derecho del ratón sobre cualquier zona de una página web:
Chrome: opción Inspeccionar (atajo Control + May + I). Pulsar los iconos a la derecha de "Elements" para elegir dispositivo.
Mozilla Firefox: opción "Inspeccionar elemento". Pulsar iconos de "móvil-tablet". O bien con el atajo Control + May. + M.
Microsoft Edge: opción "Ver origen". Luego elige "Emulación" y allí puedes seleccionar dispositivos de Microsoft.
Con estas herramientas comprobamos que cualquier cambio realizado en nuestra página web no "se ha cargado" la operatividad desde los móviles (recordemos que la gran mayoría de la población accede a las páginas web mediante el móvil, no a través del ordenador).
2. Crear y Editar código
Tenemos dos opciones: buscar un editor online o bien instalar algún programa que permite la edición de HTML, CSS y JavaScript como mínimo.
Desde el punto de vista de una aficionada, yo uso los siguientes:
Online HTML Editor: muy elemental, genial para arreglos rápidos.
VisualStudioCode. Creo que será de las pocos programas que tiene Microsoft de código abierto, pero funciona perfectamente.
Nuevo reloj-calendario en lateral.
Antes
Usaba un gadget que ofrecía una web externa y se ha caído. Este era el código:
<iframe frameborder="0" height="47" scrolling="no" src="//pagina-del-dia.euroresidentes.es/gadget-dia-de-hoyH.php?fondo=Naranja.png&texto=FFFFFF" width="350"></iframe>
Ahora
Este es el nuevo código, versionado para dirigir a la web del Ayuntamiento de Alburquerque.
<div style="padding: 1em 0; text-align: center;"> <h4><a href="http://www.alburquerque.es/" style="text-decoration: none;"><br />Alburquerque, España</a></h4> <iframe frameborder="0" height="90" seamless="" src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=es&size=small&timezone=Europe%2FMadrid" width="100%"></iframe></div>
Instagram en el lateral del Blog.
Widget de Instagram para Blogger
Blogger está bastante anticuado en la gestión de las redes sociales, y para integrarlas en el blog hay que recurrir a las propias redes (Facebook lo permite por ejemplo) o bien a webs intermediarias.
He probado dos y estos son los resultados.
1) SNAPWIDGET: da buen resultado de aspecto y es muy fácil de configurar, pero cuando pinchas en una foto de las de Instagram redirige a una página intermedia, la de "SnapWidget" y no a la cuenta de Instagram original.
Puedes comprobarlo pinchando en la imagen izquierda.
El código HTML en este caso es:
<!-- SnapWidget --><br /><script src="https://snapwidget.com/js/snapwidget.js"></script><br /><iframe allowtransparency="true" class="snapwidget-widget" frameborder="0" scrolling="no" src="https://snapwidget.com/embed/841406" style="border: none; overflow: hidden; width: 100%;"></iframe>
2) LIGHTWIDGET: este permite varias cosas interesantes. Al hacer clic en una de las fotos se enlaza directamente a la publicación en Instagram de esa imagen, o bien al perfil de Instagram (da la opción de elegir). También puedes poner efectos en ese clic, y he elegido "aumentar o acercar". Allí en la página de Lightwidget se ve precioso... pero...
Pero cuando pruebas el código, el resultado es el de la imagen izquierda: un chasco porque para que el Widget funcione con páginas seguras https debes pagar, y en nuestro blog ya liquidé el asunto de httpNO-httpsSÍ.
El código HTML en este caso es:
<!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/2107cb19b0dd5f1ab5ec62c4cfa30904.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>
Pues nada más, he vuelto a la primera opción y he eliminado los datos en LightWidget.
Google Analytics.
Google Analytics es la herramienta de Google para controlar el tráfico que genera una página web. Su uso está dirigido al mundo empresarial, para conocer qué productos o servicios webs son más visitados y potenciarlos.
Desde nuestro humilde blog, el sentido que tiene es más instructivo que productivo: aprender a manejar una aplicación que en principio no es inmediata, y ya veremos qué utilidad podemos darle.
Los pasos para usar G.A. son sencillos para empezar:
Dar de alta la cuenta gmail (en nuestro caso educarex) de la Biblioteca.
Configuramos el código de seguimiento: he elegido medir solo web, ya que no tenemos Apps vinculadas.
Copiar y pegar el código HTML que incluye el ID de seguimiento en cada página que queramos controlar.
Así he empezado por incluirlo en las páginas independientes del Blog:
Índice.
Documentos.
Contacta.
En este mismo Site de Biblio-Blogueros (aún no), y en HEAD del Blog principal.
¿Cómo funciona Google Analytics?
Utiliza las “Cookies”, que son fragmentos de código javascript que permiten a las webs rastrear y obtener datos de la actividad que realizan los usuarios cuando visitan nuestro blog.
Los datos que recogemos de los usuarios a través de las cookies, son enviados a la cuenta que hemos creado en Google Analytics.
Por su parte, Google Analytics nos agrupa toda esta información y nos la muestra a través de los informes, una vez hemos insertado el código de seguimiento en todas las páginas del blog que queramos analizar.
Así recoge los datos Google Analytics:
El usuario visita nuestra web.
El código de seguimiento inserta una cookie en su navegador.
El ID de seguimiento, recibe datos a través de la cookie enviándolos a Google Analytics.
Google Analytics nos muestra datos agrupados en informes: audiencia, adquisición, comportamiento y conversiones.
Hasta que no pasen unos días no podremos ver los resultados de esos informes.
Mejorando el perfil en Instagram.
Cómo poner varios enlaces en el perfil de Instagram.
Instagram permite un máximo de 150 caracteres en la personalización del perfil (o bio) y un único enlace.
Como tampoco funcionan los enlaces dentro de los post o publicaciones, lo que suele hacerse es recurrir a una aplicación externa que nos permita incluir varios enlaces reunidos en un solo link en nuestra biografía.
Esto lo podemos hacer, por ejemplo, con https://linktr.ee/ de una manera rápida, simplemente dándonos de alta en su servicio gratuito, preferentemente usando el perfil de Instagram. El servicio de pago permite mejoras de personalización (formato, colores...), pero en nuestro caso no son necesarias.
Configurar el bloque visible de Linktr.ee es muy fácil: solo has de poner una foto de perfil (la misma que en Instagram, para no liar a los usuarios), y luego los enlaces que desees. Se pueden desplazar arriba o abajo y puedes cambiarlos en cualquier momento, para tener siempre actualizada tu información.