Diseño Web

Diseño Web, Gestores de contenidos

WooCommerce Redsys Gateway Light. Plugin oficial gratis para Redsys.

Hace tres años comentamos que Redsys proporciona, en su sección descargas, el plugin para WooCommerce. No es que lo actualicen mucho, y es algo pesado, pero funciona. Eso si, a mi personalmente no me da mucha confianza por esa falta de actualización y cómo afecta al rendimiento de las páginas. Por eso ayer me alegré cuando conocí este plugin oficial de WooCommerce para Redsys: WooCommerce Redsys Gateway Light. WooCommerce tiene un plugin de pago, la versión PRO, pero han sacado la light y me parece un acierto. Porque al fin y al cabo las tiendas online viven de los medios de pago. Así que tiene todo el sentido facilitar estos plugins. Pero llevan un coste y un trabajo. La solución razonable es proporcionar una versión light gratis y, en cuanto se necesiten funcionalidades algo más avanzadas, ofrecer la de pago. Os dejamos este plugin, que hemos probado y funciona muy bien. Por cierto, si los pedidos se os quedan en pendiente en vez de procesando probad a: desmarcar la casilla de “Activa compatibilidad con certificados SNI.” Desactivar plugins de cache o de seguridad.

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

Cómo habilitar el acceso de invitados en Moodle con y sin contraseña.

Una de las desventajas que tiene Moodle es que para acceder a sus cursos, por defecto, hay que estar registrado. Se puede habilitar el acceso de invitado (y hoy os vamos a enseñar) con y sin contraseña. El acceso de invitado implica dos pasos. Hay que hacer ambos, aunque el primero normalmente sólo una vez: Habilitar el acceso de invitados en el sistema Moodle. Habilitar el acceso de invitados en el curso en concreto. Habilitar el acceso en Moodle. Sigamos los siguientes pasos: Habilitar el acceso de invitado en el sitio. Vamos a Administración > Administración del sitio > Extensiones > Matriculaciones > Gestionar plugins de MatriculaciónAhí tenemos que asegurarnos que el Método acceso de Invitado está habilitado.Nota: podemos pinchar en Configuración para poner la configuración por defecto para todos los cursos. Habilitar el botón de acceso de invitados (optativo). Administración del sitio > Extensiones >Identificación >Gestionar identificaciónPoner el Botón de entrada para invitados en Mostrar. Permitir el acceso directo para invitados (optativo). Con la opción 2. ponemos un botón para que el invitado pinche y entre en el curso. Esto a veces es poco agradable para usuarios que no encuentran el botón.Si quieres que entren directamente, o quieres configurar accesos con contraseña, puedes habilitar esta opción. Ve a Administración del sitio > Usuarios > Permisos > Políticas del usuario y marca la opción Acceso automático de invitados. Habilitar el acceso de invitado por curso. Una vez el sistema tiene habilitado el acceso, hay que activarlo en cada curso. Para ello hay que ir, en el curso, a Administración > Administración del curso > Usuarios> Métodos de matriculación En esta opción podemos pinchar en la rueda dentada y seleccionar una contraseña. Por lo tanto, según lo configuremos tendríamos estos tres casos principales: Ponemos el acceso en el curso sin contraseña y el botón de invitado en mostrar. Sin acceso directo. Así el usuario invitado va, pincha en el botón y entra directamente. Marcamos la opción de acceso directo y en el curso ponemos el acceso de invitado sin contraseña. Los usuarios entrarían directamente sin pinchar en nada. Marcamos la opción de acceso directo y en el curso ponemos el acceso de invitado con contraseña. Así el usuario pinchará en el enlace y le pedirá una contraseña de acceso. NOTA IMPORTANTE. Moodle no permite acceso de invitado a actividades, ejercicios etc. Si a teoría pero no a la práctica. Porque no puede almacenar los datos en ningún usuario. Esto limita que permitamos dar acceso “gratis” a clientes. En ciertas actividades podemos dar acceso modificando permisos del usuario invitado. Hay que ir a: Administración del sitio > Usuarios > Permisos > Definir roles Y ahí asignar el permiso que queramos. Más información aquí.

Diseño Web, Trucos

Como añadir iconos de Fontawesome por CSS

Fontawesome es una página web con una serie de iconos, gratuitos y de pago, que usan muchas páginas. La manera más usual de usar estos iconos es por html. Sólo tienes que ir a la páginas de iconos, pinchar en que te muestre el código y te lo da. Por ejemplo el del icono del mouse sería: Sin embargo, hay ocasiones que queremos añadir estos iconos sobre elementos html que ya están hechos y no podemos modificar (como plantillas o plugins). Para eso podemos usar este truco de CSS que vamos a mostraros hoy. Vamos a usar lo que os enseñamos en este artículo de poner contenido por CSS. Poner iconos de Fontawesome por CSS. Lo que vamos a hacer es usar este Cheat Sheet que proporciona el propi FontAwesesome. Como veis cada icono viene con un código. En la clase o ID que vayamos a modificar (llamémosle ejemplo) vamos a poner o un elemento before o after (voy a usar un before). Os hemos puesto el icono del ratón en este ejemplo : .ejemplo::before { content: “\f8cc”; font-family: ” Font Awesome 5 Free “;} Observad que el código del icono va entre comillas y precedido de un \. Y que hay que usar la familia de fuentes adecuada. Obviamente podemos poner todo el resto de elementos de altura que queramos. Recordar que es como una fuente así que modificamos el tamaño y color como una fuente. Os lo mostramos en un ejemplo en el vídeo:

Diseño Web, Trucos

Nginx: too many redirects al redirigir http a https

Este caso lo tuvimos hace unos días. Es una tontería, pero te puede hacer perder un tiempo innecesario. Teníamos una web en Nginx donde queríamos redirigir todos los http (puerto 80) a https (puerto 443). Esto es bastante sencillo, sólo hay que poner la línea: return 301 https://$host$request_uri; O, si quieres sólo una página en concreto: return 301 https://tudominio.com$request_uri; El problema es que, cuando activábamos esto, aunque Nginx en el test decía que todo bien, al reiniciar nos daba el error de “Too many redirects“. Solución. La solución es sencilla, seguramente tienes puesto http y https en el mismo bloque de Nginx, y está intentando redirigir ambas peticiones.Es decir las peticiones al 80 se redirigen al 443, y estas se vuelven a redirigir. Tendrás algo como: Lo que tienes que hacer es dividir esto en dos bloques, para que sólo se redirijan las peticiones al puerto 80.

Diseño Web, Gestores de contenidos, Trucos

Preseleccionar el valor de un campo select en Contact Form 7 mandándolo por una url.

Hoy vamos a explicar un truco con CF7 de WordPress que no está en su documentación. Imaginaos que tenemos un formulario en WordPress con un campo select (un desplegable con opciones).Lo más normal es que el usuario elija la opción que quiere.Pero, ¿y si quieres que dicho desplazamiento se preseleccione dependiendo de la página de la que venga? Por ejemplo, el desplegable puede ser un selector de departamentos, como el que os mostramos el otro día. Y queremos que, dependiendo de la página de la que venga, esta opción ya esté seleccionada con el departamento adecuado. La solución es sencilla pero, como decimos, no está documentada en ningún sitio y hemos tenido que hacer un poco de prueba y error. Hay que hacer dos cosas: Cambiar el código del select en el formulario para incluir el que, por defecto, le llegue el valor por get.Así que campo que en el artículo antes mencionado era: [select* Departamentos “Opción 1|correo1@dominio1.es” “Opción 2|correo2@dominio2.es” “Opción 3|correo3@dominio3.es”] Pasará a ser: [select* Departamentos default:get “Opción 1|correo1@dominio1.es” “Opción 2|correo2@dominio2.es” “Opción 3|correo3@dominio3.es”] Ahora tenemos que poner el enlace que ponemos y añadirle el valor del campo que queremos añadir.Por ejemplo, si suponemos que hemos puesto el formulario en la página de contacto, desde otra podemos preseleccionar la Opción 1 con: Como veis ponemos el valor del campo que queremos, pero en formato url. Lo más sencillo es que uséis herramientas como esta para convertir del texto a url.

Diseño Web, Gestores de contenidos

Cambiar la foto de usuario en WordPress con WP User Avatar.

Curiósamente este es un plugin que llevamos usando desde hace AÑOS, casi desde que empezamos con WordPress, y no hemos hablado de él hasta ahora. Se lo debíamos. Por defecto WordPress sólo deja poner las fotos de perfil que tienes en Gravatar, un sitio online para subir fotos de perfil. Pero puede que quieras usar una foto local, de la carpeta medios de tu WordPress. Y poder personalizarlo. Os enseñamos a hacerlo. Cómo cambiar la foto de perfil en WordPress. El plugin que vamos a usar se llama WP User Avatar. Es un plugin gratuito que te permite: Usar una imagen que subas a tu WordPress como foto de perfil. Fotos personalizadas por usuario. Poner una foto por defecto, o un icono por defecto que escojas tú, si un usuario no tiene foto de perfil asignada. Tiene shortcodes para poder crear páginas donde la gente suba sus fotos de perfil, o para mostrar la foto de perfil donde quieras. Puedes deshabilitar Gravatar. Sencillo, pero muy útil.

Diseño Web, Gestores de contenidos, Trucos

Cómo poder elegir el destinatario en un formulario de Contact Form 7 con un desplegable en WordPress.

Normalmente los formularios de Contact Form 7 suelen tener un sólo destinatario. PERO, en una empresa, suele ser habitual crear formularios que pueden ir a diferentes departamentos. Es decir, queremos crear un formulario de atención al cliente en el que el usuario pueda, mediante un campo desplegable, la dirección o el departamento al que enviar el formulario.Hoy os enseñamos a hacerlo. Crear un desplegable para seleccionar el destinatario en Contact Form 7. Para poder crear un desplegable desde el que seleccionar el destinatario de un formulario con CF7 tenemos que hacer lo siguiente. Creamos un campo “menú desplegable“. En el cuadro Opciones ponemos, línea por línea, el texto a mostrar en cada opción del desplegable y el correo del destinatario, separados por un pipe.Por ejemplo: Opción1|correo@dominio.esOpción2|correo2@dominio2.es Pon que el campo sea obligatorio (hay una casilla de verificación), porque destinatario tiene que haber. Llama el campo de una manera que te acuerdes donde pone Nombre . Por ejemplo Departamentos. Opcional. A mi me gusta que el primer campo sea blanco, para que la persona no tenga opción hasta que la elija. Puedes hacerlo poniendo como primera opción ” ” (que es un espacio en blanco) o en el código con la opción include_blank (lo mostramos en los ejemplos). El código resultante debería ser algo como: [select* Departamentos “Opción 1|correo1@dominio1.es” “Opción 2|correo2@dominio2.es” “Opción 3|correo3@dominio3.es”] Por último hay que ir a la pestaña Correo electrónico del formulario y, en Para poner el campo del selector. En nuestro ejemplo [Departamentos] Os lo mostramos en el siguiente vídeo.

Diseño Web, Mac, Soporte, Trucos

Cómo editar el fichero hosts en Mac.

El fichero hosts es un fichero en el ordenador que te permite apuntar las páginas web a las direcciones IP que quieras. Esto es útil si estás diseñando una web en un servidor de prueba (o en tu ordenador) o si quieres impedir que alguien vaya a una página web en concreto. Os hemos enseñando a editarlo en Windows de varias maneras, hoy os enseñamos en Mac. Editar el fichero hosts en Mac. Os dejamos dos procesos que os explicamos en el vídeo. Abriendo un terminal y editando el fichero que está en la ruta /private/etc. Así que el comando sería: Si no te atreves a usar el termina, puedes abrir Finder, menú Ir y buscar Ir a.Ahí poner la ruta : /private/etc y buscar el fichero hosts.No vas a poder editarlo ahí. Cópialo en otro sitio. Edítalo, y luego copia y pégalo en al ruta original.Te pedira usuario y contraseña de administrador porque la ruta es un sitio donde sólo los administradores tienen acceso.

Diseño Web, Gestores de contenidos, Información Tecnica

Juegos para aprender conceptos de CSS como Flexbox, Grid o selectores.

Si estás aprendiendo CSS, una buena manera es jugando. Os dejamos unos cuantos juegos web para aprender, repasar o afianzar ciertos conceptos de CSS. Selectores CSS. Aprender a manejar los selectores de CSS es muy importante, ya que nos ayuda a asignar nuestro código a los elementos que queremos. CSS Diner es un juego en el que te va a pedir que selecciones, mediante código CSS, los elementos que te piden. Tienes 32 niveles con dificultad ascendente, así que está muy completo. Grid. Poner los elementos en Grid, con filas, columnas y celdas, es algo muy común en las páginas web. Así que controlar su uso es treméndamente útil. CSS Garden tiene 28 niveles de dificultad en los cuales podrás aprender a manejar este elemento CSS. Flexbox. Otro elemento muy importante en las páginas de hoy en día: Flexbox (más info aquí y aquí ). Te permite colocar los elementos donde quieras en tu pantalla, y de modo “responsive” (adaptable a varios dispositivos). Del mismo creador que el juego anterior tenemos FlexboxFroggy. Probadlo, es excelente (24 niveles). También tenéis Flexboxdefense para manejar otros elementos de Flexbox.

Diseño Web, Gestores de contenidos, Trucos

Cómo cambiar el texto “Oferta” en Woocomerce.

Tenéis una tienda en WooCommerce y no os gusta el texto Oferta. Queréis poner algo más “vendible”, como “Promoción”, “Super Oferta” o similar. ¿Cómo se hace?Hoy os lo explicamos. Cómo cambiar el texto Oferta en tu tienda de Woocommerce. Si quieres cambiar ese texto te dejamos dos opciones: Traducirlo con Loco Translate (o similar). Una opción muy sencilla, que no requiere conocimientos previos, es usar un plugin de traducción de plugins y temas. Nosotros usamos Loco Translate. Sólo tienes que instalarlo, buscar “Traducción de Plugins”, elegir Woocommerce y buscar “Oferta”. Veréis el término en Inglés y que está traducido por “Oferta”. Cambiáis esto último por lo que queréis, y comprobáis que se cambia en el frontend.Fácil y rápido. Además permite que cualquier persona lo modifique (como un cliente). Con un Snippet. Se puede usar un código y añadirlo a tus Snippets o al functions de tu tema hijo.Os dejamos un Snippet posible (página del autor aquí). No lo hemos probado pero debería funcionar sin problemas.

Scroll al inicio