Diseño Web

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

Añadir un chat de WhatsApp en WordPress

La última moda de las páginas web son los chatbots, chats controlados por inteligencia artificial que se comunican a tiempo real con los clientes. Hacia ahí va la tecnología. PERO mientras, las PYMES (siguiendo a las grandes) están introduciendo servicios de chat gestionados por los empleados en sus webs. Hoy os enseñamos a hacer eso mismo con WordPress y WhatsApp. Bueno, realmente vamos a crear un pseudo chat de WhatsApp en la página de tu empresa. Pseudo porque inicia el chat con WhatsApp pero luego sigues usando ese programa, y no el de tu web, para la conversación. Si tienes una web con WordPress (muy probable estadísticamente), y quieres que tus clientes te contacten fácilmente, WhatsApp (o WhatsApp Business) es la opción lógica. Muchos tenéis WhatsApp y habéis creado cuentas para la empresa porque lo demandan los clientes. Ya es algo común. La mayoría de los plugins para compartir contenido ya han añadido “compartir por WhatsApp“. Jetpack lo tiene desde hace tiempo. Cómo integrar WhatsApp con WordPress. Obviamente para poder integrar ambos servicios vamos a necesitar un plugin.  Os dejamos unos cuantos: WhatsApp Me. Muchas descargas y buena puntuación. Cresta WhatsApp Chat. Interesante porque además de abrir el chat y permitirte mandar mensajes, te da opción para personalizar el código que pongas por ejemplo para cambiar el mensaje por defecto o el teléfono por defecto. Detecta si estás en móvil y redirige a la aplicación de WhatsApp. Aquí tenéis la demo. Click to Chat for WhatsApp Chat. Tienes varios estilos, en algunos puedes chatear directamente desde la web, en otros usando WhatsApp (desde móvil) o web WhatsApp (desde PC). Lo interesante es que detecta si estás en un móvil y si es así te envía a WhatsApp. Si es desde un PC te abre una ventana indicándote cómo abrir la aplicación desde la web. Aquí tenéis la demo. WhatsApp Chat WP. Permite poner teléfono por defecto, personalizar el mensaje por defecto y tiene estadísticas integradas. WP Click to Chat. Whatsapp Press. WhatsApp Help Chat. El punto positivo de este plugin es que permite varios chats como Facebook Messenger o Snapchat. Por lo que veo el negativo es que en WhatsApp sólo da el teléfono para que la gente lo agregue. Vídeo.

Diseño Web, Gestores de contenidos

¿Qué solución de ecommerce elijo: Prestashop, Woocommerce, Magento…?

SmythSys IT Consulting somos una consultora TIC que buscamos solucionar los problemas tecnológicos de nuestros clientes (principalmente pequeñas y medianas empresas). Dentro de estos problemas, hay preguntas que se repiten, y en ocasiones las grabamos por si a alguien “ahí fuera” le viene bien nuestra opinión. Hoy contestamos a la pregunta recurrente: ¿qué solución de ecommerce elijo: Prestashop, Woocommerce, Magento….? ¿Cuales son las ventajas y desventajas de cada una? Cuando una empresa decide dar el paso hacia “el mundo digital” y empezar a vender online, tiene varias opciones. Soluciones en la nube, SaaS.  Es decir pagar una cuota mensual para usar un programa que ya está en la nube. En estos casos nos ahorramos el hosting (aunque no es del todo así porque también necesitaremos planes de correo y en ocasiones blog etc), no solemos tener problemas de rendimiento (porque ya ajustan ellos sus servidores a su producto), suelen ser fáciles de usar y tendremos soporte por parte de la empresa. Por lo tanto es rápido,” barato”, sencillo y funcional. Pero por otro lado todos nuestros datos (productos, facturas etc) están en la nube, en los servidores de nuestro proveedor. Tendremos poco control tanto de diseño, como de opciones de personalización (las que nos dejen) y funcionalidades extra. Si alguna vez decidimos cambiar, debemos ser conscientes que todos nuestros recursos los tenía el proveedor.Eso si, si usamos Google Trends, la herramienta que explicamos ayer, para analizar el uso en todo el mundo de varias herramientas, y ponemos a Shopify como ejemplo de Saas (hay muchos), vemos que últimamente es la ganadora. Sobre todo en USA. Aquellos países donde el miedo a la nube es menor, tienden a escoger estos servicios. Porque para un pequeño comercio es más sencillo coger un paquete ya hecho, adecuarse a él y vender directamente pagando una comisión mensual. Sabiendo además que tienen un soporte por el mismo proveedor, y que la compatibilidad, tanto de dispositivos, como de medios de pago, con las redes sociales y con los marketplace (hablaremos de ellos pronto) está asegurada. Soluciones a instalar en servidores propios o en hosting compartidos. Todavía hay muchas empresas que prefieren controlar sus programas y datos y tener el software instalado en hostings (alojamientos) compartidos o en sus propios servidores dedicados. Hay muchos, hoy vamos a usar como ejemplo a los más famosos, los tres que entran en todas las discusiones: Prestashop, Woocommerce y Magento. Aunque hay que decir que el primero y el último también disponen de soluciones tipo SaaS, hoy hablaremos de sus características como software tradicional, instalado en nuestras máquinas. Si no quieres leer demasiado, te lo contamos en este vídeo: Hay muchos aspectos que evaluar cuando queremos elegir una solución de este tipo, y siempre es mejor consultar con un consultor. Cada software tiene sus ventajas y desventajas. Volvamos a Google Trends pero ahora evaluando estos productos en España. Como veis el ganador aquí es Prestashop, seguido por Woocommerce que, en ambos gráficos, se mantiene el segundo. Aquí, como véis, Shopify crece despacio (seguramente por el idioma, por no estar en España, por haber muchas soluciones de los proveedores y por el tipo de mercado español). Eso si, esto nos da una idea del interés, pero es importante ver las características de cada uno para ver cual se nos ajusta mejor. Destacar que en este tipo de soluciones, normalmente no contamos con soporte, y tenemos que contratar a alguien que nos diseñe y mantenga la web, y un hosting adecuado (más barato para Prestashop y Woocommerce, más caro para Magento). Todos son gratis como programas (su descarga), pero necesitan puglins, módulos o extensiones (unos más que otros) para aumentar sus funcionalidades. El precio de estos varía de un sistema a otro y de un plugin a otro (desde los $20 a los $400). Hay quien dice que algunos tienen limitación de productos, pero no tiene por qué ser así. Si bien Magento está pensado para tiendas más grandes, las otras dos soluciones, con buenos servidores, bases de datos bien optimizadas etc no deberían tener problemas de rendimiento. De manera resumida: Woocommerce. Es un plugin de un sistema tan versátil, sencillo y potente como WordPress. En general tiene las ventajas y desventajas de este último. Muy sencillo de instalar y usar (user friendly), es fácil crear tiendas visualmente muy atractivas y modificar su aspecto, con los plugins adecuados (Yoast etc) puedes manejar muy bien el SEO. Ahora mismo hay plugins extra para Woocommerce para hacer casi cualquier cosa, desde gratuitos hasta de pago ( coste entre $20 y $300). No hay problema con las pasarelas de pago. Si queremos añadirle un blog para SEO (ver esto) …ya lo tenemos con WordPress.  De hecho si quieres añadir funciones extra a la web que no sean propias de una tienda, este es el ganador. Woocommerce es sin duda la solución de este tipo que más está creciendo, seguramente por su sencillez y aspecto visual. Si no quieres complicarte y quieres una tienda sencilla es una buena solución. ¿Desventajas? Varias, de nuevo las mismas que podría tener WordPress. – Todo se hace por plugins, por lo tanto hay que “pelear”, sobre todo en cada actualización, con las compatibilidades del tema elegido, de Woocommerce y de los plugins extra. Siempre se nos puede quedar alguno desactualizado o tener incompatibilidades. Al final que todo se haga a piezas es sencillo….pero acabo teniendo muchas piezas que controlar. – Lo que nos lleva al soporte, es necesario tener soporte. Tanto para el desarrollo como para el mantenimiento. – En los idiomas también dependemos de cada plugin, o nos toca traducir a mano. – Menos opciones de envío y pago que las otras. – Por último no es una tienda, es una modificación de un software para blogs y webs como tienda. Y aunque hay mucho ya desarrollado, como le pidamos funcionalidades avanzadas (multitienda, multialmacen, etc) o no es posible, o no es fácil implementarlo. Prestashop. Digamos que es el camino intermedio. Es una tienda pensada para ello, con muchísimas

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

Completion Progress: plugin de Moodle para mostrar el progreso de finalización

Cuando un alumno está realizando un curso en una plataforma de Moodle, es muy interesante poder mostrarle su progreso en dicho curso. Esto consigue que siga la estructura que hemos diseñado, pueda controlar y gestionar el tiempo en el curso y vea que secciones o actividades le faltan por acabar o enviar. En unos días hablaremos sobre cómo activar dicha monitorización de progreso en Moodle. Hoy suponemos que ya está activa. Moodle tiene unos bloques de Progreso de Completado o de Finalización que muestran el avance en cada curso, pero sinceramente no son muy atractivos y no funcionan demasiado bien. A nosotros nos tardaba en mostrar el progreso de cada curso finalizado (depende del cron que hayas habilitado). Buscando una alternativa para un cliente encontramos el plugin: Completion Progress y es excelente. Tanto, que Moodle lo recomienda ahora en sus artículos sobre los Bloques de Progreso de Finalización. Este plugin permite al alumno ver (dependiendo de la configuración que ha establecido el administrador), las actividades que quedan por acabar, su nombre, el estado (completado y enviado, completado pero no enviado y no completado) y el porcentaje del total que han realizado. Todo en una barra de colores  (configurables) muy clara en cada curso. En su Area Personal, si los administradores lo activan, los alumnos pueden ver un resumen de los progresos de sus cursos (los que lo tengan activado). Los profesores pueden ver, además , los progresos de los alumnos en estas barras a modo de resumen. Realmente un gran añadido para los que uséis Moodle, visualmente atractivo y que ayuda mucho a alumnos y profesores. Los cursos cambian mucho así.

Diseño Web, Gestores de contenidos, Trucos

Cambiar el nombre de usuario en WordPress. Cambiar el nombre al usuario admin.

Unos de los fallos que puede achacársele a este gran gestor de contenidos, es que, una vez creado un usuario, no se puede cambiar. Probadlo, id a Usuarios > tu usuario y editadlo. Veréis como el nombre de usuario está en gris con un mensaje al lado que dice “El nombre de usuario no puede cambiarse”. Pero en muchas ocasiones puedes querer cambiar este nombre. Por ejemplo: en una empresa si el usuario ya no trabaja para ésta (o el proveedor ha cambiado). Si hemos cometido el fallo de seguridad de dejar el usuario admin o llamarlo así. Es un fallo de seguridad porque les acabas de facilitar a los hackers la mitad del trabajo. Es lo primero que probarán. Porque te da la gana cambiarlo. Es tu página. ¿Cómo cambiar el nombre de usuario? Hay varios métodos. El que recomienda WordPress es crear otro usuario (administrador) con el nuevo nombre. Salir del actual, volver a entrar con el nuevo, borrar el antiguo y te pedirá qué hacer con el contenido del usuario antiguo. Le dices que lo asigne al nuevo y ya está. Bien, no se tarda mucho…pero es algo rebuscado ¿no? Eso si no necesita nada extra. Usando un plugin. ¿Que no se puede hacer en WordPress con el plugin adecuado? En este caso recomendamos Username Changer. Lo instalas, configuras (poco que poner), y puedes ir a tu usuario y cambiarle el nombre. Así de fácil. Una vez lo ha cambiado, si quieres puedes desactivar o borrar el plugin. Pero más fácil imposible. Gran plugin. Cambiar el nombre en la base de datos usando, por ejemplo, phpMyAdmin. Necesitas algo más de conocimiento para instalar phpMyadmin (no lo dejes instalado o accesible en el servidor..que es otro vector de ataque). Tienes que irte a la tabla wp_users y editar el usuario que quieras. El campo que tienes que cambiar es el user_login, por ejemplo de admin a pepe (o lo que quieras). Con estos métodos puedes cambiar tu nombre de usuario de WordPress. Insisto, si tienes un usuario admin, cambia el nombre o bórralo.

Diseño Web, Gestores de contenidos, Trucos

Plugin gratis para Popups en WordPress

La semana pasada un cliente nos pidió un plugin de popups para su web en WordPress. Está muy “de moda” en ciertas webs hacer que salte en la página principal, o en ciertas otras páginas, un popup anunciando productos, u ofreciendo formularios de suscripción a newsletter. También se puede poner como ofertas, avisos de políticas de cookies etc. Está claro que los popups pueden llegar a ser muy molestos, pero que bien dosificados también son útiles. Aunque también hay que tener en cuenta que ciertos usuarios, normalmente más avanzados, pueden tener bloqueadores de popups y no verlos. Si los ponéis sólo en ciertas páginas, y los configuráis de manera que si el usuario ha dicho que no quiere verlo no le salga más (por cookies por ejemplo) son una buena herramienta de venta. Aquí os dejamos un plugin gratuito, con funciones avanzadas de pago, que os permite mucha versatilidad en la creación de dichos elementos web: Popup Maker. Como en todos los plugins que permiten bastantes opciones, habrá que pasar un pequeño proceso de aprendizaje. Entre otras cosas permite: Los siguientes tipos de popups: “Slide Outs, Banner Bars, Floating Stickies, Notifications, Loading Screens, Video Lightboxes,  y Opt-In Forms“. Compatible con la mayoría de formularios para WordPress. Compatible con la mayoría de plugins de creación de listas. Muchas condiciones para poder mostrar el popup sólo a quien quieras. Controla la frecuencia de aparición con cookies. Puedes poner triggers para que se muestren al realizar una acción (pinchar en un objeto, cargar una página…). Triggers de fecha para que salga sólo en ciertos días/horas. Estadísticas simples. Podéis ver más información sobre cómo usarlo en su canal de Youtube o en su blog.  

Diseño Web, Trucos

Cómo deshabilitar un botón de un formulario según el estado de un checkbox

Hace unos días un cliente nos pidió que no se pudiera mandar un formulario si un checkbox (casilla de verificación) no estaba marcado. Por ejemplo el típico de Acepto los Términos y Condiciones. Os dejamos una manera sencilla de hacerlo. En nuestro caso, la casilla la querían marcada por defecto, esto es fácil: <input type=”checkbox” name=”terminos” checked> Ahora lo que vamos a hacer es crear una función de Javascript para que compare el estado de la casilla cada vez que se haga click en ella. Este script lo podemos poner al final de la página del formulario o llamarlo en su carga: <script type=”text/javascript”> function disableSending() { document.nombredelformulario.nombredelboton.disabled = !document.nombredelformulario.terminos.checked; }; </script> Como veis esto comprueba si el campo términos (se puede cambiar), no está marcado y, si es así, deshabilita el botón. Obviamente tenemos que cambiar nombredelformuario y nombredelbotón por lo que sea en nuestro caso. Podemos poner los nombres que queramos mientras en el html pongamos name=”nombre” como hemos hecho en términos. Hemos mantenido el nombre del campo términos pero también se puede cambiar. Ahora hay que cambiar el checkbox para que llame a esa función cada vez que se pinche. Modificamos el campo de arriba así: <input type=”checkbox” name=”terms” checked onclick=”disableSending();”> Podéis ver un ejemplo aquí. A mi me gusta entonces cambiar el CSS para que el checkbox cambie de color si está deshabilitado. Por ejemplo: button[disabled] { background-color: grey; color: #666666; } Con eso ya lo tenéis funcionando.  

Diseño Web, Soporte, Trucos

Revive Adserver: los anuncios dejan de funcionar tras activar https

Hace unos días pasamos la web de un cliente a https, como debería ser lógico estos días. El cliente tiene un servidor de anuncios con Revive Adserver y, pasado un día (cuando la caché se renovó), los anuncios dejaron de mostrarse. Os dejamos la solución por si alguno encuentra el mismo problema. La idea principal la encontramos aquí, y tiene lógica porque pasa con todo el contenido https: (…)if you supply an HTML banner, and the zone is rendered under SSL, Revive performs a check if there is any SSL-unsafe code in the banner. If it does detect that kind of code, the the banner is simply not delivered. Es decir, si la zona está en un sitio con https, mira su contenido y, si hay algo de http (una imagen, un enlace etc), no lo manda. Por lo tanto la solución es revisar: La manera de mostrar los anuncios. Ya que estás ponlos en https (la llamada al script por ejemplo). Cada uno de los anuncios. Que los banners y los enlaces apunten a https no http. Esto puede ser un problema si tu anunciante no tiene esa opción. Con eso, tras limpiar caché, deberían aparecer los anuncios de nuevo. Otra opción que tenéis es forzar desde el servidor (Apache, Nginx) una redirección de todo el contenido http a https. Esta semana os enseñaremos a hacerlo también en Laravel.  

Diseño Web, Noticias SmythSys, Trabajos

Nueva web Aseata.es

Nueva web para uno de nuestros clientes Aseata.es. Una asociación empresarial relacionada con las líneas aéreas. La página web es una página empresarial sencilla, con contenido que explica las funciones de la empresa, servicios que ofrecen, bolsa de empleo etc… y formularios de contacto para poder mandarles preguntas o solicitudes varias. Además, incluye zona privada para miembros de la asociación desde la que pueden acceder a contenido privado. Una web sencilla, de las más sencillas (y económicas) que hacemos en WordPress en SmythSys, pero muy funcional y con buena presencia empresarial. Si queréis alguna similar, podéis poneros en contacto con nosotros.      

Diseño Web, Gestores de contenidos

Los mejores plugins de WordPress para insertar códigos en header y footer

Muchos servicios externos requieren insertar código en la sección del header o footer de vuestra página. Esto en WordPress se puede hacer de varias maneras: Mediante un plugin. De eso trata el artículo de hoy y os dejaremos los mejores para que los probéis. Es lo más sencillo obviamente, pero también estamos añadiendo plugins (añade lentitud y vectores de ataque). Editando los ficheros header.php o footer.php de tu plantilla. No recomendable porque en cuanto actualices la plantilla los cambios seguramente se eliminarán. Con un tema hijo (child theme). Si quieres modificar los ficheros de tu plantilla lo mejor es hacer esto primero. Así tienes las modificaciones que quieres y podrás actualizar la plantilla padre sin miedo a que se pierda nada. Tu tema hijo coge todo del padre, y añade las modificaciones. Hoy os dejamos los plugins más usados para añadir scripts en tu cabecera o en el pie de página: Insert Headers and Footers Muy sencillo pero con más de 300.000 instalaciones. Sólo tienes que instalarlo, ir a Ajustes> Insert Headers and Footers y ahí tendrás un espacio para añadir los script de la cabecera y otro para los del pie. Head, Footer and Post Injections Tiene menos instalaciones que el anterior (más de 100.000), pero aún así mejor valoración y muchas más opciones. No sólo podemos añadir código en el header y footer, sino también en posiciones de los posts, páginas y mucho más. Para el que necesita más funcionalidades. Header and Footer Scripts Inserter. Puedes insertar códigos HTML, JavaScript y CSS (estos dos últimos mediante tags). Probadlos, según lo que necesitéis uno os vendrá mejor que otro. De esta manera podréis insertar los script en header y footer sin mucha dificultad.

Diseño Web, Seguridad, Servidores, Sistemas

Cómo poner certificado SSL en tu web usando Cloudflare

Hace unos días un cliente nos dijo que por qué no activábamos SSL en su web ( dados los cambios de Google ) a través de Cloudflare porque era “muy fácil”. Es fácil, pero queremos explicaros las ventajas y desventajas. Cloudflare ofrece varias opciones para activar los certificados. Os lo dejamos de manera sencilla: Si no tienes certificado en tu servidor y o ni ganas o ni conocimiento sobre cómo instalarlo:  Flexible SSL. Este modo es el más sencillo. No requiere configuración, ni conocimientos ni instalación. Damos a un botoncito en nuestro panel de Cloudflare y, como por arte de magia, tenemos https (SSL). ¿Fácil no? Pues como siempre no es oro todo lo que reluce. Este método sólo cifra desde Cloudflare hasta el visitante. Pero el trayecto de Cloudflare a tu servidor está sin cifrar. Si, en teoría todo debería pasar por Cloudflare, pero de la teoría a la práctica hay mucho trecho. Realmente no tienes un certificado, pero el cliente (y Google etc) ven como si lo tuvieras porque Cloudflare lo emula. Pero si se cae ésta, o dejas de usarlo, ya no lo tienes. Hasta ellos dicen que : “It should only be used as a last resort if you are not able to setup SSL on your own web server, but it is less secure than any other option…..(…) This option is not recommended if you have any sensitive information on your website” En resumen es una “chapucilla” que puede servir, si no puedes instalar un certificado, para salir del paso. Pero recomendamos que sea sólo momentáneo. Si puedes instalar un certificado en tu servidor: Full SSL. Esta es la opción clásica y más segura para activar SSL. Se instala el certificado (del tipo que sea) en tu servidor y así todo el trayecto está cifrado. Requiere que tengas un certificado válido. Puedes usar los de LetsEncrypt o alguno de pago. Pero también Cloudflare emite certificados Es lo que llama Origin CA , en el que es Cloudflare la que actúa como entidad certificadora. Eso si en Free y Pro son compartidos, a partir de Business creo que es ya un certificado personalizado. Eso si, instalar un certificado en un servidor no es muy sencillo, requiere conocer el proceso. Y luego, una vez activado, podemos tener que revisar los enlaces y cambiar código en base de datos o por código porque tendremos muchos que estén puestos por http. Por ejemplo los enlaces puestos a mano tendrán que cambiarse a manos. Strict (SSL-Only Origin Pull):  Esto es sólo para las cuentas Enterprise. Lo que hace es que si tienes alguna petición http en tu web, te la devuelve como https aunque no lo hayas configurado así. Así que Cloudflare te puede ayudar a pasar a SSL si no tienes ni idea de cómo hacerlo, con la opción sencilla. Si no, te proporciona un certificado, o puedes hacerlo por tus medios.

Scroll al inicio