Blog

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

Aplicación de Android para gestionar archivos y pasar ficheros al PC.

/

Yo hago mucho trasvase de información del móvil al PC. Saco fotos y grabo con el móvil, y luego edito, almaceno o subo desde el PC. Se puede hacer con un cable USB, pero en ocasiones no es lo más cómodo. Ni andar con el cable, ni conectarlo, ni depender de él. Así que me gusta buscar soluciones para hacerlo sin cables, de la manera más sencilla posible. Antes usaba ES File Explorer. Pero esta aplicación, que fue muy eficaz, se vendió a un tercero y éste la usó para fraude, así que ya no está en el Play Store (cuidado con los permisos que dais a aplicaciones…no sabéis quién es el dueño actual). Desde entonces no tenía ninguna aplicación que no obligara a usar FTP o similar (cosa poco cómoda). Hasta que me compré un móvil ASUS y probé su File Manager (File Explorer). Y VA GENIAL. La buena noticia es que se puede instalar en cualquier móvil. Cómo funciona. File Manager tiene muchas de la opciones que tiene la mayoría de los exploradores de archivos para Android (y con buena presentación). Pero la que más me interesa está al final : la Transferencia de archivos a PC. Si pinchas ahí verás una ventana para Iniciar, y al hacerlo te dará una dirección IP y un puerto. Si pones eso en el navegador de tu PC, podrás navegar por la memoria de tu móvil (obviamente tienen que estar en la misma red) y subir o bajar contenido a tu PC. Pero el plugin no sólo tiene eso, tiene además análisis de almacenamiento, Armario Oculto, etc etc. Muy buena aplicación.

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, Gestores de contenidos, Prestashop

Carritos vacíos al enviar productos al mismo en Prestashop. Posible solución.

/

Hace unos días, tras una actualización en un Prestashop 1.6 de un cliente, empezaron a ocurrir “cosas raras”. En el Front End, de manera aleatoria (y muy frecuente en ciertos momentos), los clientes estaban enviando productos al carrito, y al llegar al mismo estaba vacío.En el Back End, algunos plugins como el de TPV, al intentar enviar productos para cobrar, también daban un resultado vacío. Todo esto sin errores significativos en los logs del servidor, ni en modo debug. Sólo salía este error en los logs de Prestashop (backend) : Frontcontroller::init – Cart cannot be loaded or an order has already been placed using this cart Posible solución. Y digo posible porque en estas cosas las causas pueden ser múltiples, y lo que vale para uno no siempre vale para otro. Nosotros descubrimos la causa en este post. Al comprobar las tablas ps_cart y ps_order, viemos que el id del carrito que estaba asignando ps_cart, como posible siguiente carrito, era MUCHO menor que los que estaban en ps_order. Y los pedidos fallaban cuando coincidían con un ps_cart que ya había tenido un pedido (en ps_order). A veces no fallaba porque no todos los carritos se convierten en pedidos. La solución entonces es hacer que el último número de ps_cart (a partir del cual crea el siguiente) sea mayor que el último de los carritos de los pedidos. Así no pueden coincidir.

Diseño Web, Software

Dos editores web gratuitos: Brackets y Atom.

/

Los diseñadores web, necesitamos muchas veces un buen editor. No el editor WYSIWYG – el visual que usa la mayoría de la gente con pocos conocimientos de código -, porque mete mucho código innecesario. Sino un editor que permita escribir código, relacionar lenguajes de estructura (como HTML) con lenguajes de estilo (como CSS) y de comportamiento (como Javascript). Es verdad que podemos usar editores avanzados como Notepadd++ (que hemos usado muchos años y seguimos usando a veces), pero un editor específico para diseñadores viene con muchas más ventajas. Hoy os dejamos dos gratuitos muy eficientes y muy usados. Brackets. Editor web orientado a diseñadores, el proyecto lo empezó Adobe aunque ahora creo que es independiente.Es un editor gratuito de código libre que te permite editar en HTML y CSS y previsualizar los cambios en tiempo real. También permite ver los cambios en Javascript (salvando antes). Dispone de una comunidad muy activa, y opción para añadir extensiones que añaden funcionalidades y le dan mucha potencia.Está escrito en Java y se puede usar en Windows, Mac y Linux. Lo hemos usado y la verdad es que sin problemas, estamos muy contentos. Atom. El editor web de código libre creado por Github, muy publicitado, muy usado y muy potente. Es similar al anterior, aunque usando los complementos adecuados puede usarse para programar en muchísimos lenguajes. También disponible para Linux, Mac y Windows. De los dos seguramente el más famoso y con opciones para más lenguajes. Aunque si sólo quieres CSS, HTML y Javascript los dos son muy similares.

Información Tecnica, Internet, Noticias Informáticas, Soporte

El canal de HP acaba de publicar cientos de vídeos sobre cómo reparar sus productos y cambiar piezas. Excelente iniciativa.

/

Últimamente tenemos dos vertientes en el mundo de los fabricantes respecto a la reparación de sus productos. Por un lado está el “bando” de Apple (como destacado representante), que cada día hace más difícil la reparación, usando herramientas o componentes suyos que no pueden adquirirse en otros lados. Esto obviamente sólo les beneficia a esas empresas, y supone, a nuestro entender, un daño al medio ambiente y a empresas “terciarias” de soporte. Por otro lado está el bando de las empresas que apoyan la reparación de los productos (algo que permite el uso continuado de los mismos, es mejor para el medio ambiente, para la economía del usuario, para los que nos dedicamos a reparar….). HP acaba de dar un paso enorme a favor del segundo bando: ha publicado en su canal de Youtube de Soporte, cientos de vídeos con explicaciones sobre cómo reparar muchísimos de sus productos. Desde Pcs, a impresoras y portátiles. Y no sólo reparar, sino también sustituir piezas, trucos, “how-tos” y muchos más tutoriales que pueden ayudar al usuario. Los vídeos están categorizados en listas de reproducción y, para nosotros, supone una razón más para decantarnos por HP. EXCELENTE HP, así se hace (fui becario de HP hace años y me da cierta alegría que hagan estas cosas). Os ponemos un vídeo como ejemplo, de los muchos que hay.

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.

Trabajos, Webs

Auto Estauto. Página web de un taller de coches con más de 30 años de experiencia.

/

Otro de nuestros proyectos recientes, la web de Auto Estauto. Un taller de coches con más de 30 años de experiencia en el sector. La web es una página empresarial sencilla, con los servicios principales, Quienes Somos, Dónde estamos, formularios de contacto y redes sociales. Se adapta a los dispositivos móviles y contiene un slider principal con lo más destacable de la empresa. Esperamos que os guste.

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.

Scroll al inicio