Diseño Web

Clientes, Diseño Web, Noticias SmythSys, Trabajos

Nueva web Copa Abogados

Hoy os presentamos otra web que hemos hecho para un cliente: https://copa-abogados.com/. Copa Abogados es uno de los bufetes líderes en el sector de asesoramiento legal en materia laboral, desde hace casi 30 años. Es un nombre consolidado y muy conocido en el sector. En esta ocasión hemos podido participar en el diseño de su nueva web, con la idea de dar una imagen de renovación, y modernidad. La web es una web empresarial con las secciones típicas para una empresa del sector (áreas, contacto, equipo…) y una sección de noticias para mantener a los clientes y colaboradores de Copa Abogados al día de las novedades en el área laboral. Como se puede ver la página tiene un diseño muy claro, con efecetos parallax para crear dinamismo, y se ha jugado con los colores de la marca. Además, sigue el formato actual de tener la información más relevante en la página principal, para reducir el número de clics de las visitas, y más información en las páginas de cada área. La web está disponible en dos idiomas: español y inglés. Esperamos que os guste.

Diseño Web, Gestores de contenidos, Trucos

Cómo insertar listas de Youtube en WordPress sin vídeos relacionados de otros canales. 2021.

Hoy os dejamos un truco que hemos usado recientemente en un cliente. Quería insertar una lista de reproducción de Youtube pero, obviamente, no quería que cuando la gente pausara el vídeo, o en la transición entre uno y otro, aparecieran vídeos recomendados de otros canales. Lo que le interesaba es que los vídeos que se recomendaran fueran los de la propia lista (para eso la insertas). Obviamente este truco no me lo he inventado yo y, como “cuando bebas agua recuerda la fuente”, aquí os dejamos la fuente de este truco. Cómo recomienda Youtube insertar las listas. En esta página podéis ver cómo recomienda Youtube insertar vídeos y listas de reproducción. Como veis el proceso es sencillo: En un ordenador, ve al vídeo de YouTube que quieras insertar. Debajo del vídeo, haz clic en COMPARTIR . Haz clic en Insertar. En el cuadro de texto que aparece, copia el código HTML. Pega el código en el HTML de tu sitio web o blog. Esto nos permite (si el autor no ha prohibido la inserción), que la lista, o vídeo, se vea en nuestro WordPress. El código que obtenemos es algo como este de una de nuestras listas: Pero no es el más adecuado para lo que necesitamos. Vamos a cambiar el código que hemos puesto en rojo y ponerlo como mostramos aquí: El ID de la lista lo vamos a obtener de la url al pinchar en reproducir la lista: Recuerda que esto hay que insertarlo en un bloque de Html personalizado (en Gutenberg), en la pestaña de Html o similar. PERO, tenemos el problema que, al pausar el vídeo, o en las pausas entre uno y otro, no aparecen los siguientes vídeos de la lista…sino los recomendados de otros canales. Cómo evitar que se muestren vídeos de otros canales. Para hacer que los vídeos que se recomienden sean los de la propia lista, sólo hay que añadir &rel=0 detrás del ID de la lista. Por lo tanto el código anterior quedaría. El resultado sería el siguiente.

Diseño Web, Gestores de contenidos, Trucos

Usar el inspector para ver la versión de jquery que carga una web.

En ocasiones, cuando estás desarrollando o “arreglando” una web, necesitas saber qué versión de jquery se está cargando. Puede que hay conflictos, puede que haya varios scripts que puedan estar cargando jquery, y necesitas saber cuál es el que está en funcionamiento. La buena noticia es que es fácil de descubrir con el inspector del navegador. Funciona tanto en Chrome como en Firefox. Cómo encontrar la versión de jquery que está cargando una web con el inspector del navegador. Os lo mostramos en el vídeo debajo de estas líneas pero el resumen es: Abre el inspector (botón derecho encima de la web e Inspeccionar). Ve al apartado de consola. Escribe cualquier de estos dos comandos y pulsa Intro: – jQuery().jquery – jQuery.fn.jquery Cualquiera de los dos comandos devolverá la versión de jquery en uso. Puedes verlo en este vídeo:

Diseño Web, Gestores de contenidos, Trucos

Truco: cómo insertar (embed) archivos pdf en los cursos de Moodle.

Llevamos tiempo trabajando con Moodle, tanto para nosotros como para clientes. Pero seguimos descubriendo trucos poco a poco. Hace un tiempo, uno de nuestros diseñadores nos enseño que podíamos arrastrar y soltar archivos a los cursos sin tener que subir con todo el proceso de agregar recursos de archivo, subirlo a la web etc. Y hace unos días hemos aprendido otro muy útil y que hace que los cursos queden mucho mejor. Os lo enseñamos aquí. Cómo insertar archivos pdf dentro de los cursos de Moodle. Hasta ahora los recursos pdf los subíamos como archivo. No estaba mal, pero el aspecto del curso no es el mismo si el cliente tiene que ver el documento fuera del mismo, y luego volver. Es mejor si el documento se “incrustara” en el curso y se pudiera ver dentro de él. Eso es lo que vamos a enseñaros hoy. Para ello tenemos que: Añadir el documento como fichero, de la manera que lo añadís normalmente. Como os he dicho, lo más sencillo es arrastrar y soltar, en modo edición, en la sección que queremos. Una vez se hasubido el documento, podemos ir a Editar->Editar Ajustes->Apariencia.Verás que el apartado Mostrar está en Automático. Hay que cambiarlo a Incrustar. Guarda los cambios. Con esto verás que ahora, cuando pinchas en el pdf, el fichero se ve dentro del contenido del curso, y no se abre en otra ventana.

Diseño Web, Programas, Sistemas, Software

Notepad++ Compare plugin: compara ficheros o textos desde Notepad++

Ya hemos dicho en varias ocasiones que Notepad++ es uno de los programas que más usamos. Nos encanta que un programa “tan simple” como este tenga tantos usos. Lo usamos como editor de textos, para programar en varios idiomas, para apuntar notas, copiar y pegar textos….Hoy os vamos a hablar de un plugin que permite comparar textos desde este editor tan versátil. Cuando programas o editas, surge en muchas ocasiones la necesidad de comparar versiones para ver los posibles cambios. Esto se puede hacer de varias maneras: Con software en el ordenador: hace tiempo os hablamos de Meld. Pero también hay otros como WinMerge. Con herramientas online: útiles para sacarte de un apuro. Por ejemplo Diffchecker o Text-compare. O puedes usar programas que ya uses, como es este caso, simplemente añadiendo algún plugin. Notepad++ Compare plugin Notepad++ Compare plugin es una extensión que se instala y se agrega a este editor de textos. Para instalarlo tienes dos maneras. Desde el gestor de plugins en Notepad++. Puedes ir a Plugins-> Administrar Plugins buscas Compare, marcas la casilla y pinchas en Instalar. Descargando el plugin de su página. Descarga el fichero desde Sourceforge (enlace sobre estas líneas). Para saber qué formato descargar tienes que saber si tienes la versión de 32 o 64bits de Notepad++. Pulsa en Alt+F1 dentro del programa, y verás la versión.Descarga el plugin, extrae el contenido en una carpeta temporal y ve a Configuración->Importar->Importar Plugins y elige la carpeta.También puedes copiar la carpeta que has extraido directamente en la carpeta de plugins de Notepad++Si vas a Plugins->Abrir Carpeta de Plugins te dice cual es. Si no ve a :64bit: %programfiles%\Notepad++\plugins32bit: %programfiles(x86)%\Notepad++\plugins Una vez hayas hecho esto, deberías tener Compare en el menú de Plugins. Cómo comparar ficheros o textos. Es sencillo, una vez instalado el plugin verás unos botones de “Set as First to compare” y “Compare”. Puedes usarlos para elegir la primera pestaña a comparar y comparar cuando tengas la siguiente. También tienes las mismas opciones, y muchas más, en el menú Compare de Plugins. TIenes un código de colores para ver las líneas que se han borrado, que se han cambiado, se han añadido o se han movido. Dicho código puedes cambiarlo o comprobarlo desde Plugins->Compare-> Settings.

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

Solución a “Elimina los recursos que bloqueen el renderizado” que muestra Page Speed en WordPress.

Si quieres mejorar tu página web, es una buena idea analizar la misma con Google Page Speed. Cuando lo haces, muestra varios errores, como “Publica imágenes con formatos de próxima generación” que os indicamos cómo solucionar aquí. O el error que os vamos a explicar cómo solucionar hoy: “Elimina los recursos que bloqueen el renderizado“. ¿Cuáles son los recursos que bloquean el renderizado? Esta es la primera pregunta que nos surge. Para poder explicarlo necesitamos entender qué es “renderizar” una página web y cómo se hace. El renderizado se refiere a: la cadena de acciones que realiza un navegador para presentar una página web. Es decir, analizar, procesar y visualizar una web. El navegador web lee el código de una web de arriba a abajo durante el “renderizado“. Si encuentra un recurso CSS o Javascript, tiene que detener la lectura hasta que se cargue el recurso. Pero muchas veces dichos recursos no son necesarios para mostrar la primera presentación que necesita ver la persona que accede a la página. Así que son recursos que están bloqueando que se cargue la página. Y esto hace que tu página se cargue más lenta. Es importante destacar que no todos los recursos bloquean la carga de la web. Sólo los que no son necesarios para esa carga inicial. Lo importante es cargar el HTML y los que se llama el CSS crítico (el obligatorio). Lo más normal es tomar una de dos soluciones para diferir ( cargar más tarde) los recursos). Puedes ver más información aquí. Async. la carga del recurso se realiza mientras se sigue leyendo el HTML. No detiene la lectura del HTML. Pero si que habrá un parón cuando haya que ejecutar el recurso. Defer: El recurso se descarga mientras se lee la web, y no se ejecutará hasta el final de la carga del HTML. Solucionar el error “Elimina los recursos que bloqueen el renderizado” en Wodpress. Existen varias maneras para solucionar este problema. Obviamente se podría cambiar a mano la carga de los recursos para que lo hagan después (esto se hacía antes). Afortunadamente ya existen varios plugins que nos ayudan en este proceso. Y hoy os vamos a dejar un par con los que podéis arreglar este problema de manera muy sencilla (lo hemos probado en varias webs de clientes). El proceso consiste en instalar y configurar dos plugins del mismo desarrollador: Async JavaScript y Autoptimize (del que ya os hemos hablado). Esto es lo que tenéis que hacer. Instalar Async JavaScript y activarlo Instalar Autoptimize y activarlo. Ir a la configuración de Async Javascript y marcar la casilla en la parte superior de la configuración para activar JavaScript Async. Escoger si quieres Apply Async o Apply Defer dependiendo del método que quieras (que hemos explicado encima de estas líneas. Ir a la configuración de Autoptimize. Marcar la casilla para optimizar el código JavaScript. Marcar la casilla para optimizar el código CSS. Con esto navega un poco por tu sitio, y vuelve a hacer la prueba de Page Speed. Si no se ha quitado el aviso prueba a hacerla varias veces, o espera hasta el día siguiente, porque Page Speed cachea sus resultados. En nuestras pruebas, al cabo de hacer varias pruebas y esperar un poco, vimos que el error había desaparecido (y con ello mejorado nuestra puntuación en Page Speed).

Diseño Web, Gestores de contenidos, Seguridad, SEO, Trucos

Crear un fichero robots.txt optimizado para WordPress por SEO y seguridad.

El fichero robots.txt es un fichero, enfocado a los robots rastreadores de los buscadores, que tiene varias utilidades. Por una parte es una manera de indicar a los buscadores dónde tenemos nuestro(s) sitemap (mapa de sitio). Esto se hace con el parámetro sitemap en el fichero: sitemap urldelmapadelsitio. Es verdad que la mayoría de las herramientas de los buscadores tienen un apartado para enviarles esta ruta, pero no solemos hacerlo para todos los buscadores….y nunca está de más hacerlo aquí. Por otro lado, nos permite bloquear ciertos lugares de nuestro sitio web (directorios, ficheros, urls) para que los buscadores no los recorran y no los indexen. Esto es importante por tres motivos: – Seguridad: los buscadores no deberían estar entrando, ni publicando, información de zonas como wp-admin o directorios donde podemos tener copias de seguridad o similar. Esto puede ser una manera de acceder a nuestra página web. – SEO: podemos controlar qué queremos y qué no queremos que aparezca en los buscadores. Esto también se puede hacer, de manera más sencilla pero limitada, desde Yoast. – Optimización de recursos: en ocasiones ciertos robots de los buscadores, que además no nos interesan, pueden estar usando recursos de nuestra web. Por ejemplo buscadores de países que no son nuestro objetivo, o buscadores que se sabe que son “no deseados”. Podemos bloquear muchos de estos desde aquí. Dónde se coloca y cómo se edita el fichero robots.txt. El fichero robots.txt se coloca en la raíz de nuestro sitio. Podemos crear el fichero por FTP y subirlo a la raíz de nuestro sitio. Y editarlo desde FTP.Nota: cuidado con el UTF-8 BOM (la introducción de carácteres invisibles en nuestro fichero de texto que hacen que los robots no puedan leerlo). WordPress no permite editar este fichero a mano, pero si tienes Yoast instalado, puedes hacerlo fácilmente desde SEO-> Herramientas->Editor de archivos Fichero robots.txt recomendado para WordPress. Aquí os dejamos un fichero genérico que recomendamos para WordPress. Recordamos que cada instalación es diferente, y es conveniente verificar si queremos añadir algo más a nuestro fichero.Nota: Algunas líneas se añaden para asegurarnos que se admite esa ruta aunque por defecto lo debería hacer. Si queréis bloquear robots poco útiles os dejamos algunos. Cómo comprobamos el fichero robots.txt Siempre es importante comprobar que el fichero robots.txt es correcto. Para ello Google tiene una herramienta desde la que podemos hacerlo. También nos permite actualizar el contenido si lo hemos cambiado. En la ventana que te aparece tras elegir tu sitio, si no aparece el código actualizado puedes copiar el código nuevo y darle a Enviar . Después vuelve a pinchar en Enviar para que lo actualice. En ese momento te dirá si tienes algún error.

Diseño Web, Información Tecnica, Trucos

CSS: dar un margen a un enlace anchor para que no aparezca en la parte superior de la página.

Un “Anchor” (ancla) en HTML es un enlace que permite enlazar partes de un documento. La idea es sencilla, en el destino del enlace, el href, ponemos #etiqueta. Esa etiqueta tiene que es el id de una zona del documento a la que queremos enlazar. Por ejemplo, si ponemos: Estos enlaces son muy útiles, y permiten crear documentos muy cómodos para el lector. Por ejemplo un índice que me lleve a las secciones que queremos. Sin embargo, al llevarte a la sección a la que hemos enlazado, pone dicha sección al comienzo de la página. ¿Qué ocurre si tenemos elementos que cubran la parte superior, o si necesito un margen? Por ejemplo, ¿qué ocurre si tienes un “fixed header“, una cabecera fija? En ese caso, nuestro ancla quedaría debajo de nuestra cabecera. Y no podremos verlo. Hoy os enseñamos a poner un margen en el enlace, que podremos modificar, y así poder decidir nosotros a la altura que deba aparecer el ancla. Cómo dar un margen en un enlace ancla, para que aparezca a la altura que queramos de la página. El truco es muy curioso e ingenioso. Lo hemos probado en un cliente y funciona muy bien. Lo que vamos a hacer es poner un elemento (en el ejemplo ponemos un a pero podría ser cualquier cosa) oculto antes de donde queremos que apunte. Y a ese elemento oculto darle un margen. De esta manera, en un visionado normal de la página no aparecerá. Pero cuando el anchor link nos lleve a él, se activará el margen. Modifiquemos en ejemplo anterior (la clase y la etiqueta las ponemos nosotros). HTML Aquí el CSS: Y ya está. Como veis, ese elemento está justo antes del párrafo al que queremos llegar. Y oculto. Pero cuando pinchamos en el link, nos lleva a el con el margen que queremos (podemos ponerlo positivo o negativo.Nota: seguramente tendréis que hacer alguna “media query” para ajustarlo en móviles. En teoría hay una variante de este, donde en vez de un elemento ponemos un ::before con un contenido. Y ese lo ponemos oculto. Debería funcionar igual Podéis verlo aquí (no lo hemos probado).

Diseño Web, Gestores de contenidos, Trucos

Cómo desactivar o gestionar las actualizaciones automáticas de WordPress.

En lo primero que queremos insistir en este artículo es que es importantísimo que un gestor de contenidos esté actualizado. Tanto el programa (core) como sus componentes (temas y plugins. Más aún en el caso de WordPress que, al ser el más usado, es también uno de los más atacados. Pero también es cierto que una de las razones más frecuentes por las que se suelen “caer” las páginas de WordPress es por actualizar un componente que no es compatible con algún otro (plugins, tema o versión de WordPress). Así que muchos administradores prefieren no tener las actualizaciones automáticas y hacerlo manualmente.Hoy os vamos a enseñar a tener total control de las actualizaciones automáticas. Cómo gestionar las actualizaciones automáticas de WordPress. Hay varios métodos para gestionar las actualizaciones de WordPress. Modificando el wp-config.php Una de las maneras es poniendo instrucciones en nuestro fichero wp-config.php. Para ello tienes que entrar por FTP y SSH y editarlo. Os dejamos las opciones principales (más información aquí). Para detener TODAS las actualizaciones en WordPress (el sistema, temas y plugins).define( ‘AUTOMATIC_UPDATER_DISABLED’, true ); El valor por defecto es falso (se permiten) y no hace falta ponerlo si se quieren permitir. Para detener sólo las actualizaciones automáticas de WordPress (el sistema, el core): define( ‘WP_AUTO_UPDATE_CORE’, false ); Las opciones que permite esto son: true – > permite todas las actualizaciones del programa WordPress. false – > prohíbe las actualizaciones automáticas de WordPress. minor -> Sólo permite actualizaciones entre versiones menores. Es decir se puede actualizar de una 2.34 a una 2.35 pero no de una 2.3 a una 2.4. , Es el valor por defecto (no hay que añadir la línea si es lo que queremos). Con filtros que se pueden poner en el fichero functions.php o en un Snippet Lo anterior se puede hacer usando filtros en el functions.php o en Snippets. De hecho se pueden hacer más cosas. Os dejamos las más importantes. En todos estos casos __return_true habilita y __return_false deshabilita. Permitir todas las actualizaciones del core: add_filter( ‘auto_update_core’, ‘__return_true’ ); Para especificar los tipos de actualizaciones del core que se permiten (o deniegan). add_filter( ‘allow_dev_auto_core_updates’, ‘__return_true’);      // Actualizaciones de desarrolloupdatesadd_filter( ‘allow_minor_auto_core_updates’, ‘__return_true’);    // Menoresupdatesadd_filter( ‘allow_major_auto_core_updates’, ‘__return_true’);   // Mayores Actualizaciones de plugins (permitir) add_filter( ‘auto_update_plugin’, ‘__return_true’ ); Podríamos incluso incluirlo en una función para especificar los que permitimos: functionauto_update_specific_plugins ( $update, $item) {// Array of plugin slugs to always auto-update$plugins= array( ‘akismet’, ‘buddypress’, );if( in_array( $item->slug, $plugins) ) {// Always update plugins in this arrayreturn true;} else{// Else, use the normal API response to decide whether to update or notreturn $update;}}add_filter( ‘auto_update_plugin’, ‘auto_update_specific_plugins’, 10, 2 ); Para habilitar las actualizaciones de temas: add_filter( ‘auto_update_theme’, ‘__return_true’ ); Para desactivar las de traducciones: add_filter( ‘auto_update_translation’, ‘__return_false’ ); Con un Plugin Si todo lo anterior te parece muy complicado puedes instalar un plugin para gestionar las actualizaciones. Recomendamos el siguiente. Easy Updates Manager. Y ya está…con esto ya deberías poder controlar qué se actualiza en tu CMS, cuándo y cómo.

Diseño Web, Gestores de contenidos, Prestashop

Módulos de Prestashop de IDNovate. Muy recomendados: descuentos, Whatsapp, Entrar como usuario, Bizum…

Pocas veces recomendamos páginas de módulos o módulos de pago. Pero estas secciones del blog están pensadas para recomendar productos (preferiblemente gratuitos pero también premium) que hayamos probado y solucionen problemas en vuestras páginas web. Hoy será una de esas excepciones, y vamos a recomendar los módulos de Prestashop de IDNovate. Un desarrollador que, como podréis ver, tiene módulos muy interesantes para este gestor de contenidos de tiendas online. A un precio también muy asequible. Os ponemos algunos ejemplos: Chat de WhatsApp. Módulo avanzado de Promociones y Descuentos. Este lo hemos usado y las opciones son enormes. Módulo de cookies para cumplir con la RGPD. Que ya mencionamos aquí. Módulo de Redsys con Bizum. Módulo de Bizum. Conectarse como un cliente. Y muchos más. ¿Y, por qué los recomendamos? Porque, además de lo útil de los módulos, hemos tenido que pedir soporte a los desarrolladores. Y el soporte ha sido rápido, excelente y ha solucionado todos los problemas que teníamos (incluso fuera de horario). Al final, lo importante de estos módulos no es sólo que sean útiles, sino que el desarrollador pueda ofrecer un soporte adecuado. IDNovate, según nuestra experiencia, lo hace de manera envidiable.