Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Google

Alternativas a Google Tools para diseñadores web

by
Read Time:12 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Google está esencialmente en el centro de la web tal y como la conocemos, lo que significa que a su vez está en el centro de muchos aspectos del diseño web. Normalmente pasamos una buena cantidad de tiempo pensando en optimizar nuestro contenido para el motor de búsqueda de Google, en probar nuestros sitios en su navegador Chrome, en alojar nuestros videos en su plataforma de YouTube, en usar su servicio de fuentes web, etc.

googlinggooglinggoogling

Sin embargo, al igual que con cualquier conjunto de herramientas, siempre vale la pena saber qué opciones adicionales están disponibles. Incluso aunque las herramientas y servicios proporcionados por Google sean los más adecuados para tus necesidades actuales, hay algo que todo diseñador web sabe, y es que el mundo online puede cambiar rápidamente. Es prudente estar al tanto de todas las opciones que tenemos disponibles para elegir, o podríamos descubrir que nos estamos perdiendo algunas de las mejores herramientas que la web nos puede ofrecer en un momento dado.

Nota: el propósito de este artículo no es restar valor la colección de herramientas y servicios de Google, porque sin duda cada uno de nosotros las ha encontrado muy útiles a lo largo de los años. La intención es más bien, actualizar nuestro conocimiento en lo que se refiere a todas las otras herramientas y servicios de gran utilidad que también existen por ahí en la amplitud de la web.

En qué sentido puede ser útil este artículo

Vamos a repasar algunos de los productos, servicios y herramientas de Google utilizados en el diseño web, hablaremos en cada caso sobre por qué las alternativas pueden ser beneficiosas, y exploraremos las opciones más atractivas capaces de ofrecernos dichos beneficios.

Existen muchas herramientas basadas en Google que actualmente podrías estar utilizando indirectamente en tu trabajo de diseño web, como software de oficina o de correo electrónico, pero para evitar salirnos del camino, nos vamos a centrar en cosas que podrías implementar directamente en un sitio o utilizar durante el proceso de diseño web real. Tampoco vamos a hablar de todos los posibles beneficios que una herramienta o servicio pueda tener en comparación con Google, solo de aquellos específicamente relevantes para los diseñadores web y para nuestros clientes.

Para ello comenzaremos cada sección con un listado titulado "Usar en diseño web" para que desde el inicio podamos ver por qué estamos hablando de la herramienta o servicio. Seguiremos con un breve resumen de los beneficios que puedes obtener de las alternativas para el diseño web en concreto.

También debo señalar que no he enumerado todas y cada una de las alternativas dentro de cada categoría, así que si existe una opción con la que tengas experiencia y sepas que es excelente, adelante, cuéntanoslo a todos a través de la sección de comentarios.

Entre las alternativas que vamos a revisar, podrás encontrar opciones que podrías querer usar para complementar tus actuales soluciones basadas en Google, o incluso usarlas para sustituirlas por completo. ¡Empecemos!

Tabla de contenidos

  1. Alternativas a Chrome DevTools
  2. Alternativas a Google Fonts
  3. Alternativas a Google Analytics
  4. Alternativas al alojamiento para vídeos de YouTube
  5. Alternativas a Google AMP
  6. Alternativas a Google Cloud CDN
  7. Alternativas a la Google Search
  8. Alternativas a las bibliotecas alojadas en Google

1. Alternativas a Chrome DevTools

Uso en el diseño web

  • Depuración
  • Rendimiento y otras auditorías / análisis
  • Prueba de ajustes de código

¿Por qué considerar alternativas?

  • Para acceder a funciones que pueden no estar presentes en Chrome DevTools

1. Herramientas de desarrollo de Firefox

Firefox Dev ToolsFirefox Dev ToolsFirefox Dev Tools

La alternativa DevTools, que personalmente conozco mejor, (dado que es mi ir a cuando la codificación), es Firefox DevTools. Al igual que el equipo de Chrome está trabajando ajetreadamente añadiendo nuevas y útiles características a sus herramientas de desarrollo, también lo está haciendo el equipo de Mozilla.

Han existido diversas características disponibles sólo en Firefox DevTools, (ya sea durante un tiempo hasta que las características han aparecido también en Chrome, u otras que todavía solo están disponibles en él), que he encontrado increíblemente útiles en el proceso de diseño web.

Por ejemplo:

Obtén más información sobre Firefox Developer Tools con estos artículos:

2. Alternativas a Google Fonts

Uso en diseño web

  • Descarga de fuentes web
  • Alojamiento de fuentes web

Si eres nuevo trabajando con fuentes web aquí puedes aprender todos los elementos esenciales en 60 segundos:

¿Por qué considerar alternativas?

  • Para obtener control total sobre el proceso de carga de las fuentes
  • Para utilizar fuentes no disponibles en Google Fonts

Estoy seguro de que todos hemos utilizado Google Fonts muchas, muchas veces en nuestros sitios a lo largo de los años. Sin duda ha hecho que sea muy fácil tomar simplemente una URL, y añadirla a tu sección <head> para tener todo el trabajo hecho. Sin embargo, existe por ahí todo un mundo de fuentes bellamente diseñadas a las qiue podemos acceder para elaborar nuestros diseños, algunas de las cuales nunca aparecerán en la biblioteca de Google Fonts.

Además, si decidimos gestionar el alojamiento y la carga de fuentes nosotros mismos, tenemos la capacidad de dictar por completo cuándo y de qué manera se almacenan los archivos, asegurando que los métodos utilizados se ajusten a nuestras estrategias de optimización del sitio.

Comencemos echando un vistazo a ubicaciones alternativas desde las cuales podamos descargar fuentes, después veremos alternativas para el alojamiento de las fuentes.

1. Fuentes de Envato Elements

envato elements fontsenvato elements fontsenvato elements fonts

Características principales:

  • 2.767 fuentes web
  • Proporciona acceso a todas las fuentes disponibles en la plataforma como parte de una única suscripción mensual

Sitio web: https://elements.envato.com/fonts

2. Fuentes de Graphic River

fonts on graphic riverfonts on graphic riverfonts on graphic river

Características principales:

  • 7.500 fuentes
  • Varios formatos disponibles
  • Posibilidad de probar online las fuentes antes comprarlas

Sitio web: https://graphicriver.net/fonts

3. Font Squirrel

font squirrelfont squirrelfont squirrel

Características principales:

  • Fuentes gratuitas, que permiten su uso comercial
  • Generador @font-face

Sitio web: https://www.fontsquirrel.com/

4. FontSpace

FontSpaceFontSpaceFontSpace

Características principales:

  • 2.784 diseñadores de fuentes compartiendo fuentes gratuitas
  • 61.687 fuentes

Sitio web: https://www.fontspace.com/

5. The League of Moveable Type

The League of Moveable TypeThe League of Moveable TypeThe League of Moveable Type

Características principales:

  • Fuentes de código abierto que puedes estudiar para aprender cómo se crean las fuentes
  • Gratuita

Sitio web: https://www.theleagueofmoveabletype.com/

Ahora vamos a dirigir nuestra atención a algunas alternativas de fuentes alojadas.

6. Fonts.com

FontscomFontscomFontscom

Características principales:

  • Paga de acuerdo con la cantidad de tráfico que tus sitios tengan
  • 14.959 familias de fuentes web

Sitio web: https://www.fonts.com/

7. Typography.com (también conocido como H&FJ, alias H&Co)

Typographycom aka HFJ aka HCoTypographycom aka HFJ aka HCoTypographycom aka HFJ aka HCo

Características principales:

  • Pago anual con planes con distintas tarifas dependiendo de tu nivel de tráfico
  • Utiliza solo un CSS, sin método JS de carga de fuentes

Sitio web: https://www.typography.com/

8. Autoalojamiento

A veces, la mejor alternativa para el alojamiento de las fuentes es simplemente la infraestructura de servidor que ya tengas configurada para tus sitios. Todo lo que necesitas hacer es cargar las fuentes de tu elección en el espacio de alojamiento de tu sitio y luego usar @font-face para cargarlas en él. Para una velocidad de carga más rápida, es posible que desees entregar tu archivo de fuente a través de una red CDN (red de entrega de contenido), algo de lo que hablaremos más en breve.

Si nunca has trabajado con @font-face echa un vistazo a nuestra guía:

3. Alternativas a Google Analytics

Uso en diseño web

  • Seguimiento del tráfico del sitio y métricas relacionadas

¿Por qué considerar alternativas?

  • Posibilidad de autoalojado
  • Múltiples conjuntos de datos para una "segunda opinión"
  • Control sobre los datos recopilados
  • Garantiza que las análíticas respetan la privacidad del usuario

1. Matomo (anteriormente Piwik)

Matomo formerly PiwikMatomo formerly PiwikMatomo formerly Piwik

Características principales:

  • Gratuito y de código abierto
  • Compatible con RGPD (Reglamento General de Protección de Datos)
  • Opción para el autoalojado
  • Alega una mayor precisión que Google Analytics
  • Plugin de WordPress disponible: configura automáticamente las analíticas autoalojadas en tu sitio WordPress
  • Complementos disponibles, por ejemplo, analíticas para WooCommerce, pruebas A/B, flujo de usuarios, mapas de calor

Clientes destacados:

  • NASA
  • Naciones Unidas
  • Amnistía Internacional
  • Red Bull

Sitio web: https://matomo.org/

2. Fathom

FathomFathomFathom

Características principales:

  • No requiere cookies
  • Una única página, presentación de datos "de un solo vistazo"
  • Compatible con RGPD
  • La política de datos explica claramente cómo garantizan la privacidad de los usuarios

Sitio web: https://usefathom.com/

3. Countly

CountlyCountlyCountly

Características principales:

  • Opción para el autoalojado
  • 15 SDK de código abierto para que puedas implementarlos en dispositivos móviles, web, ordenadores de escritorio, dispositivos inteligentes y otras plataformas
  • Plugins disponibles, por ejemplo, pruebas A/B, mapas de calor, retención de usuarios, embudos
  • Edición comunitaria gratuita disponible

Clientes destacados:

  • Microsoft
  • Coca Cola
  • Ubisoft
  • Verizon

Sitio web: https://count.ly/

4. Plausible

PlausiblePlausiblePlausible

Características principales:

Sitio web: https://plausible.io

4. Alternativas al alojamiento de vídeos de YouTube

Uso en diseño web

  • Alojamiento de contenido de vídeo para ser incrustado en sitios de clientes y en nuestros propios sitios

¿Por qué considerar alternativas?

  • Para maximizar la concentración en las temáticas de tu vídeo en lugar de perder la atención con los vídeos sugeridos o los vídeos en cola de reproducción automática
  • Para poder personalizar los reproductores de vídeo
  • Para poder añadir una imagen de marca y llamadas a la acción
  • Para obtener más datos estadísticos
  • Para reemplazar vídeos sin perder los datos de seguimiento

1. Vimeo

VimeoVimeoVimeo

Características principales:

  • Disponibilidad de reproductores de vídeo personalizados con tu propia imagen de marca
  • Posibilidad de cobrar pagos a los espectadores para ver contenido
  • Disponibilidad de herramientas de colaboración
  • Transmisión en vivo disponible
  • Estadísticas incluidas
  • Publicación mediante un solo clic en otras plataformas al mismo tiempo

Sitio web: https://vimeo.com/

2. Vidyard

VidyardVidyardVidyard

Características principales:

  • Ancho de banda ilimitado
  • 55 CDNs globales
  • 99% de tiempo de actividad
  • Llamadas a la acción integradas
  • Reproductor personalizable
  • Analíticas y pruebas A/B
  • Soporte para vídeos 360
  • Transcripción automática

Sitio web: https://www.vidyard.com/

5. Alternativas a Google AMP

Uso en diseño web

  • Optimización de la velocidad de la página
  • Aumento en los posicionamientos de búsqueda

¿Por qué considerar alternativas?

  • Para usar código basado en estándares
  • Capacidad para usar JavaScript externo
  • Para mantener el control sobre tus URL y el tráfico
  • Para asegurar la degradación elegante, por ejemplo, funciona sin JavaScript

1. Buen código y una CDN

Por supuesto, esto es un poco reduccionista, pero al final del día ese es realmente todo el fundamento de AMP, código optimizado y contenido pre-cacheado en una red CDN. Lo que hace AMP es manejar la optimización y la configuración de CDN por ti, pero si tú mismo tomas las riendas podrías lograr la optimización al mismo o a un nivel superior. Si realizas esta tarea por ti mismo, tendrás mayor libertad en cuanto a la forma de escribir tu código y podrás asegurarte de que los visitantes lleguen a tu sitio y a tus URL en lugar de a la versión de tu sitio web alojada en los servidores de Google.

Aprende técnicas para optimizar tu sitio sin AMP, mantente al día con el estado del SEO, optimiza tus imágenes usando las actuales técnicas HTML5 responsivas y los nuevos formatos de archivo. Mantente al tanto de los requisitos para tipos concretos de trabajo de desarrollo, como la creación de temas amigables con el SEO. Sé consciente del por qué de todas y cada una de las líneas de código existentes en tus proyectos y elimina cualquier cosa que esté allí innecesariamente.

Una vez hayas escrito tu bello, limpio, mínimo y eficiente código, utiliza una CDN de calidad para servir tus sitios lo más rápido posible a tus usuarios. Si realmente deseas emular AMP, podrías incluso entregar tus sitios a través de la propia nube de Google sin utilizar el propio AMP, por ejemplo, simplemente alojando un sitio WordPress con Kinsta en tu red basada en Google Cloud. O bien, selecciona otra red CDN de tu elección. En la siguiente sección hablaremos de una selección de las mismas.


6. Alternativas a Google Cloud CDN

Uso en diseño web

  • Optimizar la velocidad de carga del sitio mediante la entrega desde servidores cercanos a los usuarios de tu sitio

¿Por qué considerar alternativas?

  • Características específicas de la plataforma

1. QUIC.cloud

QUICcloudQUICcloudQUICcloud

Características principales:

  • Creado especifícamente para WordPress, respondiendo a eventos de WordPress
  • Protección ante ataques DDos
  • Vistas de caché por grupos de usuarios

Sitio web: https://www.quic.cloud/

2. CloudFlare CDN

CloudFlare CDNCloudFlare CDNCloudFlare CDN

Características principales:

  • Protección DDoS sin medición
  • API de caché de Cloudflare disponible para controlar el almacenamiento en caché
  • Intercambio de recursos de origen cruzado
  • Gran red global

Sitio web: https://www.cloudflare.com/

3. Amazon CloudFront

Amazon CloudFrontAmazon CloudFrontAmazon CloudFront

Características principales:

  • Mitigación de DDoS
  • Equilibrio de carga elástico
  • 200 puntos de ubicación
  • Integrado con AWS

Sitio web: https://aws.amazon.com/cloudfront/

4. KeyCDN

KeyCDNKeyCDNKeyCDN

Características principales:

Sitio web: https://www.keycdn.com/

7. Alternativas a la Google Search

Uso en diseño web

  • Búsqueda de información técnica

¿Por qué considerar alternativas?

  • Para utilizar accesos directos y realizar búsquedas en sitios adicionales, no sólo en el propio motor de búsqueda
  • Par acceder a soporte de desarrollo, como ejemplos de códigos online y fichas con recopilatorios de trucos

1. Duck Duck Go

Duck Duck GoDuck Duck GoDuck Duck Go

Bangs

Los bangs son pequeños atajos de teclado que puedes añadir a tu frase de búsqueda para buscar sitios distintos a DuckDuckGo.

¿Quieres aprender algo de HTML? Simplemente busca aprender html !tutsplus

¿Necesitas una plantilla de Powerpoint? Busca powerpoint !graphicriver

Consulta todos los bangs disponibles en: https://duckduckgo.com/bang

Ejemplos de código online

Muchas búsquedas de preguntas relacionadas con código proporcionarán respuestas con código online que puedes copiar directamente y empezar a usar en tus proyectos. En este ejemplo he buscado "jquery select element" y me ha sido presentada información relevante de la página de la API de jQuery:

Duck Duck Go search resultsDuck Duck Go search resultsDuck Duck Go search results

Hojas de trucos

DuckDuckGo tiene la capacidad de mostrar hojas de trucos para varios idiomas distintos. Sólo tienes que buscar "<language> cheat sheet" como puedes ver a continuación:

Sitio web: https://duckduckgo.com/

2. Qwant

QwantQwantQwant

Accesos directos de búsqueda de Qwick

Los accesos directos de búsqueda de Qwick funcionan en esencia de la misma manera que los bangs de DuckDuckGo, con la diferencia de que en este caso utilizaras el símbolo & en lugar de ! para prefijar el acceso directo.

Por ejemplo, si quisieses buscar un tema multipropósito a través de ThemeForest, podrías escribir simplemente multi-purpose theme &themeforest y serás dirigido directamente a una lista de resultados de búsqueda de Theme Forest.

Y para encontrar un plugin de slider para WordPress en Code Canyon escribirías slider plugin &codecanyon

Más información sobre los accesos directos de búsqueda de qwick.

Ejemplos de código online

Qwant, al igual que DuckDuckGo, también tiene la capacidad de proporcionar código online en sus resultados de búsqueda. He descubierto que muestra código en los resultados de búsqueda con menor probabilidad, pero cuando lo hace, proporciona código en un formato más legible. Por ejemplo:

Inline Code SamplesInline Code SamplesInline Code Samples

Sitio web: https://www.qwant.com/

8. Alternativas a las bibliotecas alojadas en Google

Uso en el diseño web

  • Carga rápida y fácil de archivos desde bibliotecas de terceros

¿Por qué considerar alternativas?

  • Para cargar bibliotecas que no estén disponibles en las bibliotecas alojadas por Google
  • Para dispersar el riesgo mediante el uso de varias CDN que eviten un punto de error único

1. jsDelivr

jsDelivrjsDelivrjsDelivr

Características principales:

  • Bibliotecas de NPM, GitHub y WordPress
  • Para combinar archivos
  • Para minificar archivos
  • Para gestionar versiones
  • Para obtener estadísticas de uso
  • API disponible
  • Gratuito

Sitio web: https://www.jsdelivr.com/

2. cdnjs

cdnjscdnjscdnjs

Características principales:

  • 3.442 bibliotecas disponibles
  • Tiene como objetivo albergar todas las bibliotecas más populares
  • API disponible
  • Gratuito

Sitio web: https://cdnjs.com/

Resumiendo

Lo bueno de Internet y el campo del diseño web es que siempre hay alguien innovando, creando la próxima increíble herramienta que va a llevar nuestra profesión al siguiente nivel. Así que incluso aunque estés muy satisfecho con tus actuales herramientas, merece la pena tomarse un momento para mirar a tu alrededor de vez en cuando.

Espero que aquí hayas encontrado algunas herramientas y servicios que hayan despertado tu interés y que te haya ayudado a incorporar alguna nueva utilidad en tus flujos de trabajo de diseño web.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.