Loaders y spinners en CSS gratuitos y listos para usar

No hay sitio web en internet que no use alguna forma de mostrar el progreso de una tarea. Pueden ser barras de progreso, spinners o loaders. Y de estos ultimos me quiero ocupar hoy, por eso quiero dejarles un par de recursos para descargar unos modelos geniales de loaders y spinners en CSS.

CSS Spinners y Loaders

CSSPIN

Aquí podemos encontrar 12 modelos de diversa índole, para todos los gustos. Lo bueno es que son modulares y completamente personalizables. En esa página tienen los ejemplos, y desde allí acceden a los códigos en Github.

Loaders and Spinners en CodePen

En CodePen hay una genial colección, algunos recursos son de pago, pero la mayoría son gratuitos. Hay diseños más avanzados que en el primer sitio que les recomendé.

Single Element CSS Spinners

Aquí pueden encontrar 8 modelos bastante simples, especial para aquellos a los que les gusta lo minimalista. Si hay alguno que les gusta, desde allí mismo pueden obtener el código.

SpinKit

Y en este último link van a encontrar 11 modelos, también bastante básicos pero muy interesantes. Si hay alguno que les gusta, arriba tienen el link que dice “source”, para descargar el código.

Soapbox, para grabar screencast a pantalla compartida y sin saber de edición de video

Existen muchas herramientas para grabar screencasts, pero la que les quiero comentar hoy, tiene varias opciones interesantes que la despegan de las demás. Se trata de Soapbox, una extensión de Chrome que nor permite grabar screencasts, editarlos y subirlos. Todo en unos minutos y sin saber de edición de video.

Soapbox

Soapbox está orientado a personas que se dediquen al ámbito educativo o bloggers, ya que nos permite grabar lo que sucede en la pantalla, y a la vez filmarnos con la webcam para que podamos explicar los tutoriales de forma más amena y personalizada.

El funcionamiento es muy simple, y lo detallo a continuación:

  1. Instalamos la extensión, y se nos agregará un ícono de una camarita en la barra de herramientas.
  2. Nos logueamos con nuestra cuenta de Google para acceder al servicio.
  3. Ahora, cuando queramos grabar, pinchamos en el botón de la camarita y nos mostrará nuestra cara. Tenemos que centrarla dentro de las dos líneas punteadas para asegurarnos que saldrá bien en el video.
  4. Le damos el botón “start recording” y el navegador nos pedirá permiso para grabar la pantalla, ahí hay que aceptar.
  5. Comienza la cuenta regresiva y la grabación del video. Tengan en cuenta que continuamente les está grabando la cara aunque ustedes no se vean.
  6. Cuando terminen de grabar, hagan click en la camarita nuevamente y se detendrá la grabación.
  7. Automáticamente comienza a subirse el video, y desde allí podrán editarlo a gusto.

Lo mejor de todo es que no necesitamos conocimientos de diseño para editar el video. Posee una herramienta muy sencilla que, mientras se está subiendo el video grabado, podemos ir agregando transiciones, personalizar el reproductor, etc.

Soapbox es una extensión que solamente está disponible para Chrome, y se puede descargar desde su web oficial, en este enlace.

Otros posts que les pueden servir:

Topol.io, plantillas de email HTML gratis con editor incorporado

Si tienen algún proyecto en el que tienen que hacer email marketing y enviarle newsletters a sus suscriptores, esta herramienta les será de muchísima utilidad. Se trata de Topol.io, un servicio gratuito que nos permite crear plantillas HTML para nuestros emails de manera completamente gratuita y sin saber de diseño.

Topol.io

Topol.io es, como ya les comenté arriba, un servicio gratuito que nos permite crear nuestras plantillas HTML de manera muy simple, sin que sepamos de diseño. Todo se hace gracias a un genial editor incorporado que nos permite ir modificando las distintas partes de la plantilla con apenas unos clicks.

Lo único que hay que hacer es elegir alguna de las plantillas que están disponibles y comenzar la edición. Actualmente hay 7 modelos; son pocos, pero seguramente con el tiempo van a ir agregando más.

Topol.io

Una vez que seleccionamos el modelo deseado y pasamos el captcha, se cargará el editor. Desde allí se puede modificar todo lo referente al diseño y contenido de la plantilla de manera muy sencilla, como si se tratara de un editor visual.

Una vez que se termina la edición, solo nos queda guardar y descargar la plantilla para usar libremente en nuestros emails.

Es un recurso que todos tendríamos que tener guardado en marcadores por las dudas.

Las 3 mejores herramientas para saber si abrieron tus mails

No hay nada más frustrante que enviar un mail y que no nos contesten. Pero más frustrante aún es saber que lo leyeron y no nos contestaron. Pero ¿cómo saber cuándo han abierto nuestro mail? A continuación quiero recomendarles 3 excelentes herramientas para saber si abrieron el mail que enviamos.

Cómo saber si abrieron los mails que envié

Para averiguar esto, voy a ofrecerles tres servicios gratuitos que también tienen sus versiones pro.

Básicamente, el rastreo funciona mediante la inserción de un código que el receptor no ve, es más, ni se entera que estamos monitoreando el mail enviado. Cuando abre el mail, el servicio de monitoreo puede detectar a qué hora lo abrió, con qué navegador y SO, etc.

Aclaración: Esto no sirve para saber si han abierto un mail que enviamos ANTES de instalar la extensión. Funciona a partir de que instalamos la extensión. Es una aclaración un poco estúpida, pero nunca falta el que encaja en ese adjetivo (?).

Mailtrack

Saber si abrieron nuestro mail

Mailtrack es uno de los servicios que primero apareció en el mercado. Es más, lo hemos comentado en el blog en su momento.

Es uno de los más avanzados en cuanto al panel de control que tiene. Desde allí podemos ver todo tipo de estadísticas de los mails enviados, cuándo se abrieron, a qué hora, y muchos datos más.

Email Tracker

Saber si abrieron nuestro mail

Email Tracker es otra opción que nos permite saber si abrieron nuestro mail. Desde la barra de herramientas del navegador, podemos ver una lista con los mails enviados, los que no han sido abiertos, y hasta podemos tener notificaciones cuando abren nuestros mails.

Doubletick

Saber si abrieron nuestro mail

Doubletick es el servicios “menos sofisticado” en su versión gratuita. Solo avisa cuando abrieron el mail y nada más. Si quieren más info tienen que comprar el servicio pro.

Conclusión

La verdad, me es muy difícil decidir con cual quedarme, los tres servicios están muy buenos (pero me quedaría con MailTrack). Si bien las cuentas gratuitas tienen sus limitaciones, sirven perfectamente para saber si abrieron nuestro mail o no.

Los dejo que ustedes prueben las herramientas, luego, si quieren, comenten diciendo cual les gustó más.

Sombras para texto en CSS: 41 modelos gratis y listos para usar

Hoy en día, gracias a CSS, se puede hacer cualquier cosa. Y en este caso les quiero dejar una colección de efectos de sombras en CSS para que puedan aplicarle a sus textos y darles mejor estilo.

Sombras CSS para texto

Este tipo de recursos me encantan, por eso nunca dudo en compartirlo con todos ustedes; sobre todo con los diseñadores que nos leen.

Sombras en CSS gratis

Lo bueno de estas sombras es que son completamente gratuitas y libres para usar en nuestros diseños.
En total son 41 diseños distintos, listos para ser descargados y usados en segundos.

En cada diseño podemos ver el nombre de la fuente usada, la paleta de colores y, obviamente, el código CSS para usarlo en nuestros diseños.

Al tener los códigos, luego podremos modificarlos a gusto. No es lo mismo empezar de cero, que ya tener una base a editar. Podemos cambiar los colores, el tamaño de la sombra, etc.

 

2 herramientas gratis para encontrar las mejores combinaciones de fuentes

Una de las tareas más complicadas de todo diseñador es encontrar combinaciones de fuentes. Esta combinación tiene que ser agradable a la vista, pero puede que elijamos fuentes totalmente distintas o similares. Eso va en el gusto de cada uno. Por eso, hoy les quiero recomendar dos herramientas gratuitas para encontrar combinaciones de fuentes perfectas.

Estas webs nos permiten encontrar combinaciones de manera visual. Esto es mucho más sencillo que tener que hacerlo “manualmente”. Nos ahorra mucho tiempo y convierte la tarea en algo divertido.

Mixfont

Por un lado tenemos Mixfont, que puede usarse de dos maneras:

  • Usar el generador de combinaciones: dándole al botón “generate”, nos mostrará, de manera aleatoria, las distintas combinaciones de fuentes posibles.
  • Ver las combinaciones más populares: esto nos ahorra más tiempo aún. Nos mostrará las combinaciones más votadas por las demás personas.

Mixfont

Dentro de las opciones que tenemos, se puede invertir la combinación; también tenemos un botón para cargar otra combinación; y hasta nos dan el código para embeber la fuente.

Si hacemos un poco de scroll, llegaremos a la sección donde tenemos vista previa de la fuente utilizada en distintos diseños. Realmente excelente.

Fontjoy

La segunda opción es Fontjoy, una herramienta similar, pero con algunas características que la diferencian de Mixfont.

En principio, nos permite hacer combinaciones de hasta 3 fuentes. Esto está bueno porque podemos, por ejemplo, elegir fuentes para título, subtítulo, y contenido del párrafo.

Fontjoy

Una de las características interesantes de Fontjoy, es que podemos definir el nivel de similitud de las fuentes. Si queremos que sean parecidas o que contrasten.

Otras cosas a resaltar es que podemos ver una lista de recomendaciones para las fuentes. También podemos bloquear alguna de las fuentes por si no queremos que se cambie al generar otra combinación.

TermBar, el Terminal en la barra de menú de tu Mac

El terminal es una herramienta que todo blogger, webmaster o administrador de sistemas usa asiduamente, por eso cuando vi esta app no podía dejar de compartirla con ustedes. Nos permite tener el terminal en la barra de menú al alcance un click.

TermBar

Y no estoy hablando solo de un acceso directo en la barra de menú, es una consola funcional desde la barra de menú.

Una vez instalada, se agrega un botón en la menubar, y desde allí desplegamos la consola. Esto nos permite ahorrar espacio en el escritorio y tener al alcance de un click el terminal.

Llegamos al final, y acá es donde tengo que decirles que el costo de la app es de 1 dólar. En realidad es de 2 dólares, pero al momento del pago pueden compartir el link en redes sociales y les hacen un descuento del 50%.

Creo que no es un precio excesivo, si usamos el terminal como herramienta de trabajo, no podemos andar llorando por dólar.

También les puede interesar:

EasyMail, un impresionante cliente de escritorio de Gmail para Windows 10

Gmail es uno de los servicios de mail más usados, su interfaz web es genial, pero cuando trabajamos enviando y recibiendo mails, lo mejor es contar con un buen cliente de escritorio para tener más productividad. EasyMail es un excelente cliente de Gmail para Windows 10.

EasyMail

EasyMail es un cliente de escritorio especialmente diseñado para Windows 10. Su interfaz es muy agradable y elegante, además de liviana y fácil de usar.

Usar Gmail sin abrir el navegador

Esa es la principal ventaja de tener un cliente de escritorio: acceder a nuestros mails sin tener que abrir el navegador. Y EasyMail se encarga de eso, ya que nos notifica en tiempo real si tenemos nuevos mails en nuestra bandeja de entrada.

Nos avisa mediante un ícono en la barra de tareas, desde donde podemos acceder al inbox en un segundo.

Otra de las funciones interesantes que tiene este cliente es que tiene soporte para notas y calendarios. Con lo cual podemos tomar notas fácilmente y acceder a nuestro calendario desde la comodidad del escritorio.

Soporte multicuenta

Sin dudas, la mejor función es que tiene soporte multicuenta. Podemos agregar cuantas cuentas de Gmail queramos y gestionarlas desde un solo lugar.

Código de seguridad

También han pensado en la seguridad, podemos asignar un código de seguridad para acceder a la app. Esto está muy bueno para evitar que los intrusos chismosos traten de leer nuestros mails cuando no estamos frente a la PC.

Themes

Tiene soporte para themes. Al igual que Gmail web, también podemos elegir un theme que nos guste para personalizar el diseño de la interfaz aún más.

 

 

Iconos web font de las distros de Linux más populares

Siguiendo con los posts de recursos de diseño, hoy les quiero dejar un set de iconos web font de las distros de Linux más populares. Estos íconos están buenos por si estamos armando algún sitio web en que tratamos temas sobre Linux; para desarrollo de aplicaciones o interfaces web.

Linux Font

Font Linux es completamente gratuito, y ahí mismo les explican su uso. Algunos de los iconos que tiene el pack son: Ubuntu, CentOS, Gentoo, Mandriva, Slackware, Fedora, Linux Mint, Manjaro, RedHat, Debian, OpenSUSE, y varios más.

También les puede interesar:

Infiniforms, para crear formularios en segundos y sin dolores de cabeza

Antes, cuando uno tenía que crear formularios desde cero, esto nos podía llevar un rato bastante largo. Pero ahora, gracias a las herramientas que existen hoyen día, podemos crear formularios en segundos, sin tocar una sola línea de código, y lo mejor de todo: gratis.

Crear formularios

qwd

Creando formularios desde cero

El proceso para crear un formulario nuevo es extremadamente simple:

1- Lo primero, tienen que registrarse gratis. Confirman el mail de registro y listo.

2- Van al menú “Forms”, y luego click al botón “Add new form”.

3- Ahora viene la parte divertida. Aquí pueden agregar todo tipo de campos que van a hacer al formulario en sí.

  • Cajas de texto cortas o largas.
  • Menús desplegables.
  • Checkboxes.
  • Campo de URL.
  • Campo de Mail.
  • Botones radio.
  • Grupos de números (para hacer pedidos de algo, por ejemplo).
  • Calendario.
  • Bloques de texto personalizados.

4- Una vez que hayan diseñado su formulario, pueden guardarlo para comenzar a usarlo.

5- Ahora, para publicar nuestro formulario. Hay que ir al menú “Forms”, y allí veremos la lista de formularios que hemos creado.

Accediendo al que nos interese, nos saldrán las distintas opciones para hacer uso. Pueden embeberlo en sitios web, usar un plugin para WordPress, compartirlo en redes sociales, o bien enviar el link directo al form (acá hay un ejemplo)

Accediendo a los datos ingresados en el formulario

En cada formulario tienen una sección para acceder a los datos que han introducido las personas. Están todos ordenados de manera muy cómoda para que podamos usarlos como mejor nos plazca.

Gratis

Lo bueno de este servicio es que tienen una cuenta gratis con hasta 100 entradas en el formulario. Es decir, solo lo pueden “llenar” 100 personas. Si pasamos ese límite, tendremos que comprar una cuenta de pago, pero no son caras.