Blog

Diseño Web, Gestores de contenidos, Trucos

Módulo de sitemap para Prestashop 1.7

/

La versión más reciente de Prestashop (cuando escribimos el artículo), la 1.7 , al contrario que su predecesora, no incluye un módulo de sitemap. Algo esencial para el SEO. ¿Que podemos hacer? En este artículo te damos soluciones. Posibles soluciones. Tienes varias opciones a considerar. Generar el sitemap manualmente. Siempre puedes generar los sitemaps manualmente usando sitios online y enviarlos a Google Search Console (o similares). Pero aunque es factible, no me parece muy práctico ya que una tienda cambia los productos constantemente, y tendríamos que estar enviando sitemaps a mano muy a menudo. Si además vuestro sitio es multilingue el trabajo se multiplica. Esto no es práctico, aunque si viable para dar el sitio de alta en los buscadores mientras implementamos otra solución. Comprar un módulo. Prestashop es un CMS gratuito, pero en cuanto quieres realizar funciones extra tenemos que comprar módulos. Podéis buscar un módulo oficial por entre 30-60€ y así os aseguráis que funciona, que tenéis detrás a alguien al que preguntar en caso de problemas y que pueda tener actualizaciones (aunque a veces sean también de pago). Usar los módulos de Prestashop 1.6 Algunos usuarios de la comunidad de Prestashop han reportado que algunos de los módulos gratuitos que funcionaban par ala versión 1.6 de Prestashop, funcionan también para la 1.7. Tal cual o, en algún caso, con modificaciones. N.B. Yo lo probaría bien antes. Porque creo que hay cambios en la url de los productos en la nueva versión y hay rumores que las imágenes pueden dar problemas con el atributo alt y también las páginas con varios idiomas. Así que podéis instalarlos y probar bien antes. Os dejo ejemplos y enlaces: Módulo de Presta Toolkit. Por lo que dicen los usuarios, el módulo de sitemap de Presta Toolkit funciona en 1.7 sin tener que hacer nada más. Antiguo módulo de Google sitemap. El antiguo módulo de Google sitemap también parece que funciona. Sin embargo algunos tienen problemas al instalarlo. Podéis descargarlo de aquí.  Cuidado porque tal como se descarga no se puede instalar, hay que cambiar el nombre tanto del zip como de la carpeta dentro a gsitemap.zip y gsitemap. Entonces deberíais poder instalarlo. Si no, subid la carpeta descomprimida directamente a las carpetas de módulos llamándola gsitemap y la debería reconocer Prestashop. Esperamos que os sirva y que pronto saquen algún otro módulo gratis o una nueva versión de los anteriores. Porque tampoco es tan complicado un programa que genere un sitemap y es vital para las páginas web.

Soporte, Trucos

Desactivar aplicaciones en segundo plano en Windows para ahorrar batería y mejorar rendimiento

/

Windows 10 tiene una sección, algo escondida, donde permite activar o desactivar las aplicaciones en segundo plano. Si están activas dichas aplicaciones puede actualizarse, enviar y recibir notificaciones aunque no estén en uso. Obviamente todas estas aplicaciones abiertas (bastantes por defecto) consumen recursos del sistema y batería. Así que recomendamos desactivarlas y activar sólo las del sistema y las que nos interese. Cómo desactivar las aplicaciones en segundo plano. La sección está algo oculta, en Configuración >Privacidad > Aplicaciones en segundo Plano. Ahí podréis elegir cuáles queréis desactivar. Os recomendamos dejar sólo as del sistema y que las otras se actualicen

Diseño Web, Gestores de contenidos, Legalidad

Casilla de aceptación de tratamiento de datos en formularios WordPress con Contact Form 7

/

Ya os explicamos ayer que es obligatorio, desde el punto de vista de las leyes europeas de protección de datos (RGPD), incluir una casilla de aceptación de la política de tratamiento de datos por parte del cliente. Para que tratemos los datos personales que nos cede ese cliente, él tiene que aceptar activamente (marcarla) nuestra política de privacidad o nuestra política de tratamiento de datos ( donde quiera que esté). La mayoría de las páginas en Internet no tiene esto. También os dijimos que iríamos explicando cómo hacer esto en los diferentes gestores de contenidos más conocidos. Hoy empezaremos con WordPress. Cómo crear la casilla de aceptación del tratamiento de datos. Para crear esta casilla vamos a suponer que estáis usando el famoso plugin de formularios de contacto Contact Form 7. Es uno de los más usados (y tenemos que elegir alguno para demostrarlo). Algunos formularios no permiten añadir casillas de este tipo (yo no los usaría) y en otros se puede hacer de manera similar. Así que instalamos y activamos el plugin. Después veremos que tenemos un apartado Contacto en el  menú izquierdo de nuestro backend, y un submenú para ir a los formularios. Podemos crear un formulario nuevo o editar el existente. Para crear la casilla tenemos que: Añadir el elemento aceptación que nos permite añadir este plugin. Esto crea la casilla. Poner antes o después el texto que queramos con los enlaces pertinentes. Si no sabemos crear enlaces podemos usar el editor de WordPress y copiar el código. Salvarlo y copiar el código en una página de contacto, una entrada o un widget. Esto crea una casilla que, si no se marca, deshabilita el envío del formulario. Que es lo que queríamos. La casilla tiene opciones para funcionar al revés (si se marca no envía) o para dejarla marcada por defecto (NO recomendamos esto último). Vídeo sobre cómo crear la casilla en WordPress con Contact Form 7. Nota (16/05/2019): casi todos los expertos recomiendan ahora guardar un registro de dicha aceptación. Aquí os mostramos cómo.

Diseño Web, Información Tecnica, Legalidad

Los formularios de contacto incumplen la LOPD y RGPD. Hay que aceptar la cesión de datos.

/

Seguramente os sorprenderéis al saber que la mayoría de los formularios de contacto de las páginas web en estos momentos NO cumplen con la normativa vigente.  Sobre todo en lo relativo a la aceptación de la cesión de sus datos personales. Os explicamos por qué. En estos momentos, además de la  LSSI-CE (Ley 34/2002 de Servicios de la Sociedad de la Información y del Comercio Electrónico) las páginas web deben cumplir la LOPD (Ley Orgánica de Protección de Datos de Carácter Personal. Ley Orgánica 15/1999, de 13 de diciembre). A partir del 25 de mayo sabéis que entra en vigor el RGPD (reglamento General de Protección de Datos)  y en ambas se indica que se debe obtener el consentimiento para el tratamiento de los datos personales. Pero la mayoría de los formularios de contacto carecen de ese consentimiento. Os mostramos lo que queremos decir. Mal. No tiene la casilla de consentimiento para el tratamiento de datos. Bien. Tiene una casilla que el usuario debe marcar para aceptar la Política de Privacidad (o el Aviso Legal o donde esté el la política de tratamiento de datos). Recordar que no es lícito, o muy lógico, premarcar estas casillas. El usuario debe aceptar esta política activamente. Os lo explica mejor este vídeo: Así que ya sabéis, a corregir vuestros formularios de contacto. Y si tenéis alguna duda recordad que nosotros colaboramos con consultores expertos en el tema que pueden aconsejaros. En unos días os enseñaremos a poner estas casillas en WordPress, Prestashop y Moodle. Nota (16/05/2019): ahora casi todos los expertos recomiendan guardar un registro de dicha aceptación. Tenemos otro artículo en el blog explicando cómo en WordPress con CF7.

Linux, Servidores, Sistemas, Trucos

Ncdu. Comprueba el uso de tu disco desde terminal en Linux mejor que con du

/

Ya hemos comentado que para ver el uso del espacio por termina en Linux se puede usar el comando du (es el que usamos todos). Pero du es más bien escaso (por decir algo). Si necesitamos más información, conviene instalar ncdu, del que hablamos hoy. Ncdu (Ncurses disck usage) es un analizador de disco programado en C y realizado bajo la interfaz ncurses (que permite crear aplicaciones con interfaces basadas en texto).  Añade varias funcionalidades a du y lo hace más visual y completo. No viene por defecto en muchas distribuciones pero si está en los repositorios de las principales, así que puedes instalarlo fácilmente. En Debian y similares con: sudo apt-get install ncdu Uso del comando. Una vez instalado, si ejecutas ncdu sin opciones obtendrás un listado de directorios en forma de árbol. También se puede dar una ruta específica como: ncdu /home/ Podrás navegar por el listado con el cursor o las flechas (lo bueno de la interfaz gráfica). Pulsando la tecla i encima de un directorio te dará información del mismo. Como el programa está destinado a limpiar servidores, también te permite la opción de borrar. Puedes ponerte encima de una elemento y pulsar la tecla d para borrar (te pide confirmación, tranquilos). La tecla ? te lleva a la ayuda con más comandos que puedes realizar. Para salir tienes que pulsar la tecla q. Además de la interfaz visual, ncdu tiene funciones extra. Por ejemplo podemos crear informes y enviarlos a un fichero: ncdu /home/datos -o informe.txt Estos ficheros tienen mucha información y no son muy amigables, puede pueden usarse como fuente y leerse desde el mismo comando: ncdu-f informe.txt Además, podemos programar la creación de estos informes en un crontab. Hay muchísimas otras opciones como exclusiones, quiet mode etc, pero para más información mejor consultad el manual oficial. Como veis un pequeño comando muy útil para los que usamos Linux.

Diseño Web, Gestores de contenidos, Trucos

Cómo crear sitemaps de idiomas distintos en Prestashop y enviarlos a Google Search Console

/

Hace unos días explicábamos en el blog cómo añadir la etiqueta hreflang y canonical en Prestashop para evitar penalizaciones por contenido duplicado. En ese artículo decíamos que había que abrir “en Google Search un sitio por cada idioma con un sitemap independiente por cada idioma“. Algunos habéis visto que no era tan fácil, hoy os dejamos cómo hacerlo. Google Search Console te permite decirle a Google que tienes una página y características sobre ella. Además te permite que Google te envíe errores que detecta, te indique cómo ve la página y muchas otras herramientas útiles para webmasters y dueños de páginas. Entre ellas el envío de sitemap, algo básico para indicar a Google la estructura de tu web, que tiene que indexar y qué no. Lo realmente molesto es que tienes que abrir una propiedad por cada sitio con que cambie la url. Es decir, habría que abrir un sitio con www.tupagina.es y otro con tupagina.es  (uno con y otro sin) e indicarle cual es la principal. También había que añadir uno con http y otro con https durante la transición de páginas con y sin certificado (imagino que en un futuro sólo con https). También tenemos que añadir propiedades distintas si queremos diferenciar idiomas o sitios geográficos (puede que no sea lo mismo, ver más abajo), caso que nos incumbe ahora. Esto hace que Google los trate como sitios diferentes y no la misma web duplicada. Cómo proceder. Aquí hay diferencias de opiniones y no creo que nadie sea un experto. Pero apostamos por lo siguiente. Añadir una propiedad por el sitio canonical. Esta es nuestra base, nuestro sitio principal y por defecto. Por ejemplo tudominio.es. Puede que no sea necesario si tu web principal es la de un idioma (tudominio.es/es) por eso hay gente que dice que no es necesario. Añadir una propiedad por cada idioma que queramos diferenciar. Esto, junto a  una buena configuración de hreflang, hace ver a Google que cada página de idioma es diferente y así evitar las peticiones de contenido duplicado. Ya no lo serán porque serán propiedades diferentes. Por ejemplo tudominio.es/es/  y tudominio.es/en/ Añadir una propiedad por cada zona geográfica. Por ejemplo puedes querer diferenciar entre contenido para España o para sudamérica, aunque tengan el mismo idioma. Obviamente dentro hay que decirle la zona de destino preferida. Tener una propiedad para cada idioma (caso que nos ocupa) te permite recibir estadísticas y errores de cada idioma de manera diferenciada, y tener mayor control del SEO de cada una de ellas. Además de decirle a Google que son, de hecho, sitios diferentes. Obviamente hay que generar un sitemap por cada idioma y por la página principal. La mayoría de los plugins de Prestashop lo hacen automáticamente si detectan que tienes varios idiomas. Si no puedes generar los sitemaps a través de webs dedicadas a ello. Otro día os hablamos sobre los sitemaps en Prestashop 1.7 (no viene con módulo por defecto). Problema. Los plugins generan urls como: 1_es_0_sitemap.xml 1_fr_0_sitemap.xml 1_en_0_sitemap.xml Después hay que enviar los sitemaps en cada propiedad. Pero los que habéis intentado esto en Prestashop habéis encontrado el pequeño problema que existe: la propiedad creada por cada idioma incluye en subdirectorio o delimitador de idioma, y los sitemaps cuelgan de la raíz. Es decir en la propiedad en español tenemos que añadir (o espera) el sitemap tudominio.es/es/1_es_0_sitemap.xml  PERO la url real de ese sitemap es tudominio.es/1_es_0_sitemap.xml Así que Google no lo encuentra. Solución. La solución es sencilla: hay que crear una redirección de la url que espera Google a la real. Se puede hacer de dos maneras, o directamente en Apache o Nginx (el servidor web) o, más común y más sencillo, editando el fichero .htaccess de tu servidor (si es Apache). Si no lo tienes para editar créalo por FTP. Os pongo un ejemplo de redirección que tenéis que editar y cambiar con vuestros datos: redirect 301 /es/1_es_0_sitemap.xml http://tudominio.es/1_es_0_sitemap.xml redirect 301 /fr/1_fr_0_sitemap.xml http://tudominio.es/1_fr_0_sitemap.xml Como veis esto lo que hace es que cualquier url que vaya a http://tudominio.es/es/1_es_0_sitemap.xml la lleva a http://tudominio.es/1_es_0_sitemap.xml . Es decir le quita los códigos de idioma a la url del sitemap. La redirección 301 le indica a Google que se ha movido permanentemente a esa url (para que no penalice). Con esto podemos mandar el sitemap de cada idioma y Google lo encontrará. Espero que os sea útil.

Diseño Web, Trucos

Crear enlaces en tu web para poder llamar por teléfono al pinchar en ellos. HTML

/

Hace unos días un cliente nos preguntó si podíamos hacer que cuando los visitantes a su página pincharan en el teléfono desde un móvil éste automáticamente llamara. Pues sí, con HTML5 se puede, y hoy os explicamos cómo. Cómo se hace. Veamos, un enlace tiene la siguiente estructura (si miras su código html): Si quieres ir a Google pincha <a href=”https://www.google.es”>aquí</a> Aquí tendrá la refencia que si pinchas lleve a Google al estar entre las etiquetas a y tener el código de enlace href (hay más opciones). Llamada por teléfono. Para que llame por teléfono hay que poner: Si quieres contactarnos llama al <a href=”tel:+34111111111″>111111111</a> Donde obviamente los unos los cambiamos por el teléfono. Es decir añadimos la etiqueta tel a la href. Recordad que las páginas web son internacionales. No os olvidéis del 0034 o +34 para España. Si se pincha en el enlace en un ordenador intentará usar un programa de llamada como Skype o alguno de VOIP. Podemos crear enlaces sólo para dispositivos móviles si quieres. Llamada por skype. Este es el código. <a href=“skype:usuario_skype?call”>Pincha para llamar por Skype</a> Como veis se le añade la etiqueta skype con el código que hemos puesto de usuario y ?call. También valen: <a href=”skype:+3411111111?call”>Llámame por Skype</a> Para llamar al número. Poner callto en vez de skype lo reconoce Skype si lo tienes instalado…pero no es un estándar y no se recomienda.  

Gráficos y Fotografía, Trucos

Cómo pixelar o difuminar una cara en una foto con Paint o Gimp

/

Cuando tenemos páginas web o redes sociales, y queremos subir la foto de una persona, pero no tenemos su consentimiento, lo lógico es que pixelemos o difuminemos la cara. Más aún cuando estamos hablando de menores. Un cliente nos ha preguntado cómo hacerlo, así que os dejamos un vídeo del proceso usando dos programas. Primero MS Paint, programa que está en todos los Windows. Es más difícil de hacerlo en Paint, y los resultados son peores, pero para un apaño os sirve. Esto es normal porque Paint es un programa muy básico. Como mejor solución os enseñamos también cómo hacerlo en Gimp, el programa de retoque fotográfico gratuito, alternativa a Photoshop del que sabéis que somos fans (porque no hay que pagar jejeje). Os recomendamos instalarlo porque es muy útil. En Photoshop se hace de manera muy parecida a Gimp (tiene herramientas y filtros similares). Proceso. En MS Paint el truco es seleccionar la cara y luego minimizar la selección pulsando Ctrl y reduciendo la selección (o Ctrl -). Una vez reducida la volvemos a aumentar y eso hace que pixele. Como veréis en el vídeo, podéis tener que hacerlo en varios intentos. En Gimp sólo tenemos que seleccionar la cara con la herramienta de selección elíptica, y luego tenemos dos opciones: Aplicar un filtro de desenfoque (como el de pixelar o el desenfoque Gaussiano). Usar la herramienta de emborronado para difuminar la cara. Vídeo con el proceso.

Cursos Internet, Diseño Web, Gestores de contenidos

Cómo crear una entrada en WordPress.

/

Dentro de nuestros tutoriales básicos de WordPress, hoy os dejamos cómo crear una entrada. Las entradas se diferencian de las páginas en que son contenidos normalmente más dinámicos, más variables (puedes publicar entradas cada día) y las páginas suelen ser contenido más estable. Tanto las entradas como las páginas de WordPress son la manera de agregar contenido a tu web. Hoy explicamos las generalidades de la creación de una entrada. Luego puede haber particularidades debidas a la plantilla o a plugins instalados. En este caso hemos supuesto que estamos con la opción básica sin añadidos. Contenido. En el tutorial enseñamos a: Crear una entrada Añadir imágenes Añadir vídeo Crear enlaces Escoger una imagen destacada. Programar la entrada Asignarla a una categoría Crear categorías Cambiar el Extracto. Permitir o no comentarios. Vídeo tutorial.

Información Tecnica, Internet, Noticias Informáticas, Seguridad, Sistemas

Los certificados SSL de Symantec dejarán de ser válidos. Hay que renovarlos

/

Como bien sabéis si leéis el blog (si hay alguien ahí jejeje) o si tenéis páginas web, este mundo ha cambiado de ser http a ser https (seguro y cifrado por certificado SSL). Por exigencias de los navegadores, empezando por Google Chrome. En ese paso, los usuarios tenían varias opciones. O pagar un certificado de una entidad reconocida, o escoger un certificado gratuito, o usar los certificados que ofrecían los proveedores de hosting (gratis o de pago dependiendo de los proveedores). Algunos de estos últimos eran de Symantec, entidad reconocida de seguridad. Hasta ahí todo bien, hasta que saltó la liebre y se empezaron a poner en duda los certificados de Symantec. Primero en un post de un grupo de noticias del grupo mozilla.dev.security.policy. Después, y debido a lo anterior, Google anunció un plan para dejar de dar soporte a esos certificados dado que se descubrió que no cumplían con los estándares de la industria: Symantec’s PKI business, which operates a series of Certificate Authorities under various brand names, including Thawte, VeriSign, Equifax, GeoTrust, and RapidSSL, had issued numerous certificates that did not comply with the industry-developed CA/Browser Forum Baseline Requirements. During the subsequent investigation, it was revealed that Symantec had entrusted several organizations with the ability to issue certificates without the appropriate or necessary oversight, and had been aware of security deficiencies at these organizations for some time. Symantec, tras algunas alegaciones en respuesta, decidió vender su sección de certificados a la empresa americana Digicert. La transición se hizo efectiva el 1 de diciembre del 2017. Plan de Google. A partir de la versión Chrome 66 (15 de marzo 2018 en Beta, 17 de abril 2018 en estable) no se aceptará ninguno de esos certificados expedidos antes del 1 de Junio del 2016. Con Chrome 70 (alrededor del 23 de Octubre del 2018) ya no se aceptará ningún certificado que apunte a Symantec como raíz. Más información aquí. Firefox sigue un plan similar. Firefox también va a rechazar dichos certificados con fechas muy similares. Aquí tienes los detalles. ¿Qué tienes que hacer para solucionarlo si tienes dichos certificados? Al final la solución es renovarlo lo antes posible. Cualquier certificado renovado a partir del 1 de Diciembre 2017 ya será válido. Algunos certificados de algunos proveedores se auto-renuevan, pero es importante que lo compruebes. Las fechas claves son: 15 de marzo de 2018. Si el certificado se ha emitido antes del 1 de junio de 2016, no estará soportado. Deberás renovarlo o o volver a emitirlo (un procedimiento  que se conoce como reissue) 13 de septiembre de 2018. Si el certificado se ha emitido antes del 1 de diciembre de 2017, no estará soportado. Deberás renovarlo o hacer un reissue. ¿Qué pasa si no los renuevo? Nada bueno. A tus clientes les saldrá un aviso en los navegadores de este estilo lo que da una imagen horrenda y echará atrás a muchos. No te arriesgues.

Scroll al inicio