Gestores de contenidos

Diseño Web, Gestores de contenidos, Seguridad

Firewall para .htaccess de Apache nG y firewall para WordPress BBQ: Block Bad Queries

Muchos de los ataques a páginas web son por scripts o robots que primero “inspeccionan” la web para ver sus vulnerabilidades. Preguntan cosas como la versión del gestor de contenidos, versión de php etc. Están buscando agujeros de seguridad, y ocurre constántemente. Por esto nos gusta este firewall que hemos encontrado para .htacess (Apache). El creador ha recopilado una serie de peticiones o queries que son maliciosas y con contenido potencialmente dañino (como  eval(, base64_ ..), y ha creado una lista para que podamos bloquearlas. Lo interesante es que este bloqueo se realiza a nivel de servidor, antes del acceso a la página. Así que, al bloquear estos intentos de acceso, también mejora el rendimiento de la misma. nG Firewall, como decimos, es una lista de queries maliciosas que, en el momento de escribir el artículo está en su versión 6G. La manera de implementarlo en cualquier web es sencillo, añade la lista de exclusiones que da a tu fichero .htaccess. El Apache, al leerlas, se encargará de bloquear estos accesos indebidos.La lista está dividida en secciones, y puedes añadir todas, o sólo alguna de las secciones (son independientes). Aunque están muy probadas, mira el artículo de tu nG antes sobre las notas de implementación y su sección de troubleshooting. # 6G:[QUERY STRING] # 6G:[REQUEST METHOD]# 6G:[REFERRER] # 6G:[REQUEST STRING] # 6G:[USER AGENT] # 6G:[IP ADDRESS] Firewall ligero para WordPress: BBQ: Block Bad Queries Si tienes WordPress, es más fácil implementar este firewall. Puede servir tanto como capa añadida de seguridad a lo que tengas de firewall, o como solución ligera y sencilla para aquellos a los que el alojamiento o los conocimientos no les deje usar soluciones más complejas. BBQ: Block Bad Queries implementa el firewall nG, con añadidos que te permite gestionarlo de modo gráfico. Un plugin muy interesante a tener muy en cuenta.

Diseño Web, Gestores de contenidos, Trucos

Cómo enlazar un producto de WooCommerce a otra página de tu web o externa.

Nos han pedido recientemente, que el enlace de algunos de los productos de su tienda WooCommerce, vaya directamente a una página externa.WooCoomerce tiene algo parecido, los productos externos o de afiliados, pero para ir al enlace tienes que entrar en el producto. La idea es que al pinchar en la imagen de cualquier página donde esté listado el producto, esta te lleve al enlace externo. Cómo enlazar productos de WooCommerce con páginas externas. El proceso consta de dos pasos. Lo primero es que, en nuestra solución (mencionaremos otras) creemos los productos como externos con la opción de producto de WooCommerce y pongamos ahí la url.Nos ha parecido más sencillo y cómodo para los usuarios así. La segunda es crear un Snippet (como siempre puedes editar functions.php de tu tema hijo también) que detecte si son productos externos y cambie la url por la personalizada. Os dejamos este posible código: add_filter( ‘woocommerce_loop_product_link’, ‘cambiar_permalink_prod_externo’, 99, 2 ); function cambiar_permalink_prod_externo ( $link, $product ) {$this_product_id = $product->get_id();if ($product->is_type( ‘external’ ))$link = $product->add_to_cart_url();return $link;} Este Snippet podemos modificarlo de muchas maneras: Cambiar el enlace sólo para unos artículos (ponemos como ejemplo un enlace interno): if( $this_product_id=== 25 ) $link= ‘/enlaceinterno’;return$link; Poniendo un campo personalizado en el producto, por ejemplo con ACF, y su valor como URL. Espero que os sirva. Mejora 2021. Un cliente nos pidió que los enlaces externos se abrieran en una nueva pestaña. Aquí tenéis la modificación.

Diseño Web, Gestores de contenidos, Seguridad

Proteger la carpeta de administrador de Prestashop con una contraseña adicional por .htaccess y .htpasswd

Prestashop tiene unas medidas básicas de seguridad, como ponerle un nombre aleatorio a la carpeta de administrador (adminXXXX). Pero si quieres asegurar algo más tu tienda, puedes añadir otra capa de seguridad: una contraseña adicional.Con el método de este artículo, cuando un usuario intente entrar en la dirección https.//tudominio.com/adminXXX el navegador mostrará una ventana emergente pidiendo un usuario y contraseña que es independiente de la web, se configura en el servidor. Así que, aunque te hayan descubierto los datos de usuario y contraseña de la web (de alguna otra manera), no podrían entrar en tu backend. Cómo proteger la carpeta de administrador. El proceso es el siguiente: Creamos un fichero llamado .htpasswd en algún lugar de nuestro servidor (fuera de las carpetas de la web es mejor, para que no puedan descubrirlo hackeando la web. El contenido está encriptado, lo podemos crear con una web como esta (o esta). Sólo copiamos el contenido que nos da al final, tras poner el usuario, la contraseña y dar a Create .htpasswd file. Una vez generado el fichero, vamos a la carpeta de administrador del Prestashop y creamos un fichero llamado .htaccess con el siguiente contenido.AuthType Basic AuthName “Acceso restringido con contraseña” AuthUserFile /home/user/.htpasswds/public_html/wp-admin/.htpasswd require valid-user AuthUserFile tiene la ruta del fichero .htpasswd Es importante que el usuario web tiene que poder leer el fichero htpasswd. Comprueba los permisos de htacess y htpassd si tienes errores. Ahora cuando intentes entrar te pedirá una contraseña previa. Buen método para mejorar la seguridad de tu Prestashop. Cuando hagas esto puede dejar de funcionar alguna función de tu web dependiendo de si esta requiere un fichero en ese directorio (no debiera pero cada web es diferente). Si es así, sólo hay que excluirlo. También por .htaccess podemos limitar el acceso sólo a una IP (o denegar otras). Por ejemplo: order deny,allow allow from XXX.XXX.XXX.XXX (tu ip) deny from all

Diseño Web, Gestores de contenidos

Simple Membership: excelente plugin de WordPress para gestión de miembros gratuitos y de pago.

Tras probar muchos, llevamos unos días usando este plugin gratuito de WordPress y, la verdad, estamos muy contentos con todas sus opciones. Simple Membership es el típico plugin para gestión de “membresías“. Es decir para crear contenido protegido para ciertos usuarios dependiendo de su nivel de suscripción. El plugin te permite crear “niveles de membresía” y gestionar que algunas sean gratuitas y otras de pago. Pero tiene muchísimas opciones adicionales como: Poder mandar correo de confirmación. Registro de usuarios en el propio plugin independiente (o sincronizable) de WordPress. Pagos recurrentes y únicos por Paypal o Stripe. Registro de pagos en el propio plugin. API para desarrolladores Widget para barras laterales. Shortcodes generales y para tipos de membresía. Caducidad de las membresías. Protección de contenido personalizable en cada entrada (incluso tipos custom), categoría o página. Pero también permite proteger por defecto todas las categorías, incluso aquellas que crean otros plugins. Registro en el panel del contenido protegido. Plugin gratuito para redirigir tras el login. Plugin de pago para configurar el formulario de registro. Muchos otros plugins gratis y de pago. Integración por plugin con MailChimp. WooCommerce, reCaptcha y mucho más. Una documentación útil con muchas soluciones que demandamos los usuarios. Muchas opciones de configuración de urls, redirecciones e e-mails a clientes. La verdad es que todos lo que hemos pedido de este plugin lo hemos podido solucionar sin desarrollos extra y, como mucho, adquiriendo plugins de pago (se lo merecen). Una gran opción si quieres un sitio con registro de usuarios y contenido restringido en varios niveles.

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

RGPD: guardar un registro de la aceptación de políticas para cada usuario con Contact Form 7 en WordPress.

Desde que salió la nueva RGPD, los expertos han ido variando los criterios que debemos implementar en los formularios de la web. Nosotros, nos guiamos por ellos y aquí vamos indicando cómo implementar sus indicaciones. En este caso hablamos de guardar el registro de las aceptaciones de la política de privacidad para cada usuario. Como técnicamente no se puede enviar el formulario sin aceptar dichas condiciones, al principio muchos no lo consideraban importante. Pero ahora muchos creen que sí. Y nosotros, ante la duda, preferimos cumplir todos los requisitos. Mejor prevenir que curar.Así que tenemos que guardar un registro de que el usuario haya aceptado la política de privacidad al enviar el correo. Os indicamos ´como hacerlo con Contact Form 7 (el más usado) en WordPress. Cómo guardar el registro del apartado de la casilla de aceptación con Contact Form 7. Hay dos maneras de realizar esto (se pueden implementar ambas). Opción 1. En Contact Form 7 podemos hacer fácilmente que el correo que nos llegue incluya el resultado de la casilla de aceptación.Esto implicaría guardar los correos como registro de aceptación en nuestro buzón, o en psts. Pero es una forma sencilla y para muchos muy cómoda. También indicado cuando el que va a recibir los e-mails es un departamento distinto del que gestiona la página web.Os indicamos cómo hacerlo en este vídeo. Opción 2. Para muchos es mejor guardar este registro en la base de datos, en el backend de WordPress y poder comprobarlo rápidamente ahí. Para ello lo mejor es instalar un plugin que te guarde un registro de los envíos de los formularios, junto a esa casilla de aceptación. Os recomendamos alguno, antes de elegir cual, comprobad hace cuando se ha actualizado y si es compatible con vuestra versión de WordPress. Tiene la ventaja de sencillez y poder exportar los resultados a un Excel. Contact Form 7 Database Addon. Muy usado desde hace años. En ocasiones ha tenido problemas con WordPress pero como todos los plugins veteranos. En estos momentos está activo y muy actualizado. Flamingo. Ya hablamos de él hace tiempo. El favorito de muchos, aunque en el momento de escribir este artículo, incomprensiblemente lleva 9 meses sin actualizar. Advanced Contact form 7 DB: lleva menos tiempo pero con buen número de descargas, actualizado y buena puntuación. Contact Form Submissions: durante mucho tiempo uno de los más usados. Pero lleva 1 año sin actualizar, si no se actualiza no recomiendo instalarlo.

Diseño Web, Gestores de contenidos, Trucos

Ocultar o modificar elementos en WordPress, para usuarios registrados, o no registrados, mediante CSS

La semana pasada descubrimos este truco muy útil para los que hacemos páginas web. Se pueden ocultar elementos, o modificarlos, para usuarios registrados mediante CSS. Esto permite que añadamos capas o avisos sólo para usuarios no registrados, cambiar el color de ciertos elementos para usuarios que están “logados” y una infinidad de aplicaciones y personalizaciones. ¿Cómo? Muy sencillo, WordPress añade una clase a todos los elementos, al principio del contenido cuando se ha iniciado sesión en una página. Así que sólo tenemos que poner esa clase delante de la clase que queremos afectar. Por ejemplo si tenemos una capa con clase avisoregistro, podemos ocultarla para usuarios registrados así: .logged-in .avisoregistro {display:none;} Obviamente si es un id se puede hacer igual. Nosotros lo hemos usado para, por ejemplo, ocultar pop ups de registro para usuario que han iniciado sesión. Para hacer lo contrario, es decir ocultar cosas si no ha iniciado sesión, podemos poner: boddy:not(.logged-in) .avisoregistro {display:none;} Es decir, si el cuerpo no tiene la clase logged-in, no muestres esa clase de avisoregistro.

Diseño Web, Gestores de contenidos

Filtros de productos en WooCommerce

Cuando implementas una tienda online, una de las cosas que la gente quiere es un filtro de productos. Es algo que queda muy bien, y da mucha usabilidad a la página.Los clientes pueden filtrar por precio, tipo de producto, color etc. Esto, en las nuevas versiones de Prestashop, es de pago. Pero, afortunadamente, en WooCommerce hay plugins gratuitos. Os dejamos unos cuantos (y así los tenemos nosotros de referencia para nuestros proyectos). WOOF – Products Filter for WooCommerce. Buen plugin que permite filtrar por categorías, atributos, etiquetas de productos, taxonomías personalizadas y precio. Tiene una API, puedes usar shortcodes en Widgets y ver una demo aquí. YITH WooCommerce Ajax Product Filter : YITH dispone de varios plugins gratuitos para WooCommerce muy útiles e interesantes. Este es uno de ellos. Podéis ver una demo aquí y la documentación aquí. Premmerce Product Filter for WooCommerce: Otra buena opción. Aquí tienes la demo. Advanced AJAX Product Filters: La demo aquí. Con estos plugins tenéis varios para probar y diseñar un buen filtro de productos.

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

Big Blue Button Html5 por defecto

Hace unos días dedicamos un artículo a la instalación de Big Blue Button en un servidor Linux. Aquí va un añadido al mismo: cómo hacer que los clientes y profesores entren en la versión HTML5 por defecto. Por defecto, la versión actual de Big Blue Button, la 2.0, activa la versión Adobe Flash para los clientes. Esto es, en mi opinión, un retraso y la imagen dada es nefasta porque la mayoría de los navegadores han desactivado Flash. El cliente entonces recibe un aviso para activarlo cada vez que entra. Cosa que puede asustar, o echar para atrás a muchos. Lo lógico es activar HTML5, que está disponible, por defecto. No lo han hecho porque están a punto de sacar la nueva versión que sí lo tendrá así.Os enseñamos a hacerlo ahora hasta que salga la siguiente. El truco es editar el fichero de configuración de Big Blue Button. Tienes unas instrucciones aquí, pero el fichero que viene no lo teníamos en la ruta que dice la documentación. En nuestro caso tuvimos que editar el fichero: ./var/lib/tomcat7/webapps/bigbluebutton/WEB-INF/classes/bigbluebutton.properties Ahí hay que poner los siguientes dos valores a true: Guardamos el fichero y tenemos que reiniciar Big Blue Button con sudo bbb-conf –restart Si ves que no se activa prueba a reiniciar Greenlight también. Al iniciar sesión debería entrar directamente en la versión HTML5 que es así:

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

Instalar Big Blue Button, alternativa a Skype, en un servidor

Recientemente hemos tenido que instalar para varios clientes, dedicados a la formación online, unos sistemas propios de videoconferencia. Para ello hemos usado Big Blue Button, porque obviamente no podían depender de servicios como Skype, querían ser independientes. Big Blue Button es un sistema de videoconferencia diseñado para la formación online y basado en Linux. Totalmente gratuito (si lo montas en tu servidor en vez de usar su servicio) y open source. Además dispone de una comunidad activa, lleva tiempo en el mercado (lo sacaron en el 2009) , y se integra con la mayoría de los LMS del mercado (Moodle, sistemas de WordPress etc). Viene bien documentado PERO la documentación no es sencilla, y está algo enrevesada. Así que hoy os explicamos cómo hemos instalado BBB en un servidor, por si os es de ayuda. Verificad siempre que no haya cambiado nada al cambiar de versión.En otros artículos iremos explicando otras modificaciones que hemos hecho y dudas que hemos resuelto. Nota: necesita un servidor dedicado sólo para esto, y con especificaciones medias. Así que implica un coste inicial (de harware e instalación) y, por lo tanto, sólo es recomendado para aquellos que vayan a rentabilizarlo rápidamente. Requisitos previos. Necesitas: Servidor dedicado que cumpla las especificaciones. Un dominio que usar como dirección o url y apuntar los DNS de ese dominio a la IP del servidor dedicado. El instalador te pedirá una dirección de correo. Conocimientos básicos de conexión a un servidor por SSH. Instalación del servidor. Como hemos dicho, necesitamos un servidor dedicado, con ciertas especificaciones, y exclusivo para este servicio (porque ocupa varios puertos, el 80 entre otros).Al adquirir el servidor dedicado, los desarrolladores recomiendan instalar Ubuntu Server (en estos momentos 16.04 64 bits). Esto va a cambiar pronto con la nueva versión de BBB, pero si que recomendamos instalar lo que digan los desarrolladores. Este es un software muy personalizado y es mejor no usar otras distribuciones. Uso del script de instalación. Una vez instalado el servidor, y actualizado (apt-get update, apt-get upgrade), hay que instalar Big Blue Button. Se puede hacer de varias maneras, como indica la documentación, pero recomendamos encarecidamente el script que puedes encontrar en : https://github.com/bigbluebutton/bbb-install El script tiene varios parámetros. Recomendamos instalarlo con certificado SSL , HTML5 y Greenlight, con el comando que está al final: wget -qO- https://ubuntu.bigbluebutton.org/bbb-install.sh | bash -s — -v xenial-200 -s bbb.example.com -e info@example.com -t -g Qué es HTML5 Big Blue Button empezó trabajando con Adobe Flash. Pero la mayoría de navegadores han ido deshabilitando este addon. Hasta el punto que ahora, al entrar con Flash, pregunta si quieres ejecutarlo (esto da mala imagen). BBB es compatible con HTML5 y es lo recomendable. Pero estamos en un momento de transición en el que la versión 2.0 pone por defecto Adobe Flash (creo que la siguiente que está a punto de salir ya no). Así que pronto escribiremos un artículo sobre cómo activar por defecto HTML5. Qué es Greenlight. Una de las cosas que me costó entender, no está bien explicado. Big Blue Button se encarga de las videoconferencias y grabaciones. Pero no tiene gestión de usuarios, estaba pensado para conectarlo con otros sistemas via API (por ejemplo Moodle). Greenlight es un entorno gráfico que permite a los usuarios creados entrar y usar eses entorno gráfico para gestionar sus salas. Usar la de por defecto o crear nuevas. Además, te da la url para mandar a los clientes para que puedan conectarse por el navegador. Los clientes, por ejemplo, lo están usando para que los profesores se conecten con alumnos que no usen su plataforma online, para entrevistas con candidatos etc. Es un “Skype” a través del navegador. Problema: la gestión de usuarios es o a través de cuentas de Google, Twitter, Office365, LDAP o cuentas suyas. El gran problema es que, por defecto, deja a cualquiera registrarse para usarlo. Más abajo explicamos cómo evitarlo.Y, cuando queremos dar de alta cuentas suyas, tenemos que activarlo, reiniciar el servicio, dar de alta la cuenta, desactivarlo y reiniciar el servicio. Algo primitivo. Nota: Greenlight muestra el idioma por defecto en el navegador del usuario. Certificado SSL. Obviamente cualquier servicio que implica comunicaciones de voz y/o vídeo requiere ir cifrado. BBB permite la instalación de un certificado tuyo o por Lets Encrypt.El comando que hemos puesto instala y configura Lets Encrypt en tu servidor. Si no te funciona puedes configurarlo a mano en:http://docs.bigbluebutton.org/install/install.html#using-lets-encrypt Siguientes pasos. Una vez acabe el script, recomiendo configurar el servidor para que renueve el certificado de Lets Encrypt cada semana. Para ello hay que editar el crontab y poner: 30 2 * * 1 /usr/bin/letsencrypt renew >> /var/log/le-renew.log 35 2 * * 1 /bin/systemctl reload nginx Esto lo renueva cada lunes a las 2:30 am. El log de la renovación está en /var/log/le-renew.log Bloquear el que cualquier se pueda registrar en Greenlight. El sistema instala greenlight en /root/greenlight , con un fichero de configuración que se llama env en ese directorio. Edita el fichero y ponALLOW_GREENLIGHT_ACCOUNTS en false para evitar que la gente se registre en tu Greenlight gratis. En el mismo fichero ve al final y quita el # en ENABLE_SSL=true para forzar https por defecto. Reinicia Ubuntu con sudo systemctl restart nginx Reinicia Greenlight con los siguientes comandos (Enter después de cada línea). Ejecútalos desde el directorio de Greenlight o el último dará error. docker stop greenlight-v2 docker rm greenlight-v2 docker run –restart unless-stopped -d -p 5000:80 -v $(pwd)/db/production:/usr/src/app/db/production –env-file env –name greenlight-v2 bigbluebutton/greenlight:v2 Opcional . Se puede instalar netcat para probar los puertos. Usar la parte de probar con netcat de http://docs.bigbluebutton.org/2.2/configure-firewall.html#testing-the-firewall Si quieres más modificaciones (a alguna le dedicaremos artículos aparte) puedes ver la sección Common Customizations aquí : http://docs.bigbluebutton.org/install/install.html#common-customizations Extraer el Shared Secret. Si vas a usar Big Blue Button en otro entorno, como un LMS, por ejemplo en Mooodle, o WordPress, vas a necesitar el shared secret para que se autentifique. Lo obtienes por ssh en el servidor con: bbb-conf –secret Demos. El script crea unas demos que puedes usar para

Diseño Web, Gestores de contenidos, Trucos

Plugins administradores de archivos para WordPress

Hoy os dejamos unos plugins que pueden seros útiles cuando no tengáis acceso FTP a una página de WordPress (aunque a la larga deberíais).Unos administradores de archivos para poder gestionar los archivos y directorios desde el backend. Hace unos días tuvimos que modificar cosas en una página de un cliente, y no nos había proporcionado acceso FTP. Como era urgente buscamos opciones y os las dejamos por si os ocurre lo mismo. WP File Manager (usamos este). File Manager. File Manager Advanced. En ambos casos el uso es similar, tras la instalación y activación, si vamos al menú del plugin veremos un gestor web, muy parecido al que nos dan los alojamientos, que nos permite las funcionalidades básicas. Recordemos que esto sólo podremos usar bien si los permisos del servidor están bien. Si no, no nos dejará usarlo.

Scroll al inicio