Gestores de contenidos

Diseño Web, Gestores de contenidos, Trucos

Cómo saber cuándo una web cambia a modo móvil. Media Queries en el inspector.

/

Cuando estás diseñando una página web, tienes que tener en cuenta los diferentes tamaños de los dispositivos. Ya no diseñamos una web, sino varias para diferentes tamaños. Lo que se llama hacer la página responsive y se hace mediante los media queries. Una vez hecha la web, podemos querer saber en que tamaños están definidos esos cambios de comportamiento. Cuándo cambia una web de ser modo escritorio a ser modo tableta o modo móvil. E incluso dentro de cada una, si hay diferencias.Esto se puede hacer con un truco en el inspector del navegador que no está activo por defecto. Hoy os enseñamos a activarlo (en Chrome, es similar en otros). Activar los media queries en el inspector de Chrome. Para activar los media queries en el inspector tenemos que: Activar el inspector (botón derecho-> inspeccionar o Ctrl+Shit+I) Ponerlo en modo responsive pinchando en el icono del móvil. Arriba a la derecha hay 3 puntos en vertical en la barra de responsive. Si pinchas en esos puntos se despliega un menú y tiene la opción de show media queries. En el vídeo se ve cómo hacerlo y cómo usarlos.

Gestores de contenidos, Trucos

Prestashop: cómo saber quién ha comprado un producto, cuándo y en qué pedido.

/

Una pregunta que nos hacen muchos clientes que tienen tiendas online: ¿cómo puedo averiguar quién ha comprado un determinado producto, cuándo y en qué pedido? Hoy os lo mostramos en Prestashop 1.7. Cómo saber quién ha comprado un determinado producto. Una manera de hacerlo desde el backend de Prestashop es: Ir al apartado Estadísticas. Escoger las de Detalles del producto. Elegir un rango de fechas adecuado. Buscar en la lista de productos el que queremos. Pinchar en él. Debajo del gráfico aparece un listado de Ventas. Estas son las ventas de este determinado producto, en el rango de fechas elegido, con la fecha de la compra, el número de pedido (podemos entrar en él y ver los detalles) y el ID de cliente que lo ha comprado. Muy útil si tienes una tienda online.

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.

e-Learning, Gestores de contenidos

Agrupar usuarios en Moodle. Cohortes y grupos. Diferencias y usos.

/

El sistema de agrupar usuarios en el sistema Moolde no es muy intuitivo. Básicamente puedes añadir usuarios a grupos y cohortes. Hoy os explicamos las diferencias entre los dos y cuándo se usan. Tanto uno como el otro pueden asignarse manualmente o a través de ficheros (importando). Grupos. Esta es la agrupación más intuitiva. Un grupo es un conjunto de usuarios para poder diferenciarlos dentro de un curso. Puedes crear grupos a nivel de curso o a nivel de actividad individual. Así, por ejemplo puede interesarte crear un grupo para: Diferenciar clases que usen el mismo curso. Restringir el acceso o la visibilidad de actividades a ciertos grupos. El profesor puede ver las actividades y notas de cada grupo y filtrarlos de esa manera. Es un curso compartido por varios profesores y quieres diferenciar tus alumnos y recursos. Este manual oficial explica los grupos en Moodle. Cohortes. Las cohortes son grupos creados por el administración a nivel del sistema (visible para todos los cursos del sistema) o a nivel de categoría (sólo visibles en los cursos de esa categoría). Con las cohortes puedes: Matricular a varios usuarios a la vez en uno o varios cursos. Agregas los usuarios a las cohortes y añades las cohortes a los cursos en la matriculación. Cualquier usuario dentro de esa cohorte tendrá acceso al curso. Crear grupos de matriculación. Así si pones la cohorte, por ejemplo, de “Alumnos de Primero” y la añades a los cursos, sólo tienes que asignar usuarios a esa cohorte y tendrá automáticamente acceso a todos los cursos que necesiten los “Alumnos de Primero”. Sin tener que matricularles a mano. Se puede asignar temas visuales a cohortes. Notas. Tienes que organizarte bien la estructura de cursos y cohortes. Por ejemplo no es posible asignar usuarios a todos los cursos de una categoría, como parecería indicar con las cohortes de categorías. Estas son sólo dónde se ven la cohorte. Pero la asignación a cada curso es manual. Existen módulos que extienden las funcionalidades de una cohorte, haciendo (por ejemplo) que puedas asignarlas a roles de Moodle. Recordad que cuando quitéis la cohorte se quitarán los usuarios del curso. Obviamente, una vez matriculados los usuarios de una cohorte en un curso, pueden asignarse a los grupos de ese curso.

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.

Gestores de contenidos, Trucos

Mensajes de clientes con tildes o caracteres raros aparecen mal en Prestashop.

/

Tenemos varios clientes con Prestashop, con varias versiones (1.6 y 1.7 en estos momentos). Y en alguno de ellos (no todos) ha ocurrido algo muy curioso: los mensajes de los clientes muestran las tildes y los caracteres raros como la ñ con símbolos raros. De esta manera: El problema es que los mensajes están hechos para entender lo que nos dicen los clientes, y así no hay manera. Hoy os damos una solución que nos ha funcionado con un cliente. Solución. Tenéis que editar los siguientes ficheros de Prestashop. Fichero /adminXXXXX/themes/default/template/controllers/orders/helpers/view/view.tpl  donde XXX varía en cada instalación. Este es el fichero que regula cómo se ven los mensajes en los pedidos. Tienes que ir a la línea que pone: <p class=”message-item-text”> {$message[‘message’]|escape:’html’:’UTF-8’|nl2br} </p> y sustituirla por (añade un unescape en vez de escape): <p class=”message-item-text”> {$message[‘message’]|unescape:’html’:’UTF-8’|nl2br} </p> Fichero /adminXXXX/themes/default/template/controllers/customer_threads/helpers/view/message.pl . Este es el fichero que regula cómo se ven los mensajes en la sección Servicio al Cliente. Hay que ir a la línea que pone: <p class=”message-item-text”>{$message.message|escape:’html’:’UTF-8’|nl2br}</p> y cambiarla por: <p class=”message-item-text”>{$message.message nofilter}</p> Esto nos funcionó a nosotros y con ello nuestros clientes al final se enteran de lo que les piden los suyos. Fuente aquí.

Gestores de contenidos, Trucos

Cambiar la contraseña de un usuario de Prestashop por base de datos.

/

Algo que nos pasa a menudo cuando tenemos que arreglar un Prestashop de un cliente: no tenemos acceso al backend y tenemos que crear un nuevo usuario administrador (os enseñaremos otro día) o tenemos que cambiar la contraseña del existente.Hoy os enseñamos a hacerlo. Cómo cambiar la contraseña de Prestashop por base de datos. El proceso consta de dos pasos. Obtener el Cookie Key.La contraseña de Prestashop viene cifrada y usa, para ello, este valor de tu tienda (diferente en cada tienda). Para encontrarlo tienes que ir (por FTP o SSH) al fichero de configuración. Su localización depende de la versión.1.6: /config/settings.inc.php Es el valor que encuentras en la línea que pone detrás de  define(‘_COOKIE_KEY_’1.7: /app/config/parameters.php Es el valor que aparece detrás de ‘cookie_key’ => Apuntad este valor porque lo vais a necesitar. Modificar la base de datos.Para ello lo mejor es usar un editor como phpMyAdmin. Abrimos la base de datos y buscamos la tabla ps_employees (por defecto es ps, pero eso puede cambiar, puedes tener otracosa_employees).Ahí tienes que editar el usuario que quieras, ir al campo contraseña, poner en Función MD5 (para que cifre lo que pongamos en el otro campo, MD5 es un método de cifrado), y en la columna Valor quitamos lo que haya y ponemos: cookiekeycontraseña Es decir el valor de cookie key seguido de la contraseña sin espacios.Le damos a continuar y ya tendremos nuestra nueva contraseña cifrada y preparada para usar. Obviamente en el panel de administración ponemos la contraseña sin cifrar. Alternativo: si sois algo más atrevidos podéis no editar la base de datos y usar un comando de SQL en el paso 2 (tenéis que meter el cookie key donde dice, la contraseña donde dice nuevacontraseña y el correo del usuario en correoquesea. UPDATE ps_employee SET passwd = md5(“<COOKIE_KEY><tucontraseña>”) WHERE email = “correoquesea”; Os dejamos un vídeo explicándolo:

Scroll al inicio