Diseño Web

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

Formulario de contacto en Moodle

/

Parece mentira pero el LMS (Learning Management System) más famoso, Moodle, carece de un formulario de contacto. Y es que es muy potente en muchas cosas, y extrañamente carente en otras. Hoy os enseñamos a crear un formulario de contacto en Moodle. El formulario de contacto puede usarse para : Formulario para contactar. Peticiones de soporte porque algo no funciona. Solicitar cursos. Solicitar información. A modo de confirmación de acceso o check-in a un curso. Solicitar acceso al aula virtual… Cómo crear un formulario de contacto. ¿Cómo crear un formulario de contacto en Moodle? Hay gente que usa la función de retroalimentación, pero es algo limitada, además de fea. Aunque funciona. Otra gente inserta formularios o programados a mano (Java, PHP, Html…) o de otras plataformas. Mejor solución. Afortunádamente un desarrollador ha programado un plugin llamado Contact Form que cumple perfectamente su cometido. La instalación y uso de dicho plugin no son complicadas, aunque si requieren un mínimo de conocimiento. Podéis ver su documentación en el canal de Github. Se instala igual que cualquier otro plugin. Después debes asegurarte que tengas configurado el contacto de soporte en Moodle (con dirección de correo) porque ahí enviará los correos. Si no está configurado lo enviará al correo del administrador. Para añadir un formulario a una página de Moodle o un bloque de HTML tienes que poner el código. Puedes copiar los ejemplos de códigos de sus plantillas y modificarlos. Como veis es sencillo y un plugin muy útil para nuestro Moodle.    

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.

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.

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.  

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.

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.

Scroll al inicio