Diseño Web

Compartir, Diseño Web, Sistemas

Repl.it : programa online en más de 40 lenguajes de programación.

Hoy os dejamos una página web muy útil tanto para los profesores y alumnos de programación, como para aquellos que programamos en varios lenguajes. Repl.it te permite programar y ejecutar códigos (obviamente no extremádamente complejos) en más de 40 lenguajes de programación, entre los que están Python, Ruby, HTML+CSS+JS, C++, Java, C#, Django…. Lo interesante es que no es necesario configurar ni instalar nada, sólo seleccionar el lenguaje y ponerse a probar código. Otra de las grandes funcionalidades que tiene es que puedes volver a tu código cuando quieras, y compartir con otra gente. Nosotros lo vemos muy útil para: Profesores y alumnos: porque permite mandar códigos, probarlos y revisarlos entre varias personas. Programadores: para probar soluciones en varios lenguajes y ver qué solución es más óptima. Programadores: para probar fragmentos de código en varios lenguajes o conseguir corregir online fragmentos de código.

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, Servidores, Sistemas

mRemoteNG: administrador de conexiones de código abierto.

Hace unos días hemos descubierto este programa que te permite administrar, en un mismo programa y con una interfaz muy sencilla y amigable, múltiples conexiones con diferentes protocolos. mRemoteNG te permite añadir, usar y gestionar conexiones con los siguientes protocolos: RDP (Remote Desktop/Terminal Server) VNC (Virtual Network Computing) ICA (Citrix Independent Computing Architecture) SSH (Secure Shell) Telnet (TELecommunication NETwork) HTTP/HTTPS (Hypertext Transfer Protocol) rlogin Raw Socket Connections Obviamente, esto es útil para administradores de sistemas, creadores de páginas web, editores etc. No para el usuario normal. Pero para los que gestionamos varios servidores, y varios tipos de conexiones, poder conectarte desde el mismo programa por SSH al servidor, o por https al paner de hosting, o incluso por RDP a ordenadores es muy útil. Podemos tener las conexiones de Putty en el mismo programa que las conexiones https a las páginas web. La documentación del programa la tenéis aquí, aunque es muy sencillo de usar.

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, Navegadores, Trucos

Cómo cambiar el User Agent desde Chrome

El User Agent es un parámetro que pasa el navegador web al servidor, indicando desde que tipo de dispositivo y navegador estamos accediendo. Esto permite a ciertas páginas proporcionar (o eliminar) contenidos específicos a navegadores o dispositivos determinados. En el vídeo de hoy os indicamos cómo cambiar el User Agent desde Chrome. Es decir cómo “engañar” a un servidor, haciéndole creer que somos otro dispositivo o navegador. Obviamente esto puede ser interesante para desarrolladores para probar que los cambios por dispositivo antes indicados funcionan. Y para usuarios una manera de evitar dichas limitaciones o bloqueos. Cambiar el User Agent desde Chrome. En este vídeo os indicamos cómo cambiarlo y cómo comprobarlo. Para cambiarlo debemos abrir el Inspector de Chrome (Ctrl+Shift+I), pinchar en los 3 puntos verticales que hay en la esquina superior derecha, y en More tools -> Network Conditions. Ahí, al final de la ventana, podremos ver una opción de User agent. Está marcado en automático por defecto. Podemos desmarcar la casilla y, o elegir uno de la lista, o escribir uno personalizado en el recuadro inferior. Si recargamos la página e inspeccionamos desde Network, podremos ver cómo ha cambiado nuestro User Agent.

Diseño Web, Legalidad, Seguridad, Trucos

Cómo ver qué cookies usa una página web con el Inspector de Chrome.

Hoy os explicamos cómo ver que cookies usa una página web, usando el Inspector de Chrome. Os puede interesar por temas técnicos, por seguridad (comprobar qué información guarda sobre ti la web) o, si tienes una web, para poner dicha información en la Política de Protección de Datos o el consentimiento de Cookies. Usaremos el Inspector de Chrome pero el de Firefox es similar. Y también podemos usar dicho acceso para borrar selectivamente las cookies. Cómo ver las cookies de una página web. En el Inspector vamos a ir a Application > Storage > Cookies. Podemos verlo en este vídeo con varios ejemplos de webs.

Diseño Web, Sistemas, Trucos

Cómo cambiar el nombre de una base de datos en phpMyAdmin.

Si usas phpMyAdmin puede que quieras cambiar el nombre de una base de datos. No es tan directo como parece. Por si a alguien más le ha pasado el no encontrar cómo hacerlo, os dejamos los pasos Cambiar el nombre de la base de datos en phpMyAdmin Tienes que: Entrar en phpMyAdmin (lógico). Pinchar en la base de datos en cuestión en la lista de la izquierda. Pinchar en la pestaña Operaciones. Ir a Renombrar base de datos a Poner el nuevo nombre en el recuadro y pinchar en Continuar. Te pedirá confirmación y lo que hace es copiar la base de datos a una nueva con ese nombre y borrar la anterior.

Scroll al inicio