Diseño Web

Diseño Web, Servidores, Sistemas

Deshabilitar y habilitar el módulo de phpMyAdmin en Apache por comando.

Si manejas bases de datos de aplicaciones web, lo mejor es que gestiones las bases de datos desde tu ordenador con conexiones de programas como Mysql Workbench. O que limites las conexiones por IP. Es muy inseguro que tengas abierta al público una herramienta como phpMyAdmin que gestiona las bases de datos. Por muchos cambios de puerto o de rutas que hagas. Sin embargo, tienes otra opción, que es habilitar y deshabilitar el módulo de phpMyAdmin de Apache por comando. Así, lo activas cuando lo vayas a usar, lo desactivas cuando no lo estés usando. Es muy difícil que alguien detecte cuando lo has activado y rompa tu acceso (usuario y contraseña) justo en la ventana en que lo has activado. Habilitar y deshabilitar el módulo y phpMyAdmin en Apache por comando. Os dejamos aquí los comandos. Para habilitar el módulo de phpMyadmin. a2enconf phpmyadmin Te va a pedir reiniciar apache y te sugiere el comando, normalmente: Para deshabilitar el módulo de phpMyadmin. Para desactivarlo es: a2disconf phpmyadmin De nuevo te pedirá reiniciar Apache (comando en la primera parte del artículo).

Diseño Web, Gestores de contenidos

Módulo gratuito para añadir código CSS y Javascript en Prestashop 1.7. Códigos en head y body.

Hoy me he fijado que tenemos un artículo sobre un módulo gratuito para editar CSS en Prestashop 1.5 y 1.6, pero no lo tenemos para las versiones actuales 1.7. Toca resolver esa falta. Nosotros usamos los artículos de este blog como referencia para nuestro trabajo diario. Y estamos seguros (por lo que ponéis en los comentarios) que también os está ayudando a algunos de vosotros. Módulo editor de CSS gratuito para Prestashop 1.7. Cuando está creando o modificando una página web, es muy normal tener que modificar el aspecto visual. El encargado de esto es el lenguaje CSS. Esto se puede modificar en los ficheros de estilos, pero suele ser buena idea, y más fácil, hacerlo desde un módulo (para su edición rápida y para que no lo modifique alguna actualización). Desgraciadamente Prestashop no incluye un módulo así, pero podemos descargarnos este Custom Code Module. Es sencillo de usar, se descarga, se instala desde el backend, y a módulos. Buscas en módulos y le das a configurar. Ahí podrás ver una página para añadir del código CSS, y el Javascript. También permite añadir códigos en la cabecera y en el cuerpo, como por ejemplo códigos de Analytics o Adsense.

Diseño Web, Gestores de contenidos, Trucos

WooCommerce: cómo crear cupones de modo masivo, y cómo ver qué clientes han usado qué cupones.

Nos ha preguntado hoy un lector una duda que tienen bastantes clientes, así que aprovechamos para responderlo para todos. La duda venía del artículo sobre cómo crear cupones en Woocommerce. Y la pregunta era “¿cómo crear unos 300 cupones?, y ¿cómo ver quién ha usado qué cupón?”. Los vamos a responder en dos secciones. Cómo crear cupones de modo masivo en WooCommerce. En el artículo anterior explicamos cómo crear un cupón en WooCommerce. Es fácil si tienes que crear unos pocos. Pero obviamente no está pensado para crear muchos. Para eso, como siempre, tenemos que recurrir a plugins. Tenéis el plugin Cupon Generator for WooCommerce que está pensado justo para esto. En tres pasos se ha probado ¡hasta para 1,000,000 cupones! Son tres pasos sencillos: 1) Configuración del Cupón.2) Configuración de la generación masiva.3) Generación masiva de cupones. Cómo ver qué cliente ha usado qué cupón. Filtrar pedidos por cupones. He visto en algún artículo que, en teoría, en Cupones>Uso , pinchando en el número de cupones usados, debería llevarte a una pantalla con los pedidos. Yo no lo he conseguido en ninguna tienda. Opción 1. Un usuario creó un plugin (en Github) para hacer esto. NO LO HEMOS PROBADO y no se ha actualizado en 3 años…así que probadlo con cuidado. El plugin está aquí. Opción 2. Añadir un snippet (o código en functions.php del tema) para que aparezca el cupón usado en el backend. De nuevo no lo hemos probado, pero debería funcionar. Opción 3. También podrías configurar un snippet cada vez que se aplique un cupón específico. Tampoco lo hemos probado.Aquí tienes que cambiar el código del cupon (elcódigodelcupónquequieras ) y el correo del destinatario (emaildeldestinatario@dominio.com ).

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

Extensiones y trucos para conectar Jitsi, Big Blue Button, Google Meet, Teams y Zoom con Moodle.

Como algún cliente nos lo ha preguntado, os dejamos algo bastante útil estos días: las extensiones y trucos para conectar los softwares de Videoconferencia en Moodle. Hablaremos de las más famosas: Jitsi, Google Meet, Big Blue Button, Teams y Zoom. Jitsi. Unos de mis preferidos, como hemos dicho, y su integración es gratuita y realmente sencilla. Existe un plugin que debemos descargar. Una vez descargado lo instalamos desde Administración del Sitio -> Extensiones -> Instalar módulos externos. En la configuración podemos poner la de por defecto (y usaremos los recursos públicos de Jitsi, sus servidores etc, como si nos conectáramos por su web). La App ID y el Secret sólo tenemos que usarlos si montamos Jitsi en nuestros servidores. Sólo tenemos que irnos al curso que queramos y agregar la actividad Jitsi, ponerle un nombre y ya está preparada para que se conecten profesores y alumnos. Fácil, rápido y gratuito. Big Blue Button. Os recuerdo que Big Blue Button no tiene servicio web y que tenéis que instalarlo en vuestros servidores. Pero si tenéis un servidor de BBB instalado, podéis conectarlo con Moodle. Sólo tenéis que bajar el plugin aquí. Podéis instalarlo (en el mismo apartado que el anterior) y seguir este vídeo. Tened cuidado porque por defecto viene configurado con el servidor de test de BBB. No debéis usarlo en producción, sólo para pruebas. Luego tenéis que configurar la url, API Key y secret key de vuestro servidor. Una vez hecho esto, y configuradas las opciones extra que queráis como la de grabar etc sólo tenéis que agregar la actividad BBB al curso deseado. Recordad que podéis configurar también en cada curso quién queráis que sea moderador, presentador, cómo entran por defecto los alumnos etc. Zoom. Zoom también tiene un plugin para Moodle PERO si que aclaran que, para configurarlo, necesitas tener una cuenta Business o Education, no vale con la gratuita o la primera de pago: “Requires a business or educational Zoom account to configure and setup.“ La instalación es igual que los anteriores y también se agrega como actividad en el curso deseado. Teams. Parece que Microsoft está apostando bastante por lo que ellos consideran “el LMS más popular”, hasta tal punto que tienen varias páginas sobre la integración de ambos sistemas. Si queréis una integración total para poder usar Moodle en Teams y Teams en Moodle, aquí os dejamos las instrucciones (ENG) o en instrucciones (ESP) sobre cómo hacerlo. Es crear la confianza de Moodle en Azure AD y conectar ambos sistemas. Pero sólo es necesario si queréis que los recursos de Moodle estén en Teams. Para usar las videoconferencias de Teams en Moolde podéis instalar este plugin: https://moodle.org/plugins/atto_teamsmeeting Después se puede poner como una actividad donde sea que se active el Atto editor de Moodle. Google Meet. Este no tiene plugin, pero se puede conectar con Moodle con varios trucos. Principalmente lo que tienes que crear es el enlace permanente de la reunión, y luego ese enlace lo pegas donde quieras en Moodle como tal (como un enlace). Para crear el enlace puedes: Entrar en https://meet.google.com/ y pulsar “+ Iniciar o unirse a una reunión” Crear un evento en Google Calendar, lo que por defecto crear una reunión de Google Meet. Ese enlace de reunión lo copias y lo pegas en el curso o lección que quieras.

Diseño Web, Gestores de contenidos, Trucos

Subíndices y superíndices en WordPress. Válido para cualquier página Html.

Muchas veces queremos poner símbolos en una página web como subíndices o superíndices. El símbolo de copyright, los cuadrados y cubos de las unidades de medidas, fórmulas químicas… Esto en Html está resuelto con las etiquetas <sub></sub> (subíndice) y <sup></sup> (superíndice). Y WordPress lo acepta desde hace tiempo en todos sus elementos (bloques tanto clásicos como Gutenberg, título …). También podéis ponerlo a mano en cualquier CMS o página web estática porque los navegadores modernos reconocen estos códigos. Así que si quieres poner estos típos de índice, no os vale con copiarlo de textos Word o Pdf, porque Html no lo reconoce, tenéis que ponerles esos códigos. Os ponemos un ejemplo de cada uno: Subíndice: Si queréis poner la fórmula del agua no vale con poner H2O, porque saldrá como un número normal. Incluso aunque lo copiéis de un documento que tenía el subíndice. Tenéis que poner el siguiente código en un bloque de html (no en el editor de texto normal de WordPress): H<sub>2</sub>O Así saldrá lo siguiente H2O Superíndice. Si queremos poner algo como 20 metros cuadrados nos saldría así 20m2 Pero si ponemos el código correcto en un bloque de html: 20 m<sup>2</sup> Nos aparece así: 20 m2

Diseño Web, Gestores de contenidos, Trabajos

Bonsaikawaii.com nueva tienda de bonsais.

Hoy os presentamos nuestra tercera tienda de bonsais: bonsaikawaii.com Son tiendas que da un resultado visual excelente porque tienen algo que es vital para una buena página web: buenas fotos y productos visualmente atractivos. Se puede además jugar con muchas tonalidades de colores. Bonsaikawaii es una tienda de bonsais y productos para el cuidado de los mismos. En ella podemos realizar los pedidos tanto de estas plantas como de herramientas, sustratos y productos varios. Esperemos que os guste.

Diseño Web, Internet

Google Lighthouse te ayuda a saber cómo ve Google tu página web. Auditoria básica.

Estos días las páginas web son vitales para los negocios. Y su posicionamiento, por lo tanto, también. Pero…¿cómo ve Google mi página o qué puedo hacer para mejorarlo? Hoy os hablamos de una herramienta gratuita de Google: Google Lighthouse, que os ayuda a realizar una auditoría muy básica de vuestra web. Lighthouse ha existido desde hace tiempo como extensión de Google Chrome, pero ahora está incluida en el Inspector del navegador. Esto permite que podáis “auditar” vuestras páginas web sin tener que instalar nada. Al realizar la prueba, recibís puntuaciones en varios aspectos, y además os dice fallos observados y manera de resolverlos.No os obsesionéis, algunos son difíciles de resolver, pero lo que veáis que es fácil podéis mejorarlo. Todo lo que resolváis, hará que tengáis más puntuación en vuestro posicionamiento, el famoso SEO. Aquí os dejamos cómo realizar la auditoría con Lighthouse desde el inspector de Chrome:

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:

Scroll al inicio