Diseño Web

Diseño Web, Trucos

Cómo crear un enlace en tu web para que se abre el Whatsapp del cliente.

Whatsapp es uno de los métodos más comunes que tenemos las empresas para comunicar con los clientes en España. Así que tiene todo el sentido poner el número de WhatsApp en la web. Y ya que lo pones, lo lógico sería poner un enlace para que si pinchen desde el móvil se abra su WhatsApp, y si pinchan desde un PC les lleve al WhatsApp Web. Hoy os enseñamos a crear dicho enlace. Crear un enlace a WhatsApp en tu web. Muchos plugins te permiten poner el icono de WhatsApp, e incluso el número, pero el enlace tienes que crearlo tu mismo. La manera es sencilla, tienes que usar lo que WhatsApp llama Clic to Chat. El enlace es del tipo: https://wa.me/xxxxxxxxxxDonde xxxxxxx es el número en formato internacional. Sin ceros ni + porque eso lo pone él. o La gente que tenga menos experiencia en webs pueden estar preguntando como es crea el enlace en el número. Es básico pero lo ponemos (todos aprendimos en algún lado). Si quieres poner ese enlace al número +3412345678 pon este código: ¡Esperamos que os sirva!

Diseño Web, Información Tecnica

Diferencias entre reCaptcha V2 y reCaptcha V3

A estas alturas todos debéis saber lo que son los Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart), esas preguntas automáticas que se ponen en los formularios de contacto (y similares) para evitar el spam. A lo mejor también sabéis que Google “evolucionó” los Captcha y sacó su famoso reCaptcha. Tal fue su aceptación que es uno de los más usados y, claro, los “malos” han ido descubriendo maneras de “saltarse” el control. Algunas más graciosas que otras. Del reCaptcha versión 1 (una lata para el usuario y que se saltaron en seguida los robots) pasó al versión 2. Si, el “no soy un robot”, que de vez en cuando te hacía preguntas para verificarlo (V2). Esta versión era menos “intrusiva” para el usuario, porque sólo tenías que pinchar en la casilla. Eso era si Google tenía suficiente información para afirmar que no eras un robot. Si no la tenía, te hacía unas preguntas de seguridad (pincha en los semáforos, robots etc) con fotos en modo grid. Muchos usuarios se quejaban de esta segunda prueba, pero lo que era cierto es que permitía eliminar falsos positivos. Si no tenías la puntuación adecuada, podías pasar un segundo test. Para ser más user friendly, reCaptcha V2 incluyó después el “invisible reCaptcha“. Y en esa dirección han continuado con la V3. En la V3, no aparece ningún aviso ni información para el usuario. Funciona como muchos otros detectores de Spam, tu pones una puntuación (0 a 1) en la configuración de la API (en el código que te dan) y cualquier cosa que no supere esa puntuación se considera spam y se bloquea. Poco intrusivo….pero claro, puede bloquear falsos positivos fácilmente. Con esto veis las diferencias principales entre reCaptcha V2 y reCaptcha V3. Versión 2. Más intrusivo. Como mínimo tienes que pinchar en la casilla. Y hay gente que tiene que repetir varias veces las pruebas de las imágenes, llegando a hartarse. Deja dos oportunidades. Si el sistema no te da la puntuación adecuada, puedes pasar el “challenge”, las preguntas. Esto permite que no se bloquee gente que debería pasar. Menos carga en la página (ver versión 3). Versión 3. Más “user friendly“. Cuando todo va bien, el cliente no ve nada. Puedes graduar la puntuación de “spam” del sistema. Antes la establecía Google, ahora puedes ponerla tú e ir variando. Estadísticas. Una de las cosas que quería Google con reCaptcha V3 es que el cliente pudiera capturar datos de su spam a través de la API. Aunque dudo que al final lo use nadie. No hay doble oportunidad para falsos positivos. El sistema los corta y ya está. Aumenta la carga de la página. Para que funcione necesita cargar su código en todas las páginas de tu sitio web. Algo que puede ralentizar tu página. Por defecto deja un logo en todas las páginas de tu web. Se puede quitar…pero por defecto no es muy agradable. GPDR. V3 manda más información (todo el formulario por lo que se lee por ahí) a los servidores de Google, deberías añadir esto en tu política de privacidad. Conclusión Aunque nosotros, por motivos lógicos, al principio pensamos que reCaptcha V3 sustituiría a reCaptcha V2, no es así. Son dos opciones diferentes, V2 continuará y así lo afirma Google. De hecho se podrían usar a la vez. La idea, según Google, es usar V2 para aquellos formularios donde queremos reducir los falsos positivos, pero V3 donde lo que no queremos es molestar mucho al usuario. Como dice Google:” For example, a registration page might still use reCAPTCHA v2 for a higher-friction challenge, whereas more common actions like sign-in, searches, comments, or voting might use reCAPTCHA v3 “ Es decir, podemos usar V2 para formularios de registro, y luego V3 para formularios de comentarios, login etc. Espero que os sirva …porque nosotros tardamos en entederlo.

Diseño Web, Gestores de contenidos, Trucos

Cómo reducir o eliminar el Spam en Contact Form 7

Contact Form 7 es, sin duda, junto a Ninja Forms, uno de los plugins de formulario de contacto más usados. Y, por lo tanto, una de las preguntas que más nos hacen, es cómo reducir o eliminar el spam con Contact Form 7.Hoy os dejamos algunos trucos. Lo ‘primero es decir que, como todas las “infecciones” o el malware en informática, no hay un sólo método ni nada 100% eficaz. La idea general en seguridad es crear diferentes capas que vayan filtrando, cada una con diferente eficacia hacia diferente tipos de infecciones, hasta dejar pasar sólo lo legítimo. Lo segundo es decir que, también como regla general, cuando más seguro algo sea informáticamente hablando, también es: a) más intrusivo y menos cómodo para el usuario. b) Más probabilidades hay que genere “falsos positivos” y bloquee contenido legítimo. Lo mejor es siempre hace un equilibrio entre “usabilidad” y seguridad. E ir probando varias soluciones en capas para ver cual nos da mejor resultado. Métodos para reducir el spam en formularios de Contact Form 7 en WordPress. Nosotros os recomendamos los siguientes métodos (nosotros solemos ponerlos en este orden…pero el orden no es realmente importante). Como hemos dicho antes, mejor “en capas”, y mejor realizar primero una, ver los resultados, luego otra, ver etc. Y detenerse cuando la cantidad de spam sea “aceptable”. Activar un Honeypot. Hace unos días os explicamos cómo activar un Honeypot para CF7. Este es un método “invisible” para los usuarios, porque añade un campo que estos no ven, pero que los robots si. Si el campo se rellena se considera que es un robot. Obviamente muchos programas ya tienen mecanismos para evitar este sistema, pero cortará a los que no. Quizzes. Son pequeñas preguntas que a un robot le resulte difícil de contestar. Preguntas como: – “¿De qué color es la leche” – “¿Cuantas patas tiene una vaca?” Etc… Puedes poner la que se te ocurra, pero que un robot no pueda calcular.Obviamente si usan IA pueden deducirlas mejor, pero de nuevo quitamos a todos los robots que no lo hagan.Pronto os enseñaremos cómo hacerlo con Contact Form 7. Captcha. Ya los conocéis, las típicas preguntas automáticas de seguridad. Parecido a lo anterior pero normalmente con un plugin o un servicio externo.CF7 ya no recomienda Really Simple Catcha y recomienda reCaptcha de Google. Podéis usar V2 o V3. Pronto os explicaremos que no es lo mismo, y no sirven para lo mismo.Nosotros solemos usar los Captcha como último recurso porque suelen ser bastante intrusivos y acaban cansando a los usuarios. Además, obviamente los que diseñan los robots estudian cómo romper estos sistemas continuamente, debido a su uso extendido. También podéis usar plugins especializados como Askimet…pero ya son métodos de pago. Así que probad, elegid y, como os recomendamos, no creáis que hay una solución perfecta, ni universal. Es añadir capas gradualmente hasta reducir la entrada de spam a algo “aceptable”.

Diseño Web, Gestores de contenidos

Añadir un recargo en métodos de pago de WooCommerce. Por ejemplo en Paypal.

Llevar una tienda online no es fácil. Muchos servicios conllevan unas comisiones que son difíciles de asumir por los pequeños márgenes de los que disponen los comerciantes. En ocasiones, estas comisiones hay que cargárselas al cliente. No queda más remedio (nadie quiere hacerlo per se).Hoy vamos a enseñaros a añadir un recargo en métodos de pagos en WooCommerce. Para ello vamos usar el ejemplo de Paypal. Paypal cobra actualmente 2,9% +0,35€ por transacción. Así que muchos comerciantes optan por añadir un recargo en este sistema de pagos. NOTA: en teoría esto está prohibido en las condiciones de pago de PayPal (punto 5.4, “No aplicará ningún recargo por el uso de PayPal“). Pero sigue siendo una práctica habitual.Obviamente…la responsabilidad de las penalizaciones de PayPal por activar este recargo no son responsabilidad nuestra (sólo enseñamos que es posible). Cómo añadir un recargo en PayPal. Vamos a usar el plugin WooCommerce Pay for Payment. Este plugin te permite añadir un recargo porcentual y/o un recargo fijo en cada uno de los métodos de pago. Calcula primero la parte porcentual y luego añade la parte fija. Para añadirlo en PayPal tenemos que: ir a WooCommerce->Ajustes->Pagos Veremos que ya tenemos una columna llamada Cargo Adicional. Pinchamos en Gestionar. Cerca de la mitad tenemos una sección llamada “Cargo Adicional“. Ahí tenemos que añadir: – El nombre que aparecerá cuando apliquemos el recargo. – El recargo fijo. – La parte proporcional. -Si incluye que impuestos y que tipo de impuesto. Con esto sólo tenéis que hacer pruebas y ver que aparece correctamente en todas las secciones de la tienda.

Diseño Web, Gestores de contenidos, Trucos

Plugin Honeypot para Contact Form 7. Reduce el spam.

Una de las maneras de reducir la cantidad de spam que llega a través del plugin Contact Form 7 es este plugin del que vamos a hablar hoy: Honeypot for Contact Form 7. Además, es una de las primeras cosas a probar, porque es invisible para los usuarios, y sólo intenta captar a los robots en su trampa. Honeypot for Contact Form 7. El funcionamiento del plugin es muy sencillo, añade un campo “trampa” que oculta a los usuarios normales. Los robots que no estén programados para identificar esta trampa (las cosas van avanzando), rellenan el campo, como harían con cualquier otro. El plugin identifica como spam y no manda, cualquier contacto que rellene este formulario (porque un “humano” no podría hacerlo). La instalación es como la de cualquier otro módulo, pero la configuración implica algo más. Cuando tengáis el plugin instalado, aparece el campo “honeypot” entre los campos disponibles para elegir. La manera de configurarlo es: Seleccionar el campo Honeypot. Conviene que lo pongáis en medio del formulario, no al principio ni al final. En las opciones, cambiad el nombre de la etiqueta (que por defecto es honeypot-xxx) para reducir las posibilidades que lo detecten. Lo demás no hay que tocarlo, él se encarga de ocultar ese campo. Si queremos podemos marcar la casilla de llevar el CSS al footer, para confundir todavía más a los robots (haciendo que la parte que oculta este campo no esté al lado del campo). En este vídeo mostramos cómo se instala y configura. ¿Es la panacea? No, seguramente te seguirá entrando spam por ese formulario. Pero es una primera “valla” que reducirá la entrada de correos no deseados. Y además: es INVISIBLE para el usuario. es fácil de instalar. se puede combinar con otras medidas anti-spam.

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

Permisos de carpetas y archivos en WordPress

Una pregunta que nos hacen, y nos hacemos muy a menudo: ¿qué permisos necesita WordPress en el servidor para funcionar? Lo primero que hay que tener en cuenta es que esto depende mucho de la configuración del servidor web (Apache, Nginx…) el modo de funcionar etc. Es decir hay muchas configuraciones que pueden afectar a esto. Hablaremos de manera genérica. Nota: el cambio de permisos podéis hacerlos por ssh o por FTP. En breve haremos un vídeo sobre cómo cambiarlos por FTP. Permisos de que necesita WordPress en archivos y carpetas. En la mayoría de los casos: 755 para carpetas y 644 para archivos. En ciertos casos donde la configuración del hosting no está bien realizada, o donde varios usuarios suben ficheros por FTP los mejores permisos son 775 para carpetas y 664 para archivos. En ciertas ocasiones cambiar estos permisos no resuelve los problemas en WordPress porque hay problema de usuarios y grupos en la configuración del hosting. Normalmente el usuario de las carpetas no coincide con el usuario de Apache. Eso debe resolverlo el que gestione el servidor.

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

WordPress no para de pedir usuario y contraseña de FTP.

Problema. En ocasiones nos hemos encontrado con este problema en algún cliente. Estás en el backend (administración), y para acceder algunos apartados pide usuario y contraseña de FTP. Además, cuando intentas instalar un plugin, no deja porque no tiene las credenciales de FTP. Causa y solución. La causa del problema es que los permisos están mal. configurados en este hosting. Pueden ser los permisos de las carpetas (deberían ser 755 directorios y 644 ficheros en la mayoría de los casos) o que el usuario en que se ejecuta la web no tiene permiso para escribir en el directorio. Obviamente ambos están relacionados, pero por temas de seguridad, no podemos dar cualquier permiso a WordPress. Lo primero a probar como solución sería cambiar los permisos por FTP. Grabaremos un vídeo sobre esto, pero es fácil asignar los que hemos dicho más arriba. Si aún así no funciona, lo que debemos hacer es que los administradores del alojamiento nos corrijan el usuario y grupo de los directorios de nuestra web. Deben ser los que corre Apache o el usuario web bajo los que corre Apache. Con este usuario, y los permisos adecuados, WordPress no da problemas. PERO, los administradores puede tardar un tiempo en solucionar este problema, y mientras tanto necesitamos actualizar o instalar componentes. En este caso os damos dos soluciones provisionales. Ambas deberían ser provisionales, y sólo mientras instalamos o actualizamos (luego las quitamos). Si no podemos tener problemas de seguridad. Añadir la siguiente línea a wp-config.phpdefine(‘FS_METHOD’,’direct’); Lo puedes poner debajo de DB_COLLATEPuedes ver más información aquí. Directo fuerza Direct File I/O  en php al transferir ficheros, y a guardarlos con el usuario de Apache,Pero puede abrir agujeros de seguridad si el servidor no está bien configurado.Así que ponemos esta línea, guardamos y deberíamos poder actualizar e instalar lo que queramos desde el backend.Cuando acabemos, quitamos la línea de nuevo. Configurar usuario y contraseña de FTP en wp-config.De nuevo esto crea riesgos de seguridad porque están los datos de FTP en un fichero al que pueden acceder los usuarios (si está mal configurado).Añadimos lo siguiente al fichero (sólo la parte en negrita): define(‘FTP_HOST’, ‘ftp.MIDOMINIO.com’);  > Servidor de FTPdefine(‘FTP_USER’, ‘USUARIO_FTP’);  > usuario FTPdefine(‘FTP_PASS’, ‘LA_CONTRASEÑA’);  >contraseña FTPdefine( ‘FTP_BASE’, ‘/httpdocs/wp/’ );  > Directorio donde tenemos instalado wordpressdefine(‘FTP_SSL’, false); > solo en el caso que tengamos SFTP De nuevo lo quitamos al acabar.

Diseño Web, Gestores de contenidos, Soporte

Las páginas protegidas con contraseña no funcionan en WordPress con caché (plugin, Cloudfront o Cloudflare).

Recientemente hemos estado peleando con esto, y os dejamos la solución. Problema. El problema detectado es que no te funcionan las páginas protegidas con contraseña en WordPress. En nuestro caso por más que ponías la contraseña correcta en algunas páginas te la volvía a preguntar. En otras páginas simplemente aparecía el texto sin poner la contraseña. Causa. Para entender lo que está pasando hay que comprender cómo funcionan las páginas protegidas por contraseña en WordPress. Cuando proteges una página, y el usuario pone la contraseña, el truco es que WordPress la comprueba, guarda la contraseña en una cookie llamada wp-postpass_COOKIEHASH donde COOKIEHASH es un número generado (un hash).Para ello va a la url wp-login.php?action=postpass Las causas del error pueden ser varias: Se ha modificado el wp-login.php (por ejemplo para cambiar el acceso de usuario) o alguna redirección o bloqueo no deja llegar a esa página. En tal caso no puede comprobar la contraseña y no funciona.Prueba a acceder a tudominio/wp-login.php para ver si funciona. Se está impidiendo acceder o guardar la cookie wp-postpass_*Esto suele ser por un CDN o caché, lo vemos más adelante. El caché está guardando esta cookie demasiado tiempo y la contraseña ha cambiado.Cambia los tiempos de expiración de las cookies (en concreto la que hemos dicho). La configuración del servidor o de la web está impidiendo que de la página vaya a wp-login y vuelva a la página. Esto está relacionado con los “HTTP referrers“. En estos casos dejando pasar estos en el firewall o quitando cosas como <meta name=”referrer” content=”no-referrer”> de la web se arregla. Obviamente hay alguna causa más pero esto son los principales. Solución si tienes CDN o caché tipo Cloudfront de Amazon o Cloudflare. Si estás trabajando con Cloudfront de Amazon o Cloudflare, la causa seguramente será la cookie. En este caso tienes que ir a la configuración de tu CDN y decir que deje pasar (whitelist) la cookie wp-postpass_*. En Amazon Cloudfront por ejemplo funciona así. Pero debería funcionar en cualquier CDN o plugin de caché. Comprueba también que los HTTP referrer no los está eliminando el CDN, es decir que los deje pasar como los manda el origen (muchos CDN eliminan los headers). Esperamos que con esto se os quiten muchos dolores de cabeza porque es un error de los “raros”.

Diseño Web, Gestores de contenidos

Los sliders no están permitiendo Videos con Autoplay con sonido por restricciones de los navegadores.

Hace unos días, en la web de un cliente, intentamos poner un vídeo para que se ejecutara automáticamente al cargar la página (Autoplay). Pero no conseguíamos que se escuchara el sonido. Después de darle unas cuantas vueltas, e investigar un poco, descubrimos la causa y os la dejamos aquí por si os pasa (o nos pasa de nuevo a nosotros). Parece ser que los plugins de slider más comunes, están deshabilitando el sonido en el Autoplay, por restricciones de los navegadores.Los navegadores están intentando “mejorar la experiencia del usuario”, y los usuarios encontraban molesto el que se cargaran las páginas con sonido. Así que han deshabilitado esta opción. Como podéis ver aquí, siempre se permitirá el Autoplay SIN sonido, pero con sonido sólo en ciertos casos muy concretos. Como dice Google “a los usuarios les va a encantar”. A los desarrolladores, y a los clientes, no tanto.

Diseño Web, Gestores de contenidos, Seguridad

WPScan: base de datos de vulnerabilidades de WordPress con plugin y API para escanear tu web (y otras).

Para aquellos que os preocupa la seguridad de vuestros sitios en WordPress, hoy os dejamos una gran herramienta. WPScan es una base de datos de vulnerabilidades de WordPress (página oficial aquí). Es decir, van almacenando todos los fallos tanto de core como de temas y plugin de este gestor de contenidos. En cada fallo puedes ver su severidad, referencias, guía de tiempos e información adicional.También permite informar de vulnerabilidades. Esta funcionalidad ya lo haría un gran recurso, pero es que además tiene dos otras muy útiles. Plugin de WordPress para poder escanear tu página web basándose en esta base de datos. Obviamente útil para usuarios de WordPress y diseñadores web. API para poder usar la base de datos externamente. Esto te permite usarla desde tu ordenador o desde un servidor y escanear cualquier página.Muy útil para desarrolladores y expertos en seguridad. Y también para los “hackers”. Con todo está claro que es una herramienta de seguridad muy potente (forma parte de la mayoría de las distribuciones de seguridad y pentesting), y que en malas manos puede ser el mejor aliado del hacker. De hecho si buscas “WPScan WordPress” en Google, obtendrás muchos resultados sobre cómo “hackear WordPress con WPScan”. Porque con esta herramienta podemos analizar cualquier web hecha en WP, y nos dirá todas la información sobre sus versiones, plugins, usuarios (si puede), temas. Con esa información, probará las vulnerabilidades conocidas de cada una y te dirá cuales ha encontrado. Para un hacker es como un amigo que te dice “los agujeros están aquí y aquí”.Para un desarrollador (nosotros) una manera de reforzar la seguridad de su sitio en WordPress. Vosotros decidís cómo usarlo.

Scroll al inicio