Trucos

Diseño Web, Gestores de contenidos, Trucos

WordPress, apuntar a una página o post en concreto con CSS

Hace unos días explicamos cómo usar CSS para los miembros que estén o no estén “logados” en WordPress. Hoy vamos a explicar un truco similar. En WordPress es preciso apuntar a una página en concreto con CSS, y así poder cambiar el aspecto de algún elemento sólo en una página en concreto. Para hacer eso lo primero que tenemos que hacer es identificar el ID de la página a la que queremos apuntar. Para eso edita la página, y mira en la URL, donde pone post.php?post=XXXX. Ese XXXX es el ID. Ahora, en tu código CSS pon lo siguiente para identificar a la página .page-id-XXXX. Por ejemplo .page-id-11199 span {color:black;} Para un post .post-XXXX , por ejemplo .post-11199 También puedes especificar en concreto a la pagina principal con la clase .home. O a la página de entradas (si la tienes definida) con .blog .

Android, Compartir, Smartphones, Trucos

Cómo agregar tu contacto e información de emergencia en el móvil. Versión 2019.

Hace tiempo, la Cruz Roja y el Ministerio del interior lanzaron una campaña para que agregásemos los contactos a los que llamar en caso de emergencia, precedidos de AA.Esto ya no funciona, porque los móviles viene con protección con PIN, contraseña o patrón (y si no es así deberías activarlo), y los servicios de emergencia ya no pueden acceder a los contactos.Hoy os enseñamos cómo agregar la información de emergencia en Android y también en los iPhone. Android. Las nuevas versiones de Android han activado una opción a la que puedes acceder pinchando en LLAMADA DE EMERGENCIA. En algunas versiones tienes que pinchar dos veces, en otras con una ya te lleva a un apartado donde puedes acceder a los contactos (normalmente un icono). Como veis la información ahí es de vital (nunca mejor dicho) importancia para los servicios de emergencia. Puedes poner grupo sanguíneo, alergias, tu nombre y dirección, notas médicas, si tomas medicación relevante y cuál, y un contacto directo o varios a los que llamar si has tenido un problema. Lo explicamos en este vídeo. iPhone. En Android lo que hay que hacer es instalar la app Salud, y ahí ir a Datos Médicos > Añadir contacto de emergencia activando la opción Ver cuando esté bloqueado . Ahí podréis poner el contacto que queréis que aparezca. Os aconsejamos que lo hagáis todos en vuestros móviles.

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

Crear un usuario administrador para Greenlight, el interfaz gráfico de Big Blue Button.

Una de las primeras cosas que me faltaron cuando instalé Big Blue Button con Greenlight era tener un usuario administrador para poder gestionar la creación de usuarios, y alguna personalización de la interfaz gráfica.Bueno, ya lo han remediado y os enseñamos a activarlo. Paso 1. Actualizar Greenlight. Lo primero es actualizar Greenlight, porque esta característica está en las “nuevas versiones” y si lo intentas en las anteriores dará error (no reconoce admin:create ). Pero esto es fácil, entra por ssh a tu servidor BBB y escribe lo siguiente. Paso 2. ¿Has pasado de docker run a docker compose? Los anteriores sistemas de Greenlight se ejecutaban con docker run. Pero eso no está admitido ya y hay que pasar a ejecutarlo con docker compose. Para hacerlo tienes que seguir estos pasos, que consisten en (más info): Si no has actualizado (si lo has hecho no hace falta) limpia la instancia anterior con: Instala docker-compose en tu servidor. No vale con la versión de la distribución, necesitas una más reciente. Así que sigue los pasos aquí. Comprueba que está con docker-compose -v Paso 3. Arranca Greelight con Docker Compose. Desde el directorio greenlight ejecuta:docker run –rm bigbluebutton/greenlight:v2 cat ./docker-compose.yml > docker-compose.yml Ahora arranca Greenlight con docker-compose up -d Puedes pararlo a partir de ahora con docker-compose down (más fácil que antes). Paso 4. Ahora crea el usuario administrador. Para ello ejecuta el siguiente comando desde el directorio greenlight:docker exec greenlight-v2 bundle exec rake admin:create[“name”,”email”,”password”] Donde tienes que cambiar name, email y password por lo que quieras (puedes no poner los valores entre [] y el creará los datos por defecto y te los pasará en pantalla. Con esto ya tendréis usuario administrador en Greenlight. El usuario administrador es útil porque puedes usarlo para crear otros usuarios, borrarlos, promocionarlos a administrador, y algunas opciones de personalización del frontend como logo y colores.Para ello pincha en tu perfil, y en Organización. Nota: si has actualizado, cuando entres como administrador, revisa las opciones de creación de cuentas porque se habrá modificado. Pero con ese usuario se puede cambiar rápidamente.

Diseño Web, Gestores de contenidos, SEO, Trucos

Cómo usar imágenes Webp en WordPress con EWWW Image Optimizer.

Si pruebas tu página en Google Page Speed, una de las primeras cosas que te dirá hoy en día es: ” Publica imágenes con formatos de próxima generación“. Uno de estos formatos es Webp, diseñado por Google y que comprime las imágenes, haciendo la web más rápida, haciendo que los usuarios no tengan que usar tantos datos para ver tu página, y mejorando así, la puntuación de SEO. Problemas: no todos los navegadores son compatibles con webp (casi todos ya), no todos los alojamientos permiten estas imágenes, y Wordress no las acepta (no puedes subir las imágenes directamente, da error). Además, puede que tengamos muchas ya subidas y convertir todas sería tedioso. Solución: os vamos a explicar cómo usar el plugin EWWW Image Optimizer, gratuito, para mostrar vuestras imágenes png y jpg en formato webp. Esto hará que se quite el aviso en PageSpeed, que mejore vuestro SEO y velocidad de la web (experiencia del usuario) y que se muestren los formatos “antiguos” si los navegadores no son compatibles. Cómo activar Webp en EWWW Image Optimizer. Para ello tenemos que (tras instalar y activar el plugin) irnos a la pestaña de Webp y marcar la primera opción. Una vez hecho esto, está preparado para mostrar las imágenes png y jpg en Webp, pero hay que decírselo al servidor web. Podemos hacerlo de dos maneras: Al activar la primera casilla en Webp veréis que debajo aparece una serie de reglas de htaccess. Podéis pinchar en el botón para que inserte esas reglas en vuestro fichero o insertarlas vosotros.Tras refrescar varias veces, tenéis que comprobar que la imagen en la esquina inferior derecha pasa de rojo png a verde webp. Si es así, lo tenéis activado y podéis inspeccionar vuestra web para ver que ya está mostrando imágenes en formato webp.O analizar de nuevo vuestra página con Page Speed. Si lo anterior no funciona- no es compatible con todas las configuraciones- el plugin permite instalar un javascript que será el encargado de ver si piden una imagen, y mostrar su webp. Esta opción es menos recomendable porque estamos añadiendo un script más…pero funciona casi siempre. Podéis ver cómo se hace en este vídeo.

Diseño Web, Internet, Trucos

Añadir el fichero ads.txt de anunciantes a tus páginas web. Google Adsense ya avisa.

Si tenéis anuncios de Google en vuestras páginas web, muchos habréis visto una alerta como esta: Es decir que tenéis que añadir el fichero ads.txt a vuestras páginas. ¿Pero, qué es el fichero ads.txt, para qué sirve y cómo se crea?Hoy os lo explicamos. Qué es ads.txt. Ads.txt es el fichero Authorized Digital Sellers , una iniciativa de la empresa IAB, que básicamente trata de poner un poco de claridad en el origen de los anuncios de las páginas web. Este fichero lo sube el dueño de la página y en el declara los anunciantes que pueden publicar anuncios en la misma.De esta forma, cualquier podría ir a un dominio, añadir /ads.txt al mismo y comprobar el origen de los anuncios en esta web. Por ejemplo aquí podéis ver los del periódico El País , El Mundo o los nuestros. ¿Cómo se crea? El formato de dicho fichero se puede ver en estas especificaciones. Consta de líneas formadas por cuatro campos, tres requeridos y uno opcional.Si quieres añadir líneas de comentario deben ir precedidas por #.Estos son los campos:– El primero es el dominio del anunciante. En google es Google.com– El segundo es tu identificador en ese anunciante. Puedes encontrarlo en tu cuenta de adsense y en Google empieza pub-xxxxx– El tercero indica si el anunciante se encarga directamente de los anuncios (DIRECT) o los revende (RESELLER).– El cuarto (opcional) indica el código del anunciante. En el caso de Google es siempre f08c47fec0942fa0 El fichero se crea fácilmente, y hay que añadirlo a la raíz de tus páginas webs. En este vídeo os explicamos todo.

Compartir, Gráficos y Fotografía, Trucos

Cómo ver y eliminar metadatos de imágenes con Windows File Explorer y Gimp.

Las fotografías incluyen unos datos sobre dónde se realizaron, con qué equipo (EXIF) , cuando, e incluso se puede añadir datos de copyright, dueño etc. Estos datos se llaman metadatos. Están muy bien como información para nosotros, pero cuando lo compartimos con terceros, puede no ser buena idea. Esto incluye cuando lo subimos a una página web. Hoy os enseñamos a ver, y eliminar dichos datos por dos métodos: Con Windows File Explorer. Al eliminarlos así, por alguna razón, se quitan muchos pero no todos los metadatos. Pero para una emergencia puede servir. Con GIMP. Con este editor de fotos gratuitos, podemos ver, editar y eliminar todos los metadatos de una imagen. Explicamos el proceso en este vídeo:

Correo, Mac, Trucos

Cómo abrir ficheros EML en Windows y Mac.

Hace unos días un cliente nos mandó instrucciones en ficheros EML. Estos ficheros son un formato en el que se guarda e-mails. Muy usado si usas clientes de correo, pero no si (como nosotros) usas correo web.Os dejamos cómo abrirlos en Windows y Mac. Método válido para Windows y Mac. En ambos sistemas, el método más sencillo es abrirlo en un cliente de correo. Si tienes configurado Outlook, Thunderbird, Windows Mail o Apple Mail, puedes abrir los ficheros usando estos programas.Lo que pasa es que si tienes estos programas, seguramente habrás podido abrir los ficheros directamente, y no estarás aquí. Y no merece la pena configurar un cliente de correo para abrir dos ficheros. Así que os dejamos otros métodos. Windows. Cambia la extensión a .mht. También valdría html aunque no se ajusta tando. Al final el formato eml es casi un formato web, y el mht se ajusta mucho. Si lo cambias a mht, y lo bares con un navegador, verás todo el contenido de forma entendible. Ábrelo con un editor de texto. El editor de texto, a menos que sea avanzado, no reconocerá la mayoría de los carácteres html, pero si podrías ver mucho del contenido. Obviamente es mejor el método 1, pero si es una emergencia y necesitas sólo un dato lo puedes hacer rápidamente así. Mac. Además de los métodos de Windows, que también se pueden usar en Mac, en este sistema se puede usar Stuffit Expander. Una aplicación del Mac Store que te permite abrir varios ficheros comprimidos, incluído el eml.

Diseño Web, Gestores de contenidos, Trucos

Cómo actualizar plugins de pago como WP Backery Builder, Revolution Slider o Layer slider en temas de WordPress que los contiene.

Cuando hacemos una página web en SmythSys en WordPress normalmente adquirimos temas de pago. Por mil razones que no vienen al caso, pero que se resumen en usar buenos materiales para entregar un producto mejor. Uno de los sitios que más usamos para estos temas es Theme Forest, y ahí, muchos temas de pago incluyen plugins que son, a su vez, de pago.Al cabo de poco tiempo de instalar un tema, con sus plugins, tanto estos como aquél necesitan actualizarse (no necesito explicar por qué es importante). El tema, con la licencia, puede actualizarse automáticamente. Los gratuitos se actualizan desde el backend, en la sección de plugins. ¿Pero cómo actualizo los plugins de pago Como por ejemplo WP Backery Builder, Layer Slider o Revolution Slider (por decir algunos de los más famosos). Estos no pueden actualizarse automáticamente y, en muchos casos, salen avisos que no están en la última versión. Si no los actualizamos, al final del tiempo tendremos incompatibilidades y/o problemas de seguridad graves. Os contamos cómo hacerlo de varias maneras más o menos automáticas. La clave está en darse cuenta que nuevas versiones del tema SI contienen (normalmente, suelen ir algo atrasados) las nuevas versiones de los plugins. Lo que pasa es que te pueden actualizar los que ya tienes por problemas de licencia. Y tu si tienes acceso a actualizaciones del tema con tu licencia (o deberías). Tenéis varias opciones. Comprar una licencia del plugin. Si no sabes, o no tienes tiempo, y no quieres preocuparte, compra una licencia y activa el plugin. Esto hará que se quite el aviso y es lo más sencillo…..pero no es necesario. Desinstala e instala con las opciones del tema. Muchos temas de pago tienen una opción de “required plugins” o similar donde te indican si ya tienen la última versión. Si vas ahí y ves que la tienen, haz copia de seguridad de tu web (por si acaso), desinstala el plugin de pago, ve a la opción de plugins requeridos y, curiosamente, podrás instalar la nueva versión.Es decir la clave es que no te deja actualizar, pero si instalar la nueva (una vez eliminada la antigua). Coge el nuevo plugin del tema y súbelo. Algunos temas todavía no tienen esa sección para instalar plugins de pago. Pero si descargas la actualización del tema SI tiene el plugin actualizado. Descarga el tema, abre el zip, busca una carpeta de módulos o plugins y encuentra el que necesitas. Después sólo tienes que (tras hacer copia de seguridad) desinstalar tu versión y, o subir la carpeta del plugin por FTP, o comprimirla e instalarla desde el backend. Espero que os sirva para mantener las páginas optimizadas y actualizadas.

Diseño Web, Gestores de contenidos, Trucos

Usar Geolocalización en WordPress para proporcionar contenido según IP o país. Plugin GeoIP Detection.

Hoy os vamos a hablar de un plugin gratuito GeoIP Detection, que proporciona todo lo necesario para darle funcionalidad “geolocalizadora” a nuestro WordPress. ¿Y para que sirve esto?Para todo lo que puedas imaginar sobre variar el contenido según el país o ciudad del visitante. Te damos alguna de las miles de ideas. Mostrar contenido personalizado sólo a ciertos países (cambiar la dirección de un negocio según el país por ejemplo). Ocultar contenido según país (mostrar a todos salvo….). Redirigir a usuarios de ciertas zonas a páginas específicas. Cambiar títulos, colores o incluso palabras según el país. Los límites son tu imaginación. Y da más potencia de personalización que los plugins de traducción como WPML que suelen basarse en el idioma del navegador (y por lo tanto no distinguir localización física). ¿Cómo se activa la Geolocalización en WordPress? Lo primero es instalar un plugin como GEOIP Detect que puede descargarse del repositorio o de su cuenta de Github. Lo que hace el plugin es create el entorno para poder facilitarte la dirección de los visitantes según su dirección IP. Esta información la puedes usar luego con scripts, CSS, snippets etc. Para ello el plugin usa una base de datos de IPs y países que puede ser gratuita (usa MaxMind GeoIP2 Lite o HostIP.info  ) , de pago, o basada en el proveedor (como Cloudflare o Amazon AWS). Nota: en modo automático instala MaxMind, y lo actualiza cada mes. Esto está bien en la mayoría de las webs…pero MaxMind tiene licencia Creative Commons ShareAlike-Attribution . No requiere mencionarles en la mayoría de las webs porque no se comparte información PERO si compartes la información proporcionada por tu geolocalización SI tienes que decir quién te da ese servicio (ver FAQ). El plugin usa 5 funciones geoip_detect2_get_info_from_ip($ip, $locales = array(‘en’), $options = array()) , geoip_detect2_get_info_from_current_ip($locales = array(‘en’), $options = array()) , geoip_detect2_get_current_source_description(…) , geoip_detect2_get_external_ip_adress() y geoip_detect2_get_client_ip() para realizar sus tareas. Podemos acceder a la información de dichas funciones con varios códigos bien documentados y de manera sencilla usando códigos ISO de país o nombres de países.También es compatible con Contact Form 7 Ejemplos. Ocultar contenido excepto para ciertas ciudades de Francia (usa el nombre en inglés para comparar):[geoip_detect2_hide_if lang=”en” country=”France” not_city=”Paris, Lyon”] TEXT [/geoip_detect2_hide_if] Muestra el contenido si está en Texas, USA:[geoip_detect2_show_if country=”US” state=”Texas”] TEXT [/geoip_detect2_show_if]

Compartir, Gráficos y Fotografía, Internet, Trucos

Squoosh: herramienta online de Google gratuita para comprimir imágenes.

Hace unos días hemos descubierto el proyecto de Google Squoosh. Google lo sacó, no como herramienta para comprimir imágenes (que es para lo que sirve y se usa), sino como recurso online gratuito para mostrar y probar las tecnologías de compresión. Podemos usar Squoosh para comprimir imágenes desde cualquier dispositivo (PC, portátil, móvil o tablet) a través del navegador. Y sólo necesita acceso a Internet la primera vez que se accede a la herramienta, porque luego se descarga en el navegador.Pero hay que tener en cuenta que Squoosh usa los recursos de hardware de tu dispositivo para funcionar. Así que el rendimiento depende de eso. Obviamente funciona mejor con Chrome. Google también tiene un Github del proyecto para poder descargarlo. Cómo usar Squoosh. Para usar Squoosh sólo tenemos que subir una imagen desde nuestro dispositivo. Después, usando las cajas de herramientas de la derecha e izquierda, podemos comparar varias ediciones y formatos para ver cómo afectan los cambios. Podemos comparar varios formatos con la imagen original, o con otros formatos.Podemos cambiar tamaño, reducir paleta de colores, comprimir sin perder calidad, comprimir con pérdidas de calidad etc. Todo viendo los resultados en tiempo real con un “slider” muy útil que nos permite ver si los cambios son aceptables. Al final pinchamos en el botón descargar para obtener el fichero definitivo (o los diferentes formatos). Rápido, útil, barato y bueno. ¿Que más queremos? Es verdad que las herramientas de escritorio como Caesium o Faststone Photo Resizer son más potentes y con más opciones (compresión en batch etc), pero esta herramienta está muy bien cuando no disponemos de esos recursos.

Scroll al inicio