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:

  1. Habilitar el acceso de invitado en el sitio. Vamos a Administración > Administración del sitio > Extensiones > Matriculaciones > Gestionar plugins de Matriculación
    Ahí 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.
  2. Habilitar el botón de acceso de invitados (optativo). Administración del sitio > Extensiones >Identificación >Gestionar identificación
    Poner el Botón de entrada para invitados en Mostrar.
  3. 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:

  1. 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.
  2. 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.
  3. 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í.

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:

<i class="fas fa-mouse"></i>

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:

Nginx: too many redirects al redirigir http a https

Este caso lo tuvimos hace unos días. Es una tontería, pero te puede hacer perder un tiempo innecesario.

Teníamos una web en Nginx donde queríamos redirigir todos los http (puerto 80) a https (puerto 443).

Esto es bastante sencillo, sólo hay que poner la línea:

return 301 https://$host$request_uri;

O, si quieres sólo una página en concreto: return 301 https://tudominio.com$request_uri;

El problema es que, cuando activábamos esto, aunque Nginx en el test decía que todo bien, al reiniciar nos daba el error de “Too many redirects“.

Solución.

La solución es sencilla, seguramente tienes puesto http y https en el mismo bloque de Nginx, y está intentando redirigir ambas peticiones.Es decir las peticiones al 80 se redirigen al 443, y estas se vuelven a redirigir. Tendrás algo como:

server {
  listen 80;
  listen [::]:80;
  server_name tudominio.com;
  listen 443 ssl;
  listen [::]:443 ssl;
....................................
}

Lo que tienes que hacer es dividir esto en dos bloques, para que sólo se redirijan las peticiones al puerto 80.

server {
  listen 80;
  listen [::]:80;
  server_name tudominio.com;
  return 301 https://$host$request_uri
}
server {
  listen 443 ssl;
  listen [::]:443 ssl;
  server_name tudominio.com;
....................................
}

Preseleccionar el valor de un campo select en Contact Form 7 mandándolo por una url.

Hoy vamos a explicar un truco con CF7 de WordPress que no está en su documentación. Imaginaos que tenemos un formulario en WordPress con un campo select (un desplegable con opciones).Lo más normal es que el usuario elija la opción que quiere.
Pero, ¿y si quieres que dicho desplazamiento se preseleccione dependiendo de la página de la que venga?

Por ejemplo, el desplegable puede ser un selector de departamentos, como el que os mostramos el otro día. Y queremos que, dependiendo de la página de la que venga, esta opción ya esté seleccionada con el departamento adecuado.

La solución es sencilla pero, como decimos, no está documentada en ningún sitio y hemos tenido que hacer un poco de prueba y error. Hay que hacer dos cosas:

  1. Cambiar el código del select en el formulario para incluir el que, por defecto, le llegue el valor por get.
    Así que campo que en el artículo antes mencionado era:

    [select* Departamentos “Opción 1|correo1@dominio1.es” “Opción 2|correo2@dominio2.es” “Opción 3|correo3@dominio3.es”]

    Pasará a ser:

    [select* Departamentos default:get “Opción 1|correo1@dominio1.es” “Opción 2|correo2@dominio2.es” “Opción 3|correo3@dominio3.es”]
  2. Ahora tenemos que poner el enlace que ponemos y añadirle el valor del campo que queremos añadir.
    Por ejemplo, si suponemos que hemos puesto el formulario en la página de contacto, desde otra podemos preseleccionar la Opción 1 con:
https://tudominio.es/contacto/?Departamentos=Opci%C3%B3n%201

Como veis ponemos el valor del campo que queremos, pero en formato url. Lo más sencillo es que uséis herramientas como esta para convertir del texto a url.

Cambiar la foto de usuario en WordPress con WP User Avatar.

Curiósamente este es un plugin que llevamos usando desde hace AÑOS, casi desde que empezamos con WordPress, y no hemos hablado de él hasta ahora. Se lo debíamos.

Por defecto WordPress sólo deja poner las fotos de perfil que tienes en Gravatar, un sitio online para subir fotos de perfil. Pero puede que quieras usar una foto local, de la carpeta medios de tu WordPress. Y poder personalizarlo. Os enseñamos a hacerlo.

Cómo cambiar la foto de perfil en WordPress.

El plugin que vamos a usar se llama WP User Avatar. Es un plugin gratuito que te permite:

  • Usar una imagen que subas a tu WordPress como foto de perfil.
  • Fotos personalizadas por usuario.
  • Poner una foto por defecto, o un icono por defecto que escojas tú, si un usuario no tiene foto de perfil asignada.
  • Tiene shortcodes para poder crear páginas donde la gente suba sus fotos de perfil, o para mostrar la foto de perfil donde quieras.
  • Puedes deshabilitar Gravatar.

Sencillo, pero muy útil.

Cómo poder elegir el destinatario en un formulario de Contact Form 7 con un desplegable en WordPress.

Normalmente los formularios de Contact Form 7 suelen tener un sólo destinatario. PERO, en una empresa, suele ser habitual crear formularios que pueden ir a diferentes departamentos.

Es decir, queremos crear un formulario de atención al cliente en el que el usuario pueda, mediante un campo desplegable, la dirección o el departamento al que enviar el formulario.
Hoy os enseñamos a hacerlo.

Crear un desplegable para seleccionar el destinatario en Contact Form 7.

Para poder crear un desplegable desde el que seleccionar el destinatario de un formulario con CF7 tenemos que hacer lo siguiente.

  • Creamos un campo “menú desplegable“.
  • En el cuadro Opciones ponemos, línea por línea, el texto a mostrar en cada opción del desplegable y el correo del destinatario, separados por un pipe.
    Por ejemplo:
    Opción1|correo@dominio.es
    Opción2|correo2@dominio2.es
  • Pon que el campo sea obligatorio (hay una casilla de verificación), porque destinatario tiene que haber.
  • Llama el campo de una manera que te acuerdes donde pone Nombre . Por ejemplo Departamentos.
  • Opcional. A mi me gusta que el primer campo sea blanco, para que la persona no tenga opción hasta que la elija. Puedes hacerlo poniendo como primera opción ” ” (que es un espacio en blanco) o en el código con la opción include_blank (lo mostramos en los ejemplos).
  • El código resultante debería ser algo como:
    [select* Departamentos “Opción 1|correo1@dominio1.es” “Opción 2|correo2@dominio2.es” “Opción 3|correo3@dominio3.es”]
  • Por último hay que ir a la pestaña Correo electrónico del formulario y, en Para poner el campo del selector. En nuestro ejemplo [Departamentos]

Os lo mostramos en el siguiente vídeo.

Cómo editar el fichero hosts en Mac.

El fichero hosts es un fichero en el ordenador que te permite apuntar las páginas web a las direcciones IP que quieras. Esto es útil si estás diseñando una web en un servidor de prueba (o en tu ordenador) o si quieres impedir que alguien vaya a una página web en concreto.

Os hemos enseñando a editarlo en Windows de varias maneras, hoy os enseñamos en Mac.

Editar el fichero hosts en Mac.

Os dejamos dos procesos que os explicamos en el vídeo.

  • Abriendo un terminal y editando el fichero que está en la ruta /private/etc. Así que el comando sería:
sudo nano /private/etc/hosts
  • Si no te atreves a usar el termina, puedes abrir Finder, menú Ir y buscar Ir a.
    Ahí poner la ruta : /private/etc y buscar el fichero hosts.
    No vas a poder editarlo ahí. Cópialo en otro sitio. Edítalo, y luego copia y pégalo en al ruta original.
    Te pedira usuario y contraseña de administrador porque la ruta es un sitio donde sólo los administradores tienen acceso.

Juegos para aprender conceptos de CSS como Flexbox, Grid o selectores.

Si estás aprendiendo CSS, una buena manera es jugando. Os dejamos unos cuantos juegos web para aprender, repasar o afianzar ciertos conceptos de CSS.

Selectores CSS.

Aprender a manejar los selectores de CSS es muy importante, ya que nos ayuda a asignar nuestro código a los elementos que queremos.

CSS Diner es un juego en el que te va a pedir que selecciones, mediante código CSS, los elementos que te piden. Tienes 32 niveles con dificultad ascendente, así que está muy completo.

Grid.

Poner los elementos en Grid, con filas, columnas y celdas, es algo muy común en las páginas web. Así que controlar su uso es treméndamente útil.
CSS Garden tiene 28 niveles de dificultad en los cuales podrás aprender a manejar este elemento CSS.

Flexbox.

Otro elemento muy importante en las páginas de hoy en día: Flexbox (más info aquí y aquí ). Te permite colocar los elementos donde quieras en tu pantalla, y de modo “responsive” (adaptable a varios dispositivos).

Del mismo creador que el juego anterior tenemos FlexboxFroggy. Probadlo, es excelente (24 niveles).

También tenéis Flexboxdefense para manejar otros elementos de Flexbox.

Cómo cambiar el texto “Oferta” en Woocomerce.

Tenéis una tienda en WooCommerce y no os gusta el texto Oferta. Queréis poner algo más “vendible”, como “Promoción”, “Super Oferta” o similar. ¿Cómo se hace?
Hoy os lo explicamos.

Cómo cambiar el texto Oferta en tu tienda de Woocommerce.

Si quieres cambiar ese texto te dejamos dos opciones:

  1. Traducirlo con Loco Translate (o similar). Una opción muy sencilla, que no requiere conocimientos previos, es usar un plugin de traducción de plugins y temas. Nosotros usamos Loco Translate.
    Sólo tienes que instalarlo, buscar “Traducción de Plugins”, elegir Woocommerce y buscar “Oferta”. Veréis el término en Inglés y que está traducido por “Oferta”. Cambiáis esto último por lo que queréis, y comprobáis que se cambia en el frontend.
    Fácil y rápido. Además permite que cualquier persona lo modifique (como un cliente).
  2. Con un Snippet. Se puede usar un código y añadirlo a tus Snippets o al functions de tu tema hijo.
    Os dejamos un Snippet posible (página del autor aquí). No lo hemos probado pero debería funcionar sin problemas.
add_filter( 'woocommerce_sale_flash', 'dinapyme_wc_modificar_texto_oferta' );

function dinapyme_wc_modificar_texto_oferta( $texto ) {
    //cabia el valor del texto original 'Sale!' de WooCommerce por el texto '¡Promoción!'
    return str_replace( __( 'Sale!', 'woocommerce' ), __( '¡Promoción!', 'woocommerce' ), $texto );
}

Uindades de medida en CSS. Medidas absolutas vs medidas relativas. Px,em,rem,vw,vh,%

Cuando tenemos que colocar elementos en una página web, las medidas son importantes, y conocer las opciones que nos da CSS (mencionaremos las más usadas). Existen medidas:

  • absolutas: que no se adaptan a los dispositivos. Su tamaño no cambia y es siempre fijo. Por lo tanto son cómodas para empezar a diseñar, pero no siguen las tendencias actuales de ser variables para diferentes dispositivos. Tampoco son adecuadas para la accesibilidad (gente que necesita ver la pantalla en dimensiones más grandes por problemas de visión o similares).
  • relativas: son unidades que dependen de algún otro factor, veremos cuáles. Si son adaptables a diferentes dispositivos.
    Dentro de estas unidades relativas cabe destacar las unidades viewport, que son las relativas a la ventana de visualización.

Vamos a entender cada una de ellas un poco más. En general se recomienda usar unidades relativas cuando sea posible.

Unidades absolutas.

Os mencionamos algunas de mayor a menor. Creemos que se explican por sí solas.

  • in: pulgadas. – Equivalente a 25,4 mm.
  • cm: centímetros – Equivalente a 10 mm.
  • pc: picas – Equivalente a 4,23 mm.
  • mm: milímetros
  • pt: puntos – Equivalente a 0,35 mm.
  • px: píxeles – Equivalente a 0,26 mm.

Unidades relativas.

  • rem: Estas unidades son relativas a la fuente raíz de la web. 1rem = al tamaño de la fuente raíz (normalmente 16px y suele ser el del BODY). Es una buena unidad para webs adaptables porque permite relacionarlo todo a una misma cantidad. Y podemos escalar fácilmente toda la web.
  • em: Es parecida a la anterior, pero es relativa al tamaño fuente del elemento en que esté (que si no está definido se hereda del superior, del padre). Es un tamaño que se ha usado mucho, pero puede llevar a confusiones porque las fuentes dependen de unos elementos que pueden depender de otros.
  • %: Porcentaje. Relativo al elemento padre.
  • ch: Relativo al ancho del cero “0”.

Por ejemplo, con una fuente raíz de 16px, 10 rem serán 160px.
Con em, si un div tiene 12px de fuente, algo dentro que tenga 10em equivaldrá a 120px.

Las unidades anteriores permiten crear un diseño de tamaños dependiendo de elementos como la fuente raíz. Y desde ahí poner elementos relativos a esta fuente, o relativos a cada contenedor. Esto permite que toda la página sea escalable, y no tener que hacer cambios a todos los elementos cuando se quiera variar el tamaño.
Las rem se usan cuando queremos escalabilidad global respecto a la raíz.
Las em se usan cuando queremos escalabilidad dentro de un elemento.

Unidades relativas viewport.

Dentro de las unidades relativas existen unas especiales que son relativas a la ventana de visualización (y por lo tanto pensadas para su uso en diferentes dispositivos). Las más importantes son las siguientes:

  • vw: viewport width. – 1vw = 1% del ancho del navegador.
  • vh: viewport height. – 1vh = 1% del alto del navegador.
  • vmin: viewport minimum. – 1vmin = 1% del mínimo entre el ancho y el alto del navegador.
  • vmax: viewport maximum. – 1vmax = 1% del máximo entre el ancho y el alto del navegador.

Estas unidades permiten poner como referencia el tamaño de la pantalla – algo importante en un mundo de dispositivos de tamaños cambiantes. Y desde ahí diseñar los elementos de la página.
Por ejemplo 50vw sería la mitad del ancho del navegador, o 100vw sería el 100% del mismo.

vw se usaría para elementos que se relacionen con la anchura del dispositivo (columnas por ejemplo).
vh se usaría para elementos que se relacionen con la altura del dispositivo.