Gestores de contenidos

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.

Diseño Web, Gestores de contenidos

Plugin Visual Portfolio en WordPress para portfolio e imágenes con filtro y varios formatos.

/

Hace poco para un cliente hemos usado este plugin y, la verdad, nos ha gustado mucho. Para ser gratuito tiene MUCHAS opciones muy personalizables. Aunque se llama Visual Portfolio, y está pensado para ese tipo de posts (Portfolio), nosotros lo hemos usado para crear uno Grid o un Masonry de imágenes. Lo que buscábamos era una manera de poner unas imágenes, asignarlas unas categorías y poder poner, en una página un filtro de esa categoría. Así, pinchando en el filtro, se ven las imágenes sólo de esa categoría. Además, queríamos que las imágenes pudieran llevar a un enlace personalizado (y no a uno propio interno tipo portfolio). Este plugin era el único que permitía esto sin ser de pago. Una vez lo instalamos, nos soprendió mucho todas las opciones de personalización con las que contábamos. Podíamos crear “layouts” personalizados, elegir las imágenes o portfolios para cada layout, y crear configuraciones y opciones para cada layout y para cada imagen. Muy completo.

Diseño Web, Gestores de contenidos, Trucos

Crear páginas personalizadas de categorías mejores productos o más vendidos en WooCommerce.

/

Las plantillas de WooCommerce para las categorías no suelen tener un diseño muy agradable, ni ser muy adaptables. Aunque tengamos una plantilla profesional. Hoy os enseñamos a usar los shortcodes de producto de WooCommerce para crear páginas de categorías, más vendidos, productos en oferta y mucho más. Sin tener que cambiar la estructura de plantillas de WooCommerce ni programar. Crear páginas personalizadas. Podéis ver cómo hacerlo en el vídeo siguiente. La idea es crear una página, como haría con cualquier página estática de WordPress. Y añadir códigos de productos de WooCommerce (recordad añadirlos como html). Las posibilidades son infinitas y os ponemos unos ejemplos (vosotros podéis combinar como queráis): Muestra 8 productos en 3 columnas de la categoría herramientas: [products limit=”8″ columns=”3″ category=”herramientas” ] Puedes poner las categorías separadas por comas [products limit=”8″ columns=”3″ category=”herramientas, camisetas,abrigos” ] Muestra todos los productos en oferta ordenados por popularidad: [products limit=”-1″ columns=”4″ orderby=”popularity” on_sale=”true” ] Muestra 6 productos destacados, en dos columnas, ordenados por fecha: [products limit=”6″ columns=”2″ visibility=”featured” orderby=”date”] Muestra los 3 productos más vendidos: [products limit=”3″ columns=”3″ best_selling=”true” ] Crear páginas de subcategorías Una pregunta frecuente es cómo crear las páginas de subcategorías. Puedes poner este código: [product_categories parent=”35″] Parent es la categoría padre. Y ese id (35 en el ejemplo) lo puedes encontrar en la URL al editar dicha categoría padre.

Diseño Web, Gestores de contenidos

¿Se debe usar WP Staging para probar actualizaciones o no?

/

Hace un tiempo nos llegó noticias de un plugin que la gente estaba usando para solventar uno de los grandes fallos de WordPress: el que una actualización te “tire” o te inutilice la web. Hasta ahora al afrontar las actualizaciones los usuarios tenían dos vías: a) pagaban a alguien para probarlo o b) hacían copias de seguridad antes, actualizaban y rezaban para que no fallara nada. El primero es costoso, tanto en mano de obra como en alojamientos adicionales para realizar las pruebas. El segundo arriesgado. La idea de WP Staging es simple y, a priori buena para el usuario. Instalas un plugin, que te permite crear copias, Stages, de tu página en tu hosting de producción. En esos Stages puedes actualizar y realizar las pruebas que quieres, y después pasarlo todo a producción. Ideal, solucionado el tema. ¿O no? ¿Cuales son las ventajas y desventajas de usar WP Staging? Como todo, no es oro todo lo que reluce. El gran problema de este plugin es que se salta a la torera una de las bases de los “sitios de integración” (copias para hacer pruebas). Deben estar en otros alojamientos o servidores. Para poder realizar los Stages en el mismo alojamiento, lo que hace WP-Staging es lo siguiente:A) Crea un subdirectorio por Stage con el contenido duplicado de la web origina.B) Duplica las tablas en la base de datos de producción, poniéndolas un prefijo diferente. Esta segunda parte es la que más asusta. Ventajas de WP-Staging Facilidad de uso. Todo se realiza desde WordPress. No requiere conocimientos técnicos elevados No requiere un gasto extra en mano de obra y alojamiento. Lo puede realizar el propio usuario. La vuelta a producción es simple, rápida y fácil. Para hacer copias de entornos de prueba puede estar muy bien. Desventajas de WP-Staging Usa la base de datos de producción. Esto es un problema de seguridad. Como algo falle ahí tira la web entera. Añade contenido a la base de datos de producción, de hecho el doble por Stage. Esto hace que sea más lenta la propia página web. Los Stages son otros “vectores de ataque” a la web original. Si no se cuidan, y hay fallos en los plugins en los entornos de test o en su web, alguien puede acceder a ellos y, desde ahí, a producción. Puede haber problemas de SEO por las copias al estar en el mismo sitio. Las copias usan recursos de la principal….así que estamos penalizando su rendimiento y su SEO. Conclusión. Si quieres usarlo, fantástico. Seguramente es mejor que nada. Pero nosotros personalmente preferimos realizar las pruebas en otros alojamientos. Teniendo en cuenta que se puede montar una máquina virtual o un XAMPP en cualquier ordenador…..no tiene sentido el riesgo de este plugin.

Diseño Web, Gestores de contenidos, Gráficos y Fotografía

Plugin para descargar fotos en las galerías NextGEN.

/

Hace unos días un cliente nos pidió que sus usuarios pudieran descargar las fotos de su página web de manera sencilla. Su página usa el plugin NextGEN gallery para crear galerías. Afortuandamente existe un plugin para ello y os lo dejamos aquí por si os surge la misma petición. NextGEN Download Gallery Un desarrollador ha creado NextGEN Download Gallery, que básicamente es otra plantilla que incluye la opción de descargar las imágenes individualmente (seleccionando cuales por las típicas casillas) o descargar todas las fotos del álbum. Es de agradecer que la gente comparta sus desarrollos para que todos podamos aprovecharnos de ellos. Buena solución y gratis.

Diseño Web, Gestores de contenidos, Prestashop

Prestashop Error Invalid address # at line 444 in line classes/Address.php

/

Este es otro de esos fallos de Prestashop que lleva desde las versiones 1.4 o 1.5 y no se ha arreglado. Incomprensible porque no parece muy difícil de arreglar…aunque no debe ser prioritario. El error surge cuando vas en el backend a la sección Pedidos->Carritos de la compra y, de repente, da un pantallazo como el que adjunto (el #XXX puede variar). Solución. Básicamente lo que está diciendo el problema es que uno de los carritos tiene la dirección que aparece en el número #XXX (en la foto la dirección número #1347) con algún error. Por qué esto hace que deje de funcionar ese apartado es algo incomprensible…..sobre todo porque, como podéis ver aquí y aquí, es algo que lleva tiempo. En los enlaces anteriores hay varias soluciones. No os molestéis en ejecutar el módulo PS_Cleaner, el limpiador de Prestashop. No hace nada (y si os equivocáis de botón es muy peligroso. Lo primero que tenéis que hacer es una copia de la base de datos en la sección Avanzado>Base de datos. Porque vais a tener que modificarla.Después tenéis dos opciones: Lo que nosotros hicimos fue ir a la base de datos con un phpMyAdmin o similar. Después vas a la tabla ps_cart y ordenas los resultados por id_address_delivery  o haces un search id_address_delivery = 1347 (sustituye el número por el que te de a tí). Lo curioso es que el número ese #XXX (en nuestro ejemplo 1347), no es el id del carrito, sino el de dirección. Lo siguiente que hicimos fue borrar esa línea. No es importante, es un carrito abandonado y encima está mal. Cuando lo hayas borrado verás que ya puedes entrar en la sección Carritos de la compra del backend. Los artículos sugieren el código MYSQL siguiente. NO LO HEMOS PROBADO. Lo dejo como opción si la primera no funciona. Además, en nuestro caso no era una dirección nula así que esto no lo arreglaría. SELECT * FROM ps_cart AS c LEFT JOIN ps_address AS a ON c.id_address_delivery = a.id_address WHERE a.id_address IS NULL

Diseño Web, Gestores de contenidos

Cómo degradar un WordPress de versión.

/

Hace unos días hablamos de Wp_Rollback, un plugin para bajar de versión tus plugins hasta la que necesitas (por temas de compatibilidad normalmente).Hoy vamos a hablar de algo similar para el core, para WordPress en sí. Cómo bajar WordPress de versión con un plugin. Si has actualizado tu WordPress a una versión superior y algo no funciona, o quieres cambiar WordPress a una versión específica, por ejemplo en un entorno de integración, este plugin es excelente. WP Downgrade funciona de manera muy parecida a WP-Rollback. Instálalo, vete a las opciones del plugin y escoje la versión específica a instalar. Puedes comprobar las versiones aquí. Después sólo tienes que pinchar en el enlace de Upgrade o ir al Escritorio>Actualizaciones, y ahí veréis la opción de “actualizar” a la versión que hayáis pedido. Y digo actualizar entre comillas porque aunque pone siempre actualizar, a veces es degradar a una versión inferior. Otro plugin útil para desarrolladores o para corregir fallos de compatibilidad.

Diseño Web, Gestores de contenidos

Cómo resetear una instalación de WordPress.

/

En ocasiones necesitas empezar con tu instalación de WordPress desde “cero”. Es verdad que puedes hacerlo a mano, borrar la base de datos e instalar de nuevo WordPress, o usar otra tabla (cambiando el prefijo) en tu base de datos. Pero a veces queremos hacerlo de manera más “sencilla” o rápida.Para ello hoy os enseñaremos algunos plugins que lo hacen. Resetear una instalación de WordPress. Lo que hacen estos plugins es, de una manera u otra, resetear la base de datos y desactivar los plugins. Cuidado porque, en líneas generales, no borran contenido multimedia, así que tendrías que entrar en tu wp-uploads y borrarlo todo. Nosotros usamos estos plugins para resetear sitios de prueba o de integración donde realizamos pruebas o desarrollamos webs. WP Reset. Te permite resetear la base de datos borrando todas las tablas con el mismo prefijo (y por lo tanto el contenido). Al resetearlo mantiene tu usuario, el nombre del blog y te permite activar (como opción) el tema que tenías. No borra ficheros. WordPress Reset. Resetea la base de datos. No borra ficheros (si contenido) .

Diseño Web, Gestores de contenidos, Trucos

Activar Lazy Load en imágenes y vídeos de WordPress.

/

Lo primero…¿qué es Lazy Load? Básicamente es un sistema que carga contenido, en nuestro caso imágenes y vídeos, sólo cuando llegas a ellos. Es decir no carga todas las imágenes o vídeos al entrar en una página (lo que lo hace más lenta) sino que lo muestra según vamos descendiendo y llegan a ellas. Esto obviamente es muy bueno para los lectores y clientes, y para los buscadores. Google recomienda este tipo de prácticas. ¿Cómo funciona? Cuando activamos Lazy Load el navegador carga la web, el DOM, sin cargar las imágenes ni vídeos. Estos son sustituídos por shortcodes. El sistema de Lazy Load usa Javascript para identificar qué imágenes cargar y precargar según que parte de la web esté visualizando, o vaya a visualizar el usuario.El resto no se cargan (como suele pasar en una web normal. ¿Cómo implementamos Lazy Load en WordPress? Como siempre con Plugins. Os recomendamos unos cuantos: BJ Lazy Load. Uno de los más usados. Funciona muy bien con la configuración de fábrica. Permite además añadir una url de imagen (ligera) o una clase a cargar si no se ha cargado la imagen todavía. Funciona con imágenes y vídeos. A3 Lazy Load. Otro de los más descargados. Muy similar al anterior, también funciona con imágenes y vídeos. Lazy Load by WP Rocket. De los creadores del optimizador WP Rocket, este plugin sólo optimiza imágenes e iframes (por lo tanto vídeos también si son con ese método). Lazy load for videos. Como dice su nombre, este plugin se especializa en vídeos. Notas al aplicar Lazy Load en una web. Os dejamos algunos consejos para que la implementación sea óptima. Antes de subir imágenes, optimizarlas siempre. O al subirlas. Comprueba en Google Search console, tras activar el Lazy Load, que Google sigue viendo las imágenes. Podéis hacerlo rastreando la web como un robot de Google (otro día grabamos un vídeo). No os olvidéis nunca de añadir un campo Alt a las imágenes.

Scroll al inicio