Diseño Web

Diseño Web, Información Tecnica, Linux, Servidores

Cómo configurar http/2 para Apache (ejemplo con Debian)

Hace unos días explicamos las ventajas de http/2, las páginas vuelan. Hoy queremos explicaros cómo activarlo en vuestro servidor Apache. En el ejemplo supondremos un servidor Debian (varía poco en otro sistema). Apache tiene que tener el mod_http2. Lo primero es que tu versión de Apache tiene que venir con el módulo http2  (mod_http2) compilado. Si no puedes o cambiar a una versión que lo tenga, o compilar Apache. Para poder hacerlo tu sistema necesita al menos la versión 1.2.1 de libnghttp2. Una vez comprobado, compila Apache con –enable-http2. Http/2 funciona casi exclusivamente con SSL (https). Necesitas certificado. Aunque no es una petición de http/2, la mayoría de los navegadores sólo hablan http/2 con certificado. Así que asegúrate que tus webs (las que quieres que vayan con http/2) lo tienen. Recuerda que puedes tener ambas cosas activadas así que puedes tener http/2 con alguna web y http/1 con otras. Seguramente tendrás que cambiar tu Módulo de MultiProcesamiento (MPM). Http/2  no funciona con todos los MPM. No funciona con apache mpm prefork desde apache 2.4.27. Hay que usar mpm worker o event. Pero mpm worker y event no pueden utilizar mod_php necesitan por fuerza usar fastcgi o php-fpm, así que a lo mejor también tienes que cambiar eso. Os dejamos un ejemplo:     apachectl stop     apt-get install php7.1-fpm # Instala el Php-fpm Esto puede variar por la versión     a2enmod proxy_fcgi setenvif     a2enconf php7.1-fpm # De nuevo depende de la versión a instalar.     a2dismod php7.1 # Deshabilita mod_php     a2dismod mpm_prefork  # Deshabilita el prefork anterior porque sólo se puede usar un MPM     a2enmod mpm_event  # Habilita event. Puedes habilitar worker en vez de este.     apachectl start Configuración. Lo primero es activar el módulo con : LoadModule http2_module modules/mod_http2.so O activarlo con: a2enmod http2 apachectl restart Después tienes que modificar tu fichero de configuración de Apache para decir si quieres que todas las webs vayan preferiblemente con http/2. Por ejemplo con : Protocols h2 http/1.1 o Protocols h2 h2c http/1.1 Como veis si no puede usar el 2 carga el protocolo en versión 1. Si, por el contrario, quieres activarlo sólo por web, por virtual host, tienes que hacer algo como: Protocols http/1.1 <VirtualHost *:443> ServerName tudominio.es Protocols h2 http/1.1 </VirtualHost> Recuerda reiniciar Apache para que todo se active.

Diseño Web, Información Tecnica, Sistemas

Http/2 la evolución de http. ¡Hace que las páginas vuelen!

Internet tiene varios años ya. Y estamos usando casi el mismo protocolo para mostrar contenido web que cuando salió: http/1 (o https ahora). Esto empieza a notarse. Afortunadamente tenemos el http/2 a nuestro alcance, su evolución. Nosotros lo estamos implementando en los clientes que tienen webs en nuestro hosting, ¡ y las páginas vuelan! ¿En qué cambia http/2? El viejo http 1.1 (el que usan muchas webs todavía) tiene un gran defecto: sólo puede mostrar una petición por conexión TCP. Es decir, manda un contenido por petición y espera a que el anterior se cargue. Obviamente, hoy en día, donde se hacen más de 100 peticiones por página (css, imágenes, vídeo, javascript…) y el contenido es multimedia, hay que hacer muchas peticiones y esto es muy lento. Y que sea lento no sólo hace que el cliente se canse, sino que afecta a nuestro SEO (posicionamiento) como hemos explicado varias veces. La solución de http/2 (aquí el paper) es la multiplexación (algo ya usado desde hace mucho en comunicaciones). Lo que hace es dividir cada petición en pequeños paquetes y mandar varias peticiones por conexión. De esta manera, en una misma conexión puede estar enviando varias partes de peticiones, cargándolas en paralelo por el mismo canal y no teniendo que esperar a que una acabe para mandar la siguiente. Al llegar sabe distribuirlas a su destinatario. Obviamente tiene otras mejoras como server push, compresión de cabeceras, priorización de recursos, formato binario (no es texto plano) etc que hacen que el aumento de rendimiento sea muy notable. ¿Tengo que cambiar algo para activar http/2? La activación de http/2 es algo que deben de hacer los encargados de los servidores o del hosting porque se hace en el servidor web. No lo puede hacer el cliente. Lo bueno es que http/2 es compatible con http/1 y usa las mismas funciones y recursos. Tu web, tus APIs y todos tus recursos son compatibles con este protocolo. Eso si, si todavía no lo has hecho (deberías) tu web debería estar funcionando con certificado, https, porque http/2 funciona mejor con recursos en protocolos seguros. ¿Realmente mejora el rendimiento?  ¿Cuanto? Se dice que en muchas webs (no todas), la implementación sin mejoras puede aumentar el rendimiento del orden de 15-20%. Si esta implementación se retoca, el aumento puede ser mayor. Para que veas tres ejemplos os dejo dos demos. Demo1 , Demo2 y Demo3 (varias pruebas aquí).  Puedes ver de manera rápida la mejoría. Pero además es que no implica nada porque cuando se activa se activa con el http/1 como “fallback”. Así que si algo no es compatible, siempre se puede cargar por http/1. ¿Cómo puedo saber si mi página está cargándose por http/2? De varias maneras. Tests online: https://tools.keycdn.com/http2-test https://tools.geekflare.com/tools/http2-test https://cdnsun.com/knowledgebase/tools/http2-support-test Extensiones del navegador: Chrome: HTTP/2 and SPDY indicator Firefox: HTTP/2 indicator. Con el inspector de Chrome o Firefox: En el inspector de Chrome hay que ir a la pestaña de Network, botón derecho en las columnas y habilitar la columna protocolo. H2 indica que está cargando por http/2 , http/1.1 que está cargando por 1.1.        

Diseño Web, Gestores de contenidos

Cómo crear un menú en WordPress

Parte de nuestra labor es de formación en varias áreas. Para eso colaboramos con Smyth Academy dando cursos en múltiples temas de TIC. Entre ellas están los cursos de WordPress. Hoy os dejamos un vídeo, parte de los cursos online, sobre cómo crear menús en WordPress. Este curso está pensado para la gente que comienza a aprender a crear páginas web en WordPress, y también para aquellos clientes que quieren gestionar sus propias páginas web sin contar con la ayuda de terceros (ahorrándose ese coste). Obviamente, empezaremos con vídeos muy sencillos. Cómo crear un menú en WordPress. En el vídeo, como decimos parte de nuestros cursos online, os enseñamos a: crear un menú. Añadir páginas, entradas, categorías y entradas personalizadas. Editar los nombres de cada entrada. Crear submenús. Colocarlo en las posiciones que la plantilla nos permita. Colocarlo en otras posiciones de un tema por widget. Aquí lo tenéis.

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.