Diseño Web

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

Cómo traducir el mensaje de “New Activity” en el formato de curso Grid de Moodle.

/

El plugin Grid Format de Moodle es un plugin muy usado para mostrar las secciones de cursos de una manera más estética. Básicamente el plugin organiza las secciones en formato rejilla (grid, de ahí su nombre) y permite poner una imagen en cada sección. Cada vez que se añade una actividad en una de las secciones, si tienes este módulo activado, se agrega a cada sección una imagen con el texto “New Activity”. Esta imagen aparece en inglés, y está traducida a francés, alemán e incluso al hebreo, pero no al español. Por lo tanto, si lo ponemos en un Moodle español, el mensaje sale en inglés. Hace unos días, un cliente nos pidió cambiarlo y hoy os enseñamos a hacerlo aquí. Cómo traducir el mensaje de “New Activity” en el formato Grid de Moodle. El quid de la cuestión es que es una imagen. Y dicha imagen hay que crearla para el formato español porque no viene en el módulo. Para ello tenemos que ir a nuestro servidor, por FTP, a la carpeta /course/format/grid/pix Ahí veremos unas imágenes llamadas new_activity_en.png (l a que aparece por defecto), new_activity_fr.png, new_activity_de.png etc. Veréis que no aparece la que acaba en _es. Esa es la que tenemos que crear. Descargamos la imagen new_activity_en.png y la editamos en un programa de edición de imagen como Photoshop o Gimp. Una vez la tenemos a nuestro gusto, la subiemos a la misma carpeta del sevidor con el nombre new_activity_es.png. Una vez hayamos hecho esto, veremos que, si tenemos en Moodle el idioma español, la imagen que nos saldrá será la nueva que hemos creado.

Diseño Web, Gestores de contenidos, Trucos

Cómo cambiar la dirección de correo electrónico de administración en WordPress.

/

La dirección de correo electrónico de administración en WordPress es una dirección que se configura en Ajustes-> Generales. Por defecto es la dirección del administrador que se crea al instalar WordPress. La cuenta la usa WordPress para notificaciones, alertas, avisos de actualizaciones, recordatorio de contraseña de administrador y mucho más. Pero en ocasiones queremos querer cambiarlo. En principio es sencillo, se cambia la dirección de correo desde el panel de aministrador, WordPress le manda una confirmación al nuevo correo y, si este lo confirma, se cambia la dirección. Hoy es explicamos qué podéis hacer si este proceso anterior no funciona. Cómo cambiar la dirección de correo electrónico de administración en WordPress. Os dejamos dos maneras. Por el panel oculto de opciones de WordPress. Como os comentamos, existe un panel “oculto” de opciones avanzadas en WordPress. En él se pueden comprobar varias variables de sistema, y cambiar directamente otras. Entre las que podéis cambiar está la dirección de administración. Sólo tenemos que buscar la opción admin_email , borrar la que hay y poner la nueva. Después vamos a la parte inferior de la página y pinchamos en Guardar. Con esto debería estar solucionado. Si no es así, prueba la opción que sigue. Por base de datos. Como casi todo en WordPress, los parámetros se guardan en la base de datos. Y ahí podemos cambiarlos también. La dirección de administración es una de ellas. Para ello debemos usar un editor tipo phpMyAdmin o similar y entrar en la base de datos. Ahí veremos la tabla xxx_options (normalmente wp_options salvo que hayáis cambiado el prefijo de la base de datos en la instalación). En esa tabla veréis el campo admin_email que se puede cambiar editando el campo y cambiando el valor de option_value por el correo que queremos. Guardamos el cambio y ya debería estar.

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).

Scroll al inicio