Trucos sobre tipografías para diseñadores

, ,

Algunos diseñadores no tienen muy en cuenta la importancia de si las tipografías que está usando para una web combinan entre ellas y acaban por elegirlas al azar. Como resultado, el diseño final de la web puede no ser muy bueno y se perderá mucho tiempo para encontrar la combinación perfecta de tipografías.

Como diseñador, si no quieres que te pasen ese tipo de problemas, en este artículo hemos seleccionado una serie de trucos que te ayudarán a elegir la mejor combinación de tipografías para tus diseños.

Entender el lenguaje de las tipografías

Puede que no conozcas el 100% de todos los tipos de tipografías que hay pero esta guía te servirá de ayuda a la hora de elegir una.

  • Serif: es una fuente con pequeños trazos o extensiones al final de sus trazos más largos. Suelen utilizarse en libros, revistas y periódicos, ya que las fuentes Serif se consideran más fáciles de leer cuando son textos de varios párrafos. Algunos ejemplos son: Times New Roman, Bodoni o Garamond.
  • Sans Serif: esta fuente es, como su nombre indica, una fuente sin Serif. Es decir, no tienen adornos tras el trazo de la letra. Algunos ejemplos son: Helvetica, Franklin Gothic o Futiger.
  • Script: están diseñadas para capturar la floritura y el arte de la caligrafía tradicional, como si se escribiera con un bolígrafo, un pincel o un rotulador. Suelen ser decorativas y se usan para dar una impresión más que para escribir un texto.
  • Display: son fuentes creadas especialmente para los encabezamientos y que sólo quedan bien cuando se utilizan para textos más cortos en tamaño grande. Algunos ejemplos son: Walbaum o Helvetica Now.
  • Decorative: son fuentes con un aire más vintage o dibujado a mano que pueden utilizarse con fines ornamentales.

 

Usar estilos de fuentes que se complementen

Ahora que sabes cuáles son los distintos tipos de fuentes y su función podrás comprender mejor la forma de combinarlas entre sí para que se complementen. Por ejemplo, puedes usar tipos de letra llamativos o extravagantes para los títulos en los que se quiera captar la atención del lector y utilizar fuentes sencillas y limpias para los textos de los párrafos.

En cambio, si intentas combinar fuentes que compitan entre sí solamente por llamar la atención del lector, solo hará que se confunda y afectará negativamente al diseño. En lugar de eso puedes usar fuentes con Serif para el nombre de la marca y la Sans Serif para el eslogan. Además no es recomendable que se usen fuentes que están demasiado cerca ni tampoco demasiado alejadas entre sí ya que harás que el mensaje no se transmita correctamente.

No subestimar el poder de “Kerning”

El Kerning es el espacio que hay entre cada letra o carácter de un texto. Algunos tienen trazos más alargados y otros menos. En función de la letra, se le asigna un espacio específico para que resulte visualmente atractiva cuando se utiliza en palabras.

Como diseñador, tienes que comprender que el Kerning predeterminado puede que no se adapte a cada diseño, por lo tanto tienes que encontrar el espaciado correcto entre las letras. En el caso de combinar las fuentes puedes ajustarlas para que encajen entre sí. Por ejemplo, en los logotipos, puedes utilizar fuentes en negrita para el nombre de la empresa y para el eslogan, que suele ser más largo que el nombre, se puede utilizar el Kerning para que el estilo de la fuente parezca condensado y, al mismo tiempo, coincida con la anchura del logo.

Seguir la regla de las tres C

Otra de las reglas para combinar tipografías es la fórmula de las tres C y consiste en lo siguiente:

  • Concordancia: utiliza estilos de letra que pertenezcan a una gran familia. Estas grandes familias son fáciles de encontrar y te pueden facilitar el trabajo ya que los tipos de letras combinan perfectamente entre sí y muchas ofrecen versiones en Serif y Sans Serif. Como han sido diseñadas para apoyarse mutuamente quedarán genial en todos los diseños.
  • Contraste: utiliza fuentes que contrasten entre sí, por ejemplo si un tipo de letra es fuerte y atrevido haz que el otro sea más fino y limpio.
  • Conflicto: la clave es mantener una jerarquía de títulos y encabezados, utilizar fuentes que no estén muy lejos entre sí o usar texto coloreado. Puedes hacer que los títulos destaquen con colores llamativos y seguir con un estilo de fuente parecido pero con colores más débiles.

No utilizar fuentes que sean difíciles de leer

El tema de la legibilidad de la fuente debe ser lo primordial, no sirve de nada tener una fuente con un gran diseño si los clientes no pueden leer lo que la web intenta trasmitir.

No uses tipografías muy decorativas o detalladas en tamaños de fuente muy pequeños, en cambio sí que las podrías usar para encabezados o textos cortos. Añade mucho valor a la experiencia del usuario si un texto se puede leer con facilidad y de forma agradable. Otro aspecto a tener en cuenta es que compruebes que se lea perfectamente en los distintos dispositivos sobre todo en los móviles.

No usar más de tres tipografías en un mismo diseño

Otra sugerencia que te puede servir es el no utilizar más de tres fuentes en un mismo diseño. Lo ideal sería usar solo dos fuentes en el diseño aunque también se podría usar una tercera para mensajes adicionales. Si utilizas muchos tipos de letras diferentes acabarás confundiendo al lector y harás que tu diseño sea un poco torpe.

Biblioteca o directorios online de tipografías

Puede que después de todos estos consejos sigas sin encontrar la manera de emparejar bien las fuentes. En este caso, te vamos a mostrar algunas herramientas online que te pueden servir de ayuda:

  • Google Fonts: tiene una gran biblioteca de fuentes y podrá servirte de ayuda a la hora de encontrar la combinación perfecta para la fuente que selecciones.
  • Just My type: es otro directorio muy bueno donde podrás encontrar diferentes combinaciones de fuentes.
  • Typography.com: tiene muchas sugerencias de combinación de fuentes que te ayudarán a la hora de diseñar.

Algunas de estas páginas también ofrecen la posibilidad de descargar las combinaciones de fuentes que más te gusten y así facilitar el trabajo de los diseñadores.

Crear un portfolio de combinaciones de fuentes

Crea un portfolio de combinaciones de fuentes que hayas usado en otros proyectos o que más te gusten para optimizar tiempo a la hora de diseñar una nueva web. La idea sería tener preparadas unas 5 o 6 fuentes de cada tipo y estar familiarizado con ellas. Además, los puntos anteriores pueden servirte como una especie de guía para encontrar la mejor tipografía y combinación a la hora de diseñar.

Tendencias de Diseño Web para 2023

,

En este artículo os mostramos algunas de las tendencias más relevantes para este nuevo año sobre el diseño web aunque algunas de ellas ya se empezaron a usar desde hace unos años.

    1. Título o imágenes de gran tamaño
    2. Texto simple y directo
    3. Degradados coloridos
    4. Tipografías integradas
    5. Imágenes con mucho detalle
    6. Elementos 3D interactivos
    7. Priorización en dispositivos móviles
    8. Estilos retro
    9. Cursores animados
    10. Texturas de vidrio

1. Título o imágenes de gran tamaño

Esto se trata de tener títulos en negrita y muy grandes o mensajes abreviados para atraer la atención del cliente más rápido. También es posible combinarlo con otros elementos como la ilustración 3D como vemos en la imagen.

2. Texto simple y directo

Es un diseño minimalista y discreto pero será la tipografía que tú elijas la que sustentará todo el diseño de tu web. Por ello deberás de elegir una que diga algo de tu marca.

3. Degradados coloridos

Esta tendencia se empezó a usar en 2019 y a día de hoy se sigue utilizando para el diseño web. Con el efecto degradado conseguirás una apariencia moderna e innovadora.

4. Tipografías integradas

Para algunos diseñadores encontrar una tipografía que se ajuste al diseño de la web puede ser una tarea un poco complicada pero todo sitio web necesita texto e imágenes. Puedes colocar el texto usando formas y patrones geométricos, en capas sobre las imágenes para que quede integrado completamente en el diseño general.

5. Imágenes con mucho detalle

Otra de las tendencias para este año son las imágenes de gran tamaño donde se pueda apreciar hasta el más mínimo detalle. Esto hará que tu diseño sea más atractivo pero también hay que tener en cuenta que las imágenes no deben de ser muy pesadas para que no afecten a la velocidad de carga de tu web.

6. Elementos 3D interactivos

Esta tendencia no es del todo nueva pero sí que se seguirá usando para este 2023. Lo interesante es combinar elementos en 2D y en 3D ya que se complementan perfectamente dando brillantes contrastes.

7. Priorización en dispositivos móviles

Desde hace unos años, la navegación mediante los dispositivos móviles ha superado a la navegación a través de escritorio. Es por eso que los sitios web deben de estar optimizados para dispositivos móviles y que el diseño sea responsive, es decir que se adapte al tamaño de la pantalla, para mejorar la experiencia del usuario (UX).

8. Estilos retro

En los últimos años hemos visto como los estilos de la década de los 2000 han vuelto en diferentes ámbitos como la moda, la música, el arte o el diseño de interiores e incluso, como era de esperarse, se está extendiendo al mundo del diseño web. Algunos diseñadores lo realizan introduciendo tipografías retro, fuentes e imágenes pixeladas, cursores personalizados, etc. y así consiguen un aire de nostalgia.

9. Cursores animados

Otra forma de mejorar la experiencia de usuario cuando visitan una web es personalizar el cursor o añadirle una animación cuando se mueve. De esta manera los usuarios pueden divertirse mientras interactúan con los diferentes comportamientos de desplazamiento o comandos al hacer clic.

10. Texturas de vidrio

Hoy en día el uso de las texturas de vidrio es muy frecuente ya que las imágenes o formas de este estilo ayudan a acentuar la atención del usuario, crean un diseño gráfico moderno y combinan perfectamente con efectos en 3D. Algunos productos que usan este tipo de diseño son los de Windows 11 o iOs de Apple.

Mejores plantillas gratuitas y de pago para Woocommerce

Existe una gran variedad de temas para tiendas online con Woocommerce y es casi imposible elegir entre todos ellos. En este post os mostramos algunas plantillas gratuitas y otras de pago para añadirlas a vuestra web. Como sabéis, Woocommerce es un plugin para WordPress con el que se pueden crear tiendas online.

Qué tiene que tener una plantilla para Woocommerce

Lo primero que tienes que tener en cuenta a la hora de elegir una plantilla son los siguientes aspectos:

  • Optimizado para la velocidad de carga de la web
  • Tener un diseño atractivo
  • La navegación sea fácil
  • Diseño adaptado para los diferentes dispositivos (móvil, Tablet, etc.)
  • Ser compatible con los plugins

A continuación os mostramos algunas plantillas gratuitas y otras de pago.

Plantillas gratuitas

Zigcy Lite

Este tema cuenta con tres diseños de demostración los cuales los puedes importar y así lanzarás tu tienda más rápidamente.

Está totalmente optimizado para SEO, es compatible con el plugin de construcción de páginas Elementor y ya cuenta con más de 3.000 descargas.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Zigcy

Woostify

Esta plantilla es de las mejores por su optimización a la hora de obtener una mayor velocidad de carga de la página. Tiene la garantía de ser compatible con futuras versiones de WordPress y Woocommerce ya que sigue los estándares de programación de dicho CMS.

Incluye varios diseños de páginas de productos, un sistema de pago en varios pasos y una galería de videos para añadir a las fichas de productos.

Aunque esta plantilla es gratuita, también dispone de tres planes de pago a partir de 49$ al año en los que incluye un año de soporte, actualizaciones y acceso a complementos avanzados.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Woostify

Astra

Este tema consta con muchas posibilidades de personalización, está realizado con un código optimizado y la página cargará rápidamente debido a que requiere menos de 50kB.

Aparte de la versión gratuita, también existe la versión Premium que cuesta 47$ al año donde encontrarás más funciones y personalizaciones, un soporte individualizado y formación.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Astra

Hestia

Este tema es una excelente elección si lo que buscas es crear una web de una sola página. Ofrece la posibilidad de crear un pie de página con widgets, el añadir una página de blog y su personalización es muy sencilla ya que tiene una gran compatibilidad con los constructores de páginas más comunes.

Los creadores del tema ponen a disposición de los usuarios más de 300 artículos y 200 videos tutoriales pero también existe una versión Premium la cual cuesta desde 69€ al año en la que incluye asistencia técnica, actualizaciones y más funcionalidades.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Hestia

WooCommerce Storefront

Cuenta con un diseño que se adapta a los diferentes dispositivos, se pueden usar plugins para modificar el diseño de la página web o bien usar la opción de “Personalizar” dentro de la opción de “Apariencia” en el menú lateral de WordPress.

Al adquirir este tema obtendrás un año de actualizaciones de los plugins que incluye y un año de soporte.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla WooCommerce StoreFront

Plantillas de pago

Ekommart

El precio de este tema es desde 58$ por licencia y es ideal para diversas tiendas. Incluye varios plugins esenciales de WordPress como “Slide Revolution” o “Mailchimp” y tiene una vista rápida de productos y la opción de comparar artículos que mejorará la experiencia de compra de tus clientes.

El tema cuenta con varias demos de páginas de inicio, encabezados y pies de página prediseñados con lo que será más fácil crear tu tienda online con WooCommerce.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Ekommart

Velure

Cuesta 69€ al año y a parte del propio tema también incluye actualizaciones, importador de demos y un año de soporte. También existe la opción de un único pago que incluye todo lo anterior excepto el soporte que no expiraría y solo tendrías que pagar una vez 159€.

Este tema está más enfocado a blogs de moda y estilos de vida pero también te permite crear una tienda online con un estilo muy elegante. Cuenta además con una barra de Instagram integrada para ayudarte a mejorar tu presencia online.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Velure

PeakShops

Su precio es de 79$ e incluye futuras actualizaciones y 6 meses de soporte, si quieres extender el soporte hasta 1 año el precio sería de 25,13$ más.

Es uno de los mejores temas para crear una tienda online con WooCommerce ya que incluye diversas plantillas para las páginas de productos así como demos prediseñadas para diferentes tipos de negocios como la venta de muebles, electrónica, etc.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla PeakShops

Hongo

El precio es de 59$ en el que incluye 6 meses de soporte y futuras actualizaciones, también se puede ampliar el soporte hasta 1 año por 17,63$ más.

Algunas de las características más destacadas de este tema es que permite la visualización de productos en 360 grados subiendo múltiples imágenes del producto, permite añadir pins a las imágenes y vincularlas a determinados productos. Además tiene incluido el plugin de “MailChimp” con el que podrás crear y lanzar campañas de marketing a través del email.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Hongo

Metro

El precio de esta plantilla es de 35$ en el que se incluye actualizaciones futuras del tema y 6 meses de soporte, también existe la opción de ampliar el soporte hasta 1 año por 8,63$ más.

Tiene un diseño minimalista en el que se centra más en los productos y servicios que ofrece la web y cuenta con siete diferentes diseños de la página de inicio prediseñados. El tema incluye el plugin “Variation Images Gallery” y también es compatible con “Yoast SEO”.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Metro

Inicionet Aplicaciones S.L.

Como aplicar filtros a una imagen con CSS

,

La propiedad de CSS “filter” es una herramienta muy útil para aquellas personas que quieren usar efectos visuales sobre una imagen, es como usar los filtros de Photoshop pero para navegadores. Esta propiedad te permite aplicar filtros como por ejemplo cambiar el brillo de una imagen, hace que sea en colores sepia o en escala de grises. En este post veremos el cómo aplicar estos filtros así como la sintaxis que se usa:

Cuál es la sintaxis

Existen dos opciones de escribir esto en las hojas de estilos CSS. La primera de ellas es poner cada parámetro (brillo, saturación, etc.) en diferente línea:

La segunda opción es ponerlo todo en la misma línea y separar cada parámetro con un espacio en blanco:

La última línea que pone “filter: none;” sirve para quitar todos los filtros que tiene aplicados una imagen.

Cambiar el brillo

Para cambiar el brillo de la imagen, se hace con el parámetro “brightness”. Permite valores con porcentaje (%) y sin él. El valor 0% o 0 mostrará la imagen completamente en negro, por el contrario si se pone el valor 100% o 1 no se apreciará ningún cambio en la imagen. Para subir el brillo, los valores tendrán que estar por encima de esos valores. Si no se indica ningún valor por defecto se usará 100% o 1.

Filtro brightness CSS

Cambiar el contraste

A la hora de cambiar el contraste de la imagen mediante CSS pasa igual que para el brillo, si se usa el valor 0% o 0 la imagen se quedará en negro, si se usa 100% o 1 la imagen no sufrirá ningún cambio. Para que se note algún cambio se tienen que poner valores por encima de esos. Por defecto se usará el 100% o 1 si no se indica ningún valor.

Filtro contrast CSS

Cambiar a sepia

Para convertir la imagen en colores sepia hay que usar valores entre 0% y 100% o también se pueden usar valores entre el 0 y el 1, como por ejemplo 0.6, donde el 0 sería la imagen sin ningún cambio y el 100% o 1 sería completamente en colores sepia. Si no se indica ningún valor, por defecto se usará el valor de 100% o 1. No funciona si ponemos valores negativos.

Filtro sepia CSS

Cambiar a escala de grises

Para convertir la imagen a escala de grises el valor también será entre 0% y 100% o entre 0 y 1. Si se usa el valor mínimo, la imagen no sufrirá ningún cambio. En cambio, si se usa el valor máximo, la imagen se verá totalmente a escala de grises. Si el valor está vacío, por defecto cogerá el valor máximo. Con esta función no se permite usar valores negativos.

Filtro grayscale CSS

Cambiar la saturación

A la hora de saturar la imagen, si se usa el valor 0% o 0 la imagen estará sin saturar, si se usa el 100% o 1 la imagen estará sin cambiar. Para ver más cambios los valores tendrán que estar entre 0% y 100% o mayor que 100%. Por defecto cogerá el valor 100% y los valores negativos no están permitidos.

Filtro saturate CSS

Cambiar los valores HUE

Este filtro aplica una rotación de los colores. El valor se mide en grados (deg) y es el número de grados alrededor del círculo de color que se ajustarán en la imagen. El valor será entre 0 y 360. Si se usa el valor mínimo la imagen no sufrirá ningún cambio y por defecto también coge ese valor si está vacío.

Filtro hue-rotate CSS

Cambiar la nitidez

Este filtro aplica un efecto borroso sobre la imagen. El valor se mide por píxeles (px) pero no se permiten porcentajes. Por defecto se usará el valor 0 si no es válido o está vacío.

Filtro blur CSS

 

Esperamos que os sirva de ayuda a la hora de crear filtros en una imagen desde los estilos CSS. Existen más opciones de esta función de CSS que podéis mirar en el siguiente enlace: https://www.w3schools.com/cssref/css3_pr_filter.php

 

Mejores extensiones para Mozilla Firefox

,

Mozilla Firefox es otro de los navegadores más usados por los usuarios. Os mostramos algunas de las extensiones más comúnes y que os harán vuestra experiencia de navegación mucho mejor.

Adguard

Esta extensión bloquea eficazmente todos los tipos de publicidad en todas las páginas web así como las ventanas emergentes.

Algunas páginas donde bloquea anuncios son: Facebook, Youtube, páginas de periódicos, etc.

Adguard Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Dark Reader

Esta extensión, al igual que en Google Chrome, permite activar y desactivar el modo oscuro del navegador.

Además, también tiene un modo claro con brillo reducido y colores sepia.

Dark Reader Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Stylus

Con esta extensión puedes rediseñar libremente tus sitios web favoritos usando hojas de estilo CSS personalizadas. También incluye funciones avanzadas como por ejemplo diseños opcionales, opciones de iconos y colores, puedes instalar temas de otros diseñadores y desarrolladores, hacer copias de seguridad de tus diseños, etc.

Stylus Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Lastpass

Esta extensión es un gestor de contraseñas y las mantiene seguras y accesibles en la nube. Solo tendrás que recordar la contraseña de acceso a Lastpass para poder ver todas tus contraseñas guardadas. Además, podrás acceder desde cualquier dispositivo, incluyendo las aplicaciones para Android y para iOS. Todas tus contraseñas estarán a salvo gracias a que las protege con una encriptación de grado militar.

LastPass Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

LanguageTool

Esta extensión te ayuda con la gramática y la ortografía a la hora de escribir correos electrónicos o contenido en la web. Corrige los errores mientras escribes o bien haciendo clic. Con ella podrás mejorar la gramática y no se necesita ningún registro o suscripción.

LanguageTool Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Avast Online Security

Esta extensión te ayuda a evitar que accedas a sitios web peligrosos y estafas de phising usando datos de crowdsourcing. Puedes comprobar la calificación de cualquier sitio web que visites incluso da la opción de que tú mismo puedas calificar los sitios web a los que accedas según su fiabilidad.

Avast Online Security Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

 

Esperamos que estas extensiones para Mozilla Firefox os sean de gran ayuda a la hora de navegar en Internet.

Mejores extensiones para Google Chrome

,

Google Chrome es uno de los navegadores más usados hoy en día, por ello os presentamos algunas de sus extensiones más conocidas y usadas que os pueden facilitar vuestro día a día en el trabajo o en casa:

Touch VPN

Esta extensión te permite tener una VPN totalmente gratuita y con ancho de banda ilimitado. Esto te da la opción de visualizar las páginas desde el país que tú elijas con solo pulsar un botón.

Touch VPN

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Traductor de Google

Para aquellas personas que suelen navegar por páginas de diferentes idiomas, esta extensión les será muy útil ya que simplemente con pulsar el icono de la extensión podrán escribir una palabra que quieran traducir sin tener que cambiar de pestaña e incluso pueden traducir una página entera. También se pueden seleccionar partes de un texto para traducirlas sin que afecte al resto de la página web.

Traductor de Google

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Push to Kindle

Esta herramienta envía la página web por la que estás navegando directamente a tu cuenta de kindle y la podrás leer tranquilamente y con tranquilidad desde tu dispositivo.

Solo tendrás que pulsar el icono de la extensión y escribir a qué cuenta de Kindle lo quieres enviar.

Push to Kindle

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Grammarly for Chrome

Esta es una extensión imprescindible para aquellas personas que suelen escribir en inglés desde Google Chrome.

Esta aplicación se encarga de analizar lo que estás escribiendo y corrige errores ortográficos, gramaticales, símbolos de puntuación, etc.

Tiene una versión gratuita y otra de pago pero con la opción gratuita sería suficiente.

Grammarly for Chrome

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Google Arts & Culture

Esta herramienta está diseñada para la gente que le gusta el arte. Lo que te permite esta extensión es que cada vez que abras una nueva pestaña se mostrarán obras de distintos pintores, artistas contemporáneos o artistas callejeros de todo el mundo.

Google Arts and Culture

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Escritorio Remoto de Chrome

Esta aplicación está creada por Google y te permite conectarte remotamente a otro ordenador utilizando Chrome. Podrás controlar todo del otro ordenador como ficheros, carpetas, menús, programas, etc.

Esta extensión funciona a través de tu cuenta de Google con la que tendrás que utilizarla para acceder a otros ordenadores o móviles.

Chrome Remote Desktop

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Documentos de Google sin conexión

Te da la posibilidad de acceder a Drive y a sus herramientas como son los Documentos, Hojas de cálculo o Presentaciones de Google sin necesidad de conectarte a Internet.

Es muy útil cuando lo necesitas durante un viaje o si te encuentras en un lugar donde la cobertura no es muy buena.

Documentos de Google sin conexión

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Dark Reader

Te ofrece la posibilidad de activar el modo oscuro en cualquier página que visites. No solo cambia el blanco de fondo por el negro y las letras a blanco, sino que reduce el brillo de las imágenes cuando sea necesario, analiza los colores que tiene la web.

Te permite ajustar el brillo, el contraste, la intensidad de los colores, cambiar las fuentes de texto, elegir en qué sitios web lo quieres aplicar y en cuales no, tiene la opción de usar colores sepia, etc.

Dark Reader

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Screencastify

Permite grabar tu pantalla del ordenador, grabar audio, editarlos y compartirlos en segundos. Además, puedes realizar preguntas interactivas al espectador.

Screencastify

Para poder descargarla lo podéis hacer desde el siguiente enlace.

uBlock Origin

Esta extensión es un bloqueador de publicidad. Bloquea prácticamente todos los anuncios y consume muy pocos recursos del ordenador.

Si estás navegando en una página pero quieres desactivar la aplicación y que aparezcan los anuncios, es tan simple con pulsar un botón. Los anuncios volverán a aparecer pero solamente en la página que estás visitando en ese momento, el resto de páginas seguirán con los anuncios bloqueados.

uBlock Origin

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Video Downloader professional

Esta extensión es completamente gratuita y muy sencilla de utilizar que te permitirá descargar vídeos en cualquier página web donde esté alojado.

Para descargar los vídeos solamente hará falta pulsar un botón y se guardarán en diferentes resoluciones. Cuando la descarga haya finalizado ya se podrán reproducir sin necesidad de conexión a Internet.

Video Downloader Professional

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Tendencias de diseño web para 2022

,

Como hace poco que cambiamos de año, os mostramos las tendencias de diseño web más importantes para este nuevo año 2022. Algunas de las más relevantes son:

  1. Usar colores llamativos
  2. Contenido personalizado
  3. Chatbots más humanos
  4. Carga inteligente del contenido
  5. Formas fluidas
  6. Microanimaciones
  7. Microinteracciones
  8. Animaciones 3D
  9. Uso de degradados
  10. Efecto de vidrio esmerilado
  11. Datos más visibilizados
  12. Inspiración vintage
  13. Modo oscuro
  14. Combinación de fotos y elementos gráficos
  15. Tipografía Bold (Negrita)
  16. Minimalismo y uso de espacios en blanco
  17. Hero Image

 

1. Usar colores llamativos

El uso de tonos atrevidos, saturados y brillantes puede hacer que tu marca destaque mucho más.

Eso sí, hay que utilizarlos con mucho cuidado para no cansar al usuario y provocar un efecto contrario.

2. Contenido personalizado

Seguramente te hayas dado cuenta de que cada vez que vuelves a visitar una página web o una aplicación aparece un contenido totalmente diferente a cualquier otra persona o si lo visualizas desde otro navegador diferente.

Contenido personalizado         Contenido personalizado

Este tema es muy útil para los sitios que son ecommerce, se puede usar para mostrar diferentes productos dependiendo de los intereses del usuario que visita la web y poder generar más ventas.

3. Chatbots más humanos

Gracias a los avances en la inteligencia artificial, los chatbots son capaces de ayudar a los clientes durante el proceso de compra en la web, resolver dudas u ofrecer un servicio determinado.

Aunque los chatbots llevan ya unos años, en este 2022 los veremos evolucionar para ser mucho más humanos.

4. Carga inteligente del contenido

Con la actualización del algoritmo de Google, se añadieron los parámetros Core Web Vitals. Estos parámetros se aplican en todas las páginas web y tienen en cuenta, además de la velocidad de carga, el cómo se presentan los elementos más relevantes de la web.

Se pueden utilizar funciones como el Infinity Scroll y el Lazy Load para no sobrecargar los recursos del servidor y mejorar el tiempo de carga ya que solo se muestra el contenido visible.

5. Formas fluidas

Esta tendencia trata de descartar los ángulos rectos y se introducen formas redondas, asimétricas que pueden dividir las distintas secciones de una web de forma fluida y sin cortes bruscos.

Formas Fluidas

6. Microanimaciones

Se trata de usar pequeñas animaciones en distintas partes del diseño como en los iconos o en las descripciones de productos.

Con esto conseguimos diseños más dinámicos utilizando videos y gifs en vez de imágenes estáticas.

Microanimaciones

7. Microinteracciones

Son pequeñas animaciones que sirven para guiar al usuario en la web a través de algunas acciones.

Algunos ejemplos te esta tendencia son: enlaces que cambian de color cuando pasas el ratón sobre ellos, cambio del propio cursor dependiendo del sitio de la web donde esté ubicado, diferentes efectos al pasar el cursor por un producto en un listado, etc.

Microinteracciones

Microinteracciones

8. Animaciones 3D

Pueden hacer del diseño de la web mucho más moderno.

Aunque no hay que sobrecargar la web de animaciones en 3D, si que es cierto que gracias a los avances tecnológicos cada vez suponen menos problemas en cuanto al tiempo de carga de la página.

Un ejemplo de esto sería mostrar las imágenes de productos en la web con fotos en 360 grados.

Animaciones en 3D

9. Uso de degradados

El uso de degradados puede añadir un efecto de profundidad, puede servir como un fondo llamativo o para añadir textura a una imagen.

Suele utilizarse en tipografías grandes y atrevidas y combina perfectamente con elementos redondeados y con transparencias.

10. Efecto de vidrio esmerilado

Este efecto ofrece una apariencia borrosa en los elementos situados detrás dando prioridad a los que están delante.

A veces se suele usar como sustitución a los fondos degradados y transmite profesionalidad.

Efecto de vidrio esmerilado

11. Datos más visibilizados

Mostrar los datos en gráficas o tablas puede hacer que los usuarios que visitan la web entiendan mucho mejor estos datos además de ser una forma mucho más atractiva que mostrarlos con texto.

Datos más visibilizados

12. Inspiración vintage

Puedes intentar mezclar estilos modernos con estilos vintage para crear una apariencia ultramoderna.

Por ejemplo, puedes usar productos artesanales, de época y tradicionales.

Inspiración vintage

13. Modo oscuro

Este estilo permite reducir la fatiga de los usuarios ya que cada vez pasamos más tiempo mirando pantallas. Además puede ayudar a ahorrar batería en dispositivos móviles.

Utilizando esta tendencia puedes conseguir una apariencia ultramoderna para tu web y resaltar otros elementos.

Modo oscuro

14. Combinación de fotos y elementos gráficos

Mezclando elementos gráficos y fotos puedes conseguir aportar un nivel de diversión y creatividad a una imagen corriente y reforzar la marca de tu empresa.

Combinación de fotos y elementos gráficos

15.Tipografía Bold (Negrita)

Usando fuentes gruesas y en negrita hace que el mensaje de la página sea mucho más claro e instantáneo y no necesite ninguna imagen. Además puede lograr captar la atención del usuario.

Tipografía Bold (Negrita)

16. Minimalismo y uso de espacios en blanco

Usando espacios en blanco y un aspecto minimalista permite mejorar la legibilidad de la web y da prioridad al producto o contenido que se quiere destacar.

Minimalismo y uso de espacios en blanco

17. Hero Image

Hero image se refiere al banner de gran tamaño que suele haber en una página web en la página principal.

Esto puede atraer y hacer que el usuario siga viendo el contenido de tu web.

Se suele usar para expresar el servicio que ofreces y normalmente es la primera impresión que se lleva un cliente al visitarla.

Hero image

 

Estas son las tendencias más importantes que llegarán este nuevo año.

¿Cómo añadir y quitar las www de tu página web?

, ,

Puede que te preguntes si es importante o no el usar las www en tu página web para el rendimiento del SEO. La respuesta es no, es simplemente un tema de preferencias o de estética pero debes saber cómo añadir o quitar las www de tu dominio para asegurar que Google lo indexe correctamente.

En este artículo te explicaremos lo siguiente:

Cómo quitar las www de tu dominio

Si prefieres que tu sitio web sea sin el prefijo www puedes añadir el siguiente código en tu fichero .htaccess en el directorio principal de tu web (Solamente para servidores con Apache):

Cómo quitar las www de tu página web con .htaccess

Para que esto funcione correctamente, el módulo de Apache mod_rewite tiene que estar instalado y habilitado en el alojamiento donde se encuentra tu web. Una vez añadido este código no es necesario reiniciar el servicio de Apache.

Añadir las www a tu página web

Por el otro lado, si lo que quieres es añadirlas en tu web, igual que en la sección anterior, será necesario editar el fichero .htaccess de tu página y añadir lo siguiente:

Cómo añadir las www de tu página web con .htaccess

Al igual que para quitarlas, es necesario que en el servidor esté activado y habilitado el módulo de Apache mod_rewrite, de otra forma esto no funcionará.

Cómo afecta a la seguridad del sitio web

Al realizar este tipo de cambio en una web, hay algunos aspectos sobre su seguridad que hay que tener en cuenta.

Si configuras tu dominio sin las www y posees algún subdominio, puede darse el caso de que el dominio principal y el subdominio compartan cookies. Esto puede ser potencialmente malo si hay alguna información delicada y se guarda en las cookies que tú no quieres compartir con terceras partes.

Inicionet

Plataformas para enviar archivos pesados

Es muy rápido y sencillo enviar adjuntos por email pero, ¿qué pasa cuando estos adjuntos son demasiado pesados? Muchos de los proveedores de correos tienen restricciones sobre el tamaño de los archivos adjuntados.

En este post os explicamos algunas de las plataformas más comunes para enviar archivos pesados a otras personas:

 

Google Drive

Google Drive te da espacio para almacenar ficheros en la nube pudiendo acceder a ella desde cualquier sitio. También te permite compartir dichos archivos con clientes y compañeros para que ellos los puedan ver o modificar.

Esta herramienta te da la posibilidad de tener toda la información sincronizada en tus diferentes dispositivos (iPhone, Mac, Smartphone, etc.) y los cambios que realices se guardan automáticamente mientras los editas. Lo único que necesitas para acceder a ella es una cuenta de Gmail.

Google Drive

Te proporciona hasta 15GB de espacio gratuito y tiene diferentes planes de pago por si necesitas más capacidad. Sus planes son desde 1,99€/mes por 100GB hasta 9,99€/mes por 2TB, también dispone de una opción de pago anual en vez de mensual en el que puedes conseguir hasta un 17% de ahorro.

OneDrive

OneDrive, al igual que Google Drive, te permite almacenar archivos en la nube. Usa el servidor de Microsoft y puedes usar hasta 5GB de espacio gratuito pero dispone de varios planes.

OneDrive

Entre sus planes se puede diferenciar entre “Para el hogar” y “Para empresas”. El primero de ellos oscila entre 2€/mes hasta 99€/año dependiendo de la opción que se elija. En cuanto al segundo, éste no dispone de plan gratuito pero tiene diferentes opciones muy variadas que van desde 4,20€/mes y por usuario hasta 10,50€/mes y por usuario.

Es necesario una cuenta de Outlook o Hotmail para poder usar este servicio.

iCloud

iCloud es una herramienta distribuida por Apple por lo que solamente podrán usarla aquellos dispositivos que pertenezcan a esta marca.
Esta plataforma te permite almacenar fotos, archivos, notas, vídeos, etc. Además se sincronizan automáticamente, todos tus datos estarán protegidos, actualizados y disponibles por si los necesitas.

iCloud

Dispone de 5GB de almacenamiento gratuito pero se puede ampliar fácilmente desde 0,99€/mes por 50GB.

Dropbox

Dropbox es una herramienta en la que puedes almacenar, organizar, crear y compartir archivos con diferentes personas.
Está disponible para uso personal y para empresas.

Además entre sus funcionalidades también se encuentra la posibilidad de añadir firmas electrónicas seguras en documentos, enviar archivos pesados de forma rápida y compartir tus archivos con más personas.

Dropbox

Los precios de los planes oscilan entre 9,99€/mes y 16,99€/mes para particulares mediante cobro anual y para empresas está entre 10€/mes y 16,58€/mes mediante cobro anual.

 

Existen muchas otras plataformas como las mencionadas anteriormente pero creemos que estas cuatro son las más comunes y más utilizadas por todos los usuarios.

Reparación y actualización de páginas

, , , , ,

Puede que te encuentres en la situación de tener una página web pero se muestran diferentes errores, páginas incompletas o quieres hacer algún cambio o mejora, etc.

En este artículo os detallaremos algunos casos en los que te podemos ayudar para hacer que tu página web sea mucho más completa:

Corrección de errores

Algunos de los errores más comunes que pueden surgir en una página web pueden ser que por ejemplo tras una actualización del CMS de tu web ésta haya dejado de funcionar porque se ha quedado la página en blanco, aparece algún otro tipo de error como:  Fatal error, Deprecated, Warning, etc.

Como corregir el error de Parse error

Pueden surgir otros tipos de errores como que después de una actualización o algún cambio se hayan perdido los estilos o hay alguna sección que no aparece como debería.

Traducción de textos

Otra de las acciones que podemos realizar es la traducción de textos en la página web. Dependiendo del CMS que uses y de la plantilla puede que haya campos, secciones o algún botón que no se llega a traducir correctamente o no encuentras donde se realiza esta traducción.

Actualización de contenidos

Muchas veces puede que necesites añadir nuevos productos o servicios que ofrece tu empresa en la página web pero es posible que no tengas tiempo de meterlos uno a uno. Nuestro equipo es experto en realizar estas importaciones masivas de los nuevos contenidos.

Pasa lo mismo con la actualización de los textos, la importación de noticias y eventos o la creación de nuevas páginas o secciones de la web.

Modificaciones del aspecto o funcionalidades de la web

Puede darse el caso de que ya tengas una página web pero te gustaría cambiar el aspecto o añadir alguna nueva funcionalidad en la web que antes no estaba.

Nosotros podemos realizar estas nuevas modificaciones tal y como nos las pides.

Recuperación de datos

Por otro lado, puede que tras una actualización de plugins o del propio CMS se hayan perdido los datos que había antes en la web o se haya desconfigurado por completo. Si esto pasa nosotros podemos recuperar los datos a través de copias de seguridad para que tu página funcione como siempre.

Limpieza de virus o malware

Cada vez es más habitual que las páginas web sean infectadas por virus o códigos maliciosos. Si te encuentras en esta situación no te preocupes porque nosotros nos encargamos de la limpieza del sitio web para dejarlo libre de virus.

También podemos implementar medidas de seguridad para prevenir que la página web sea infectada como instalar un certificado SSL, asegurarnos que el hosting donde se encuentra alojada la web tenga un buen firewall, mantener el CMS de tu web siempre actualizado así como los plugins, etc.

Limpiar de virus y malware la página web