Diseño Web

Diseño Web, Gestores de contenidos, Internet, Noticias Informáticas

Nuevo algoritmo de Google “Page Experience” y las novedades que trae para el SEO de las páginas web.

/

En Noviembre del año pasado Google anunció nuevos cambios en su algoritmo: ese famoso conjunto de cientos de reglas que deciden las puntuaciones de nuestras páginas web en este buscador y, por lo tanto, su colocación en las posiciones de búsqueda. A dicha actualización se la conoce como Page Experience update, porque está enfocada en mejorar la experiencia de usuario en nuestras páginas. Esta actualización iba a salir en Mayo, pero se ha retrasado hasta Junio, y se irá implementando hasta Agosto de este año. ¿Y, en qué se basa Google para evaluar al “experiencia de usuario“? En los siguientes pilares. Es decir, la nueva actualización va a dar prioridad y mejores puntuaciones cuanto más óptimos sean los siguientes puntos: LCP: Largest Contentful Paint. Es decir lo que tarda en aparecer el elemento más grande del viewport con respecto a cuando se inició la carga de la web. Lo deseable sería tener unos tiempos de 2,5 segundos o menos. FID: First Inpt Delay. Que mide la interactividad porque es el tiempo desde que un usuario pincha en un elemento de la página hasta que el navegador puede procesar la respuesta. Lo deseable serían 100 milisegundos o menos. CLS: Cumulative Layout Shift. El CLS intenta medir la estabilidad visual de la página. Es la suma de todos los layout shifts (cada vez que un elemento cambia su posición desde un frame al siguiente) durante la carga de la página. Lo deseable es una puntuación de 0,1 o menos. Los tres anteriores son los denominados Core Web Vitals. Os dejamos unas herramientas que os pueden ayudar a medir estos 3 puntos CWV. Compatibilidad con los dispositivos móviles. Puedes comprobarlo en esta página. Navegación segura. El informe de Problemas de Seguridad de Search Console puede darte información sobre este punto. Https. Si tu página se muestra sobre https. Intersticiales no intrusivos. Espacios que pueden afectar a la navegación. Como dice Google, la experiencia de página no va a ser lo único ni lo más importante a la hora de posicionar. Sigue primando el contenido frente a cualquier otro factor, y una página con bueno contenido siempre será la mejor posicionada. Pero, cuando todos los factores estén igual, será cuando la experiencia de página sea decisiva. While page experience is important, Google still seeks to rank pages with the best information overall, even if the page experience is subpar. Great page experience doesn’t override having great page content. However, in cases where there are many pages that may be similar in relevance, page experience can be much more important for visibility in Search. Conclusión: los tiempos de carga en móvil van a contar mucho. ¿Cómo se consiguen esos tiempos de carga? Bueno, este es un tema que está en debate ahora mismo. Es difícil, por no decir imposible, tener tiempos de carga pequeños con desarrollos visuales elaborados y prestaciones avanzadas. Los tiempos que toma Google como referencia parecen ser de desarrollos como AMP, aunque Google diga que AMP ya no es requerido (y de hecho ya permiten páginas no AMP en el módulo Noticias Destacadas), lo cierto es que se necesitan formatos así, con sus restricciones de tamaño en recursos de JS y CSS para poder darlos. Y AMP si que consigue velocidades de carga muy interesantes. PERO, ¿a cambio de qué? Con esas restricciones es muy difícil tener contenidos visuales elaborados y novedosos. Si tenemos un blog, podemos prescindir del aspecto visual para poder proporcionar velocidad. Pero no todas las páginas son así. Así que parece que nos están haciendo elegir entre aspecto visual y puntuación en este apartado de Page Experience. Los diseñadores están “que trinan“, no todo es velocidad, y una página visualmente agradable puede hacer que merezca la pena unos segundos más de carga. Además, curiosamente los recursos de Google como Adsense o Analytics dañan nuestros CWV y nos puntúan negativamente. Aquí os dan algunos consejos al respecto. A Febrero del 2021, de 8 millones de páginas sólo el 21% cumplía con los tres parámetros de los CWV. ¿Qué herramientas nos proporciona Google para ayudarnos con esta actualización? Esta es una actualización extraña porque nos han avisado, nos han dado tiempo y nos dicen, más que otras veces, qué factores van a tener en cuenta. Y además, proporcionan nuevas herramientas en Google Search Console, para poder medir las variables que se van a tener en cuenta.Os dejamos un resumen de las mismas. Un nuevo informe de Experiencia de Página en Google Search Console. El informe de Rendimiento en la Búsqueda se ha actualizado para mostrar los nuevos parámetros de experiencia de página y las páginas que los cumplen o no. Se permiten los SXG (signed exchanges) en todo tipo de páginas (antes sólo en AMP). Conclusión. Nadie sabe bien cómo van a afectar estos cambios a las puntuaciones actuales de las páginas. Tampoco lo rápido que lo van a hacer. Parece claro que sigue primando el contenido y la relevancia, y que estos factores son algo añadido.Y no sabemos cómo seguirá la pelea entre diseño vs tiempos de carga. A lo mejor las páginas nuevas tendrán que primar la rapidez, y las mejor posicionadas podrán elegir más diseño. Lo que está claro es que vamos a tener que ir optimizando las páginas todavía más, midiendo los tiempos de carga, pensando cómo están diseñadas las páginas para optimizar las CWV y mejorando los servidores donde están alojadas.Porque esos puntos pueden ser decisivos para posicionarnos sobre nuestra competencia.

Diseño Web, Gestores de contenidos, Soporte

Errores en Contact Form 7. Cómo solucionarlos.

/

Como hemos dicho en muchas ocasiones, Contact Form 7 es uno de los plugins más usado para los formularios de contacto de WordPress. Aquí hemos hablado mucho sobre cómo reducir spam en los formularios hechos con este plugin, cómo tener una copia de los envíos en tu WordPress, integraciones con otros plugins etc. Hoy vamos a hablar de posibles errores en el envío de un formulario hecho con Contact Form 7. Errores en Contact Form 7 y cómo solucionarlos. Si has llegado aquí es porque has recibido el típico error de : “Hubo un error intentando enviar tu mensaje. Por favor inténtelo de nuevo más tarde” Vamos a ver qué puede estar pasando. Lo primero es darse cuenta que CF7 tiene unos códigos de colores para los errores, que puede que te indiquen algo. Son los siguientes. Es decir, de los tres que dan error podéis ver que el color da una indicación de qué puede estar pasando. Amarillo (parece naranja en la foto pero es amarillo): Error de validación. Uno de los campos esperaba un valor y, o está vacío, o no es del tipo esperado. Tienes que revisar tu formulario, los tipos de campo y cuales son obligatorios. Naranja: No ha pasado la validación de spam. Esto suele ser porque tienes integrado CF7 con algún plugin antispam tipo recaptcha y no ha pasado la validación. Prueba a desactivar la integración para asegurarte que es eso pero las causas típicas son: – Has puesto claves de reCaptcha V2 en la integración con reCaptcha. Recuerda que ahora CF7 es compatible con reCaptcha v3. Si quieres V2 tienes que instalar este plugin (el segundo de la lista lo seguimos usando). Y obtener unas claves de reCaptcha 2 en vez de la 3. – Tu plugin anti spam tiene algún problema (desactívalo y así te aseguras). – A veces los plugins de caché o de optimización interfieren en el anti spam. Desactiva la caché o límpiala. Si esa es la causa, intenta excluir CF7 o la página de contacto de la caché. Rojo: estamos hablando de problemas con la configuración del servidor. Tienes también varias opciones. – Comprueba si el resto de correos de WordPress están llegando. Por ejemplo los de recordatorio de contraseña. Si llegan el problema es de la configuración de CF7, si no, seguramente el servidor no pueda enviar mensajes por phpMailer (lo que usa WordPress por defecto). – Si no llega ningún correo de WordPress, considera usar un plugin de SMTP para mandar correos por SMTP. Necesitarás una cuenta de correo (sus datos de configuración). – Si sólo fallan los de CF7 mira la configuración de la segunda pestaña del formulario, la de “Mail“. Comprueba que todo está bien ahí. – Si lo anterior no funciona, habla con tu proveedor para ver qué puede ser la causa.

Diseño Web, Información Tecnica, Internet, Sistemas

Al redirigir un dominio a otro por DNS, no redirige el http a https y esta es la razón.

/

Los clientes nos piden muchas veces que redirijamos sus dominios o a otros dominios, o a otras páginas. Una manera de hacer esto es por una redirección por DNS, opción que permiten muchos alojamientos. Sin embargo no funciona en un caso: No permite redirigir el protocolo http a https. Y eso puede ser un problema, porque hay gente que todavía escribe http, o porque tengamos páginas indexadas con http. Hoy os explicamos por qué no funciona y cómo arreglarlo. Por qué la redirección por DNS no permite redirigir http a https. La razón puede explicarse de varias maneras. Una redirección por DNS realmente crea un registro A de un dominio a otro. Es independiente de protocolo (no lleva el protocolo consigo). Una redirección por https funciona cuando un servidor manda a otro la petición cifrada y espera que el otro le conteste, también del mismo método. Como os explicamos cuando explicamos la clave pública y privada. Es decir requiere un certificado válido en cada extremos.El problema es que, un dominio redireccionado por DNS carece (en origen) de certificado. Porque no se puede crear (ya que no se puede verificar), y además ya ni siquiera es válido porque el dominio apunta a otro sitio. Así que nunca hará la conexión cifrada y fallará.Es decir, una redirección de o a https debe partir o llegar a otro sitio con certificado. Por lo tanto necesitamos alojamientos en ambos lados, para poder instalar dichos certificados. ¿Las redirecciones por DNS son inútiles? No, cada día tiene menos sentido y uso el http sin cifrar y en muchas ocasiones no será necesario considerarlo. Pero si entra en juego, no podemos hacerlo. ¿Qué solución nos queda si queremos redireccionar un http a un https?. Como hemos dicho, entonces tenemos que tener alojamientos y certificados en ambos sitios. Eso nos obliga a realizar la redirección o en Apache o por htaccess. Aunque lo hemos puesto en algún otro artículo, por referencia rápida os dejamos un posible código para hacerlo.

Diseño Web, Gestores de contenidos, Trucos

Quitar los js y css de Woocommerce en páginas donde no sean necesarios para mejorar SEO y velocidad.

/

Algo que no mucha gente sabe es que los plugins de WordPress cargan todos sus scripts (ficheros js) y estilos (ficheros css) desde la primera carga de la página. Se vayan a usar o no se vayan a usar esos plugins en esa sección de la página. Algo que, obviamente, ralentiza la página porque tienen que leerse esos ficheros. Además, si haces pruebas de Pagespeed o Gmetrix, son estos ficheros los que verás que afectan más a la velocidad de carga de la página. Con avisos como “quitar el Javascript que bloquea la visualización del contenido“. Así que estos días iremos compartiendo trucos para eliminar estos ficheros js o css en páginas donde no sean necesarios para los plugins más usados en WordPress. Hoy toca Woocommerce, el plugin más usado para crear páginas en WordPress. Script para eliminar los ficheros js y css de Woocommerce donde no se necesitan. Aquí os dejamos un script que podéis poner en vuestra página que hará un “deque” (eliminará) de los recursos de Woocommerce en las páginas que no sean carrito, página de categoría, página de producto, etiquetas etc. Como siempre, el código se puede poner en el fichero functions.php del tema hijo, o en un Snippet. He dejado una línea en rojo que hemos incluido con ciertas condiciones, pero que podéis ampliar con más. Estas son las conditional tags y os dejo aquí una referencia al respecto y otra más amplia aquí. Si hacéis una prueba de velocidad antes y después de poner el código, veréis que ganáis en velocidad de caga de la página y, seguramente, en puntuación. Nota: comprobad que os funciona todo bien en la tienda. Podéis tener que modificar el fichero para vuestra web.

Diseño Web, Gestores de contenidos, SEO, Trucos

Quitar dashicons de la portada de WordPress para mejorar el SEO.

/

Si haces una prueba de velocidad de tu página con Pagespeed o con Gmetrix, uno de los ficheros que verás que está ralentizando la portada de tu web en WordPress es dashicons.min.css ¿Qué es dashicons.min.css? Este fichero carga los dashicons de WordPress, unos iconos que usa WordPress en su escritorio del backend y en la barra de administración. Pero, como ocurre mucho en WordPress, se carga también en el frontend. Y no tiene sentido. Iremos dedicando varios artículos a cómo dejar de cargar estos elementos no necesarios de la portada de nuestra web, y así mejorar la velocidad y puntuación de la misma. Cómo evitar que se carguen los dashicons donde no son necesarios. Nota: prueba esto en tu web antes de publicarla porque hay temas que si que usan los dashicons para PC, tablet o móvil. Lo que vamos a hacer es desactivarlos en toda la parte de la web que no tiene barra de administración ni escritorio de WordPress. Es decir, para el frontend. Os dejamos dos scripts posibles que, como siempre, tenéis que poner en el fichero functions.php de vuestro tema hijo o en un plugin de Snippets. Opción que detecta si está la barra de administrador y, si no, quita los dashicons. Esta la hemos usado y funciona perfectamente. Opción que detecta si el usuario está registrado y, si no, quita los dashicons. Como siempre podéis hacer mezclas de estas funciones, con capacidades diferentes de los usuarios (si es administrador o no). Haced una prueba con y sin el código y veréis que el aviso se va y la puntuación mejora.

Diseño Web, Gestores de contenidos, Trucos

Módulo gratuito para exportar productos en Prestashop.

/

Prestashop, como CMS dedicado a la venta online, tiene cosas muy buenas. Pero también adolece de carencias sencillas de solucionar, que llevan ahí desde hace muchas versiones. Cosas que nadie sabe por qué no se solucionan o funcionalidades que no se sabe por qué no añaden. Porque aparentemente serían sencillas de realizar. Una de ellas es la exportación de productos. Te permite importar todo tipo de productos y combinaciones, pero no exportarlos totalmente. Si, puedes exportar algún campo, pero no todos los campos de un producto. Tampoco en el formato que se necesita para la importación. Y claro, eso hace muy difícil las subidas masivas, las migraciones desde otros sistemas o versiones anteriores, o la exportación para comprobar alguna cosa externamente. Hay varias soluciones para esto, obviamente muchos módulos de pago, pero hay también soluciones gratuitas. Hoy os hablamos de una de ellas, un módulo de exportación gratuito. Módulo gratuito para exportar productos en Prestashop. Este módulo, Product Export, lleva muchas versiones funcionando. Y está actualizado para la versíón 1.7 (lo hemos probado tanto en la 1.6 como en la 1.7). Os recuerdo que, para poder descargar los enlaces del foro de Prestashop necesitáis estar registrados u os dará un error. El módulo permite: Seleccionar el idioma Seleccionar si sólo exportar productos activos y también los no activos. Seleccionar el delimitador (útil para exportar a Excel en español). Compatible con multitienda y con la gestión avanzada de stock. Exportar productos sólo de una categoría, o de todas. El uso es fácil, se descarga el plugin, se instala y se va a Parámetors Avanzados-> Exportar productos. Ahí tendrás las opciones de las que hemos hablado.

Diseño Web, e-Learning, Sistemas, Webs

Estado de la Conexión en BigBlueButton.

/

BigBlueButton, una de las soluciones más usadas para videoconferencias, tanto para reuniones, como para clases online, no para de actualizarse. Hace unos días ha salido la nueva versión 2.3 y trae novedades muy interesantes. Entre ellas la que hablamos hoy, el estado de la conexión. Cuando tienes reuniones online con gente, es frecuente que haya algún usuario o alumno que tenga problemas con la conexión. El problema es que, cuando no hay una indicación al respecto, nunca se sabe si los problemas son de alguna de las tres fuentes posibles: profesor/ponente, alumno/oyente o servidor. Y nadie quiere reconocer que los problemas son suyos. Se suma a esto que, la mayoría de los usuarios, no entienden bien cómo funciona la conectividad wifi, el ancho de banda y los problemas de conexión. Hasta ahora nosotros recomendábamos a nuestros clientes que entrara una tercera persona en la reunión. Si dos personas se escuchan perfectamente y un tercero no, lo más seguro es que sea del tercero. Pero no siempre es posible, y no todos los usuarios quedaban convencidos. Por eso es por lo que el icono de Estado de Conexión, de la que os hablamos hoy, es tan interesante. Icono del Estado de la Conexión en BigBlueButton. A partir de la versión 2.3, BBB introduce este icono tan útil. El funcionamiento (que puede cambiar en las siguientes versiones, igual que los colores) es el siguiente: El icono aparece en verde si la conexión no tiene problemas. El icono aparece en morado si hay problemas de conexión. Si la conexión se corta, el icono aparece en rojo con un mensaje. Si un usuario pincha en el icono puede : – Ver los problemas que ha tenido él durante la conexión. – Opciones para desconectar tanto la webcam, como la compartición de pantalla (que reducen los requisitos de la conexión). Los moderadores pueden ver los fallos de conexión de los usuarios, además de las suyas, pinchando en el icono de estado de la conexión. Os dejamos la explicación en un vídeo.

Diseño Web, e-Learning, Gestores de contenidos

Moosh: gestiona Moodle por línea de comandos y realiza tareas comunes rápidamente.

/

Gestionar muchas de las tareas de Moodle desde el backend, puede ser muy tedioso. Todos hemos tenido este problema. El desarrollador de Moosh decidió hacer algo para arreglarlo y, basándose en Drush (la línea de comandos de Drupal), desarrolló Moosh.Este tipo de herramientas son muy útiles, y también existen, por ejemplo, en WordPress con wp-cli, del que hablaremos otro día. Básicamente Moosh es como tener una serie de scripts que realizan tareas que normalmente implicarían muchos pasos, o muchas búsquedas. Todo con unos simples comandos. Como usar Moosh. Si quieres usar Moosh, tienes varias opciones. Puedes descargarlo como paquete de Ubuntu, puedes instalar un plugin de Moodle o instalarlo con composer desde Git. Nota: no copies los ficheros de Moosh dentro de la carpeta de Moodle porque puedes romper tu intalación. Una vez tengas Moosh instalado, puedes disponer de todos los comandos que aparecen en esta lista (más de 80). Con la sintaxis general siguiente. Algunos de los comandos útiles que tiene Moosh, para que te hagas una ídea, son: moosh cache-clear -> Vacía la caché de Moodle moosh audit-passwords -r -> audita las contraseñas de los usuarios para ver si son fácilmente hackeables, Muestra las que lo son. moosh user-create -.> Crea un usuario. Por ejemplo: moosh user-delte -> borra uno o varios usuarios. Por ejemplo; moosh info-plugins -> muestra la lista de plugins instalados y la carpeta de instalación. moosh sql-dump -> descarga la base de datos de sql a un fichero (hace copia de la base de datos). moosh file-delete -> Borra ficheros tanto del servidor como su registro en la base de datos. Ejemplos: Borra los ficheros de id 10, 20 y 30. Borra ficheros de más de 100 bytes Vacía la papelera: Borra todas las copias automatizadas. Tienes comandos para restaurar cursos desde ficheros de backup, puedes borrar varios cursos a la vez, ….Y muchos otros. Esperamos que os resulte útil Moosh, cuando tienes que gestionar Moodles de cierto tamaño, es una gran ayuda.

Diseño Web, e-Learning, Gestores de contenidos, Trucos

Cómo traducir el mensaje de “New Activity” en el formato de curso Grid de Moodle.

/

El plugin Grid Format de Moodle es un plugin muy usado para mostrar las secciones de cursos de una manera más estética. Básicamente el plugin organiza las secciones en formato rejilla (grid, de ahí su nombre) y permite poner una imagen en cada sección. Cada vez que se añade una actividad en una de las secciones, si tienes este módulo activado, se agrega a cada sección una imagen con el texto “New Activity”. Esta imagen aparece en inglés, y está traducida a francés, alemán e incluso al hebreo, pero no al español. Por lo tanto, si lo ponemos en un Moodle español, el mensaje sale en inglés. Hace unos días, un cliente nos pidió cambiarlo y hoy os enseñamos a hacerlo aquí. Cómo traducir el mensaje de “New Activity” en el formato Grid de Moodle. El quid de la cuestión es que es una imagen. Y dicha imagen hay que crearla para el formato español porque no viene en el módulo. Para ello tenemos que ir a nuestro servidor, por FTP, a la carpeta /course/format/grid/pix Ahí veremos unas imágenes llamadas new_activity_en.png (l a que aparece por defecto), new_activity_fr.png, new_activity_de.png etc. Veréis que no aparece la que acaba en _es. Esa es la que tenemos que crear. Descargamos la imagen new_activity_en.png y la editamos en un programa de edición de imagen como Photoshop o Gimp. Una vez la tenemos a nuestro gusto, la subiemos a la misma carpeta del sevidor con el nombre new_activity_es.png. Una vez hayamos hecho esto, veremos que, si tenemos en Moodle el idioma español, la imagen que nos saldrá será la nueva que hemos creado.

Diseño Web, Gestores de contenidos, Trucos

Cómo cambiar la dirección de correo electrónico de administración en WordPress.

/

La dirección de correo electrónico de administración en WordPress es una dirección que se configura en Ajustes-> Generales. Por defecto es la dirección del administrador que se crea al instalar WordPress. La cuenta la usa WordPress para notificaciones, alertas, avisos de actualizaciones, recordatorio de contraseña de administrador y mucho más. Pero en ocasiones queremos querer cambiarlo. En principio es sencillo, se cambia la dirección de correo desde el panel de aministrador, WordPress le manda una confirmación al nuevo correo y, si este lo confirma, se cambia la dirección. Hoy es explicamos qué podéis hacer si este proceso anterior no funciona. Cómo cambiar la dirección de correo electrónico de administración en WordPress. Os dejamos dos maneras. Por el panel oculto de opciones de WordPress. Como os comentamos, existe un panel “oculto” de opciones avanzadas en WordPress. En él se pueden comprobar varias variables de sistema, y cambiar directamente otras. Entre las que podéis cambiar está la dirección de administración. Sólo tenemos que buscar la opción admin_email , borrar la que hay y poner la nueva. Después vamos a la parte inferior de la página y pinchamos en Guardar. Con esto debería estar solucionado. Si no es así, prueba la opción que sigue. Por base de datos. Como casi todo en WordPress, los parámetros se guardan en la base de datos. Y ahí podemos cambiarlos también. La dirección de administración es una de ellas. Para ello debemos usar un editor tipo phpMyAdmin o similar y entrar en la base de datos. Ahí veremos la tabla xxx_options (normalmente wp_options salvo que hayáis cambiado el prefijo de la base de datos en la instalación). En esa tabla veréis el campo admin_email que se puede cambiar editando el campo y cambiando el valor de option_value por el correo que queremos. Guardamos el cambio y ya debería estar.

Scroll al inicio