Si necesitas iconos o ilustraciones para cualquier tipo de proyecto, ya sea uno personal o comercial, es muy probable que no los vas a estar diseñando tú mismo, sino que acudirás a buscar opciones en la web. En ese caso, una de las mejores que te puedes conseguir esta: Iconduck.

Iconduck es una enorme librería con más de 116 mil iconos e ilustraciones completamente gratuitos y open source, y lo mejor de todo, te los puedes bajar en formato vectorial (SVG), nada de iconos solo en PNG de baja resolución que no puedes usar para gran cosa.

Un paraíso de iconos de uso libre

Búsqueda en Iconduck

Todos los iconos que encuentras en Iconduck son gratis y se pueden usar tanto en proyectos personales como comerciales. Sin embargo, no todos tienen la misma licencia, así que es posible que en algunos casos, dependiendo de dónde los vayas a usar, debas añadir un enlace y/o crédito para dar atribución al autor.

Esto es sencillo porque todos los iconos muestra información sobre su autor original, el tipo de licencia y están enlazados a una página en la que aparece todo el set al que pertenecen. Muchos iconos tienen licencias CC0, es decir, completamente libres de uso sin siquiera necesidad de atribución.

En Genbeta

Las mejores webs para descargar iconos gratis

Otra cosa genial de Iconduck es que tiene (es) un buscador, así que puedes buscar cualquier tipo de palabra para encontrar lo que necesitas entre su enorme librería de recursos. Hay tantos iconos que puedes conseguir uno para casi cualquier cosa.

Si no sabes cómo manejar una imagen vectorial en SVG, convertir el archivo a PNG, ICO, JPEG, o incluso WebP es muy simple si lo importas con alguna herramienta como Adobe XD, Pablo, Pixlr o Sketch. Aunque pronto, en Iconduck planean ofrecer esa opción de iconos en distintos formatos desde la misma web.

Hace diez días, la empresa española Kaleidos presentaba al mundo la versión 'alpha' de PenPot (antes conocido como UXBOX), una herramienta web que busca convertirse en el equivalente a Google Docs en el campo del diseño gráfico y la creación de prototipos e interfaces.

Como buen proyecto de código abierto (se acoge a la Mozilla Public License), Penpot trabaja con un formato estándar de imágenes vectoriales como es SVG, lo que confiere al trabajo que podamos realizar desde el mismo de compatibilidad con una amplia gama de herramientas alternativas.

Una alternativa open source en un campo dominado por las herramientas comerciales

Obviamente, cuando lo comparamos con Google Docs, nos referimos a que también admite el trabajo colaborativo, con edición y comentarios en tiempo real.

Pero a la hora de comparar PenPot con otras herramientas, hay otro nombre que varios usuarios han sacado ya a colación: Figma, una de las herramientas de referencia en el diseño de interfaces. Ambas herramientas son bastantes similares, si bien PenPot no es compatible con el formato propietario de Figma (el *.fig).

En Genbeta

Usabilidad y accesibilidad web: qué son y en qué se diferencian estos conceptos que nos facilitan la vida como usuarios

Según los comentarios de Pablo Ruiz Múzquiz, CEO de Kaleidos, en Producthunt, no debemos dejarnos llevar por la etiqueta de 'alpha' del producto: "ten la seguridad de que puedes ser productivo con PenPot a día de hoy".

Al ser una herramienta web open source, no sólo podremos usarlo gratuitamente registrándonos en el dominio penpot.app, sino que también nos proporciona la opción de autohospedaje, con lo que podremos instalar una instancia en un servidor web gestionado por nosotros (como ocurre, por ejemplo, con Wordpress).

Además, durante una sesión de preguntas en Reddit, sus desarrolladores explicaron que, si bien Penpot no admite un 'modo offline' ni tienen planes de incorporarlo, su 'hoja de ruta' sí incluye una versión de escritorio en algún momento no determinado.

En definitiva, otra (prometedora) herramienta que se suma al creciente catálogo de alternativas open source a herramientas comerciales consolidadas.

Vía | Mixx.io

No todo el mundo dispone de los recursos necesarios para pagar a un profesional que cree ilustraciones personalizadas para nuestro proyecto. Por suerte, en el mundo hay personas que crean recursos gratuitos para cualquiera que desee usarlos sin pedir nada a cambio, ni siquiera una atribución, y es digno de señalar.

Es el caso de karthiksri91, usuario de Reddit que ha creado más de un centenar de ilustraciones de alta calidad, totalmente gratis, que pueden usarse sin atribución y que permiten una personalización en base a la elección de un color. Además, cada día añade una nueva. Realmente sorprendente.

Cómo elegir una ilustración y descargarla

Elegir una ilustración de esta colección es bastante sencillo. Podemos simplemente navegar por la web y detenernos ante la imagen que más nos guste, usar el buscador introduciendo una palabra clave que nos interese o mediante el selector de género, que nos mostrará imágenes de mujeres u hombres.

En Genbeta

Descarga gratis estas preciosas ilustraciones 3D basadas en habitaciones icónicas y que funcionan genial como fondo para Zoom

Una vez encontrada una ilustración de nuestro gusto, o incluso sin realizar ningún tipo de búsqueda, simplemente viendo todos los diseños que hay, podemos elegir un color mediante el selector situado en la parte superior derecha y como por arte de magia todos los dibujos se colorean con ese tono o similares.

Con la imagen a nuestro gusto, tenemos la posibilidad de descargarla en formato SVG o PNG. Así de sencillo, no hace falta ni registrarse ni aportar ningún tipo de dato. Eso sí, si queremos agradecer el trabajo de la persona que hay detrás, ella misma nos sugiere compartir el proyecto en redes sociales.

Heroicons es el nombre de una interesante colección de iconos SVG gratuitos con licencia libre, concretamente una licencia MIT, listos para descargar y emplear en nuestros proyectos. Sobre todo, para interfaces de usuario.

En el momento de escribir este artículo, el compendio de símbolos se encuentra compuesto por 226 creaciones, los cuales se dividen entre pequeños y mediados, así como entre aquellos de color sólido y otros esquemáticos. Hablamos de dimensiones 20x20 y 24x24 en versiones tanto SVG como JSX.

Heroicons, iconos ideales para nuestras interfaces de usuario

Uno de los aspectos más destacados de Heroicons es que al estar creados en SVG/JSX permiten su utilización dejando a un lado archivos externos.

Como se explica en su página de GitHub, para usar estos iconos, simplemente debemos copiar la fuente del icono que necesitamos de heroicons.com e insértela en nuestro HTML de la forma que vemos en la siguiente imagen.

En Genbeta

Con este plugin gratuito puedes integrar montones de plantillas, gráficos, iconos e imágenes directamente en PowerPoint

De igual manera, hacerlo así permitirá personalizar los iconos mediante propiedades de color vía CSS bien sea manualmente, bien mediante clases establecidad. Heroicons es una creación de Steve Schoger de TailwindCSS.

Vía | Microsiervos

En Genbeta constantemente intentamos compartir con ustedes todo tipo de recursos gratuitos que puedan usar en cualquier tipo de proyectos. Desde vídeos a imágenes de stock, hasta sonidos y canciones, o libros.

En ese mismo espíritu queremos compartir con ustedes los iconos de Tilda Publishing, una plataforma para crear sitios web sin saber programar, que casualmente está regalando más de 43 sets de iconos vectoriales que puedes usar tanto en proyectos personales como comerciales.

Son más de 700 iconos en formado SVG que puedes descargar directamente desde la web sin registro ni pasos previos. Las categorías están divididas en pequeños paquetes temáticos, como por ejemplo: educación, finanzas, deportes, coworking, viajes, música, etc.

La licencia se te concede de forma no exclusiva para usar como parte de un diseño o sitio web, y no como el componente principal o único del trabajo donde se va a usar.

Lo único que exige la licencia es crédito con un enlace a tilda.cc/. Y, puedes adaptar y modificar los iconos como necesites. Es una colección bastante amplia y minimalista que puede venir bien en muchos casos, especialmente porque te los ofrecen gratis.

Si buscas una alternativa a las webs más conocidas para descargar iconos gratis, el nuevo motor de búsqueda Iconshock probablemente tenga todo y más de lo que necesitabas.

En su biblioteca consigues más de 2 millones de iconos, la mayoría en formato de gráficos vectoriales (SVG) y además puedes editarlos directamente desde la misma web y personalizarlos a tu gusto.

En Iconshock te consigues con iconos distribuidos en más de 400 paquetes diferentes, en unos 30 estilos que van desde ilustraciones realistas, a iconos estilo flat, o algunos especiales para sistemas operativos como Android, iOS o Windows.

Editor de iconos en linea

El buscador te deja encontrar iconos según etiquetas y estilos, y luego en el editor puedes cambiarlos de color, fondo y tamaño. Ahora bien, utilizar el servicio es completamente gratis y puedes descargar los iconos que quieras y edites en tamaños que van de los 24 a los 72 pixeles.

Para descargar iconos de mayor resolución, o en formato SVG sí necesitas pagar una suscripción premium. Los iconos que consigues son de una excelente calidad, especialmente los estilo flat, pues para personalizar tienes paletas de colores preestablecidas que son verdaderamente hermosas.

En Genbeta | Descarga vídeos e imágenes de stock gratuitos y de alta calidad

Mozilla acaba de anunciar oficialmente la versión 4 de Firefox en su blog, y como hicimos con Internet Explorer 9 en su día os traemos un análisis a fondo de todas las características de esta nueva versión de Firefox.

Firefox 4 es fruto de mucho tiempo de desarrollo: empezamos a ver los primeros mockups a finales del 2009, y un año y unos meses más tarde tenemos la versión final, con muchas características que se han caído pero con un rediseño total de la interfaz y un navegador muchísimo más moderno. Vamos a ver cuáles son esos cambios

Una interfaz totalmente rediseñada

Lo primero que vemos al abrir Firefox es su nueva interfaz, muchísimo más compacta que en la versión 3.6. Las pestañas ahora son rectangulares y están colocadas en la parte superior. El menú puede eliminarse y se convierte en un botón en la esquina superior izquierda, al estilo de Opera.

Además, se elimina la barra de estado inferior, que sólo aparecerá cuando estemos cargando la página o tengamos el ratón sobre un link, de forma similar a lo que hace Chrome.

Otra novedad importante es la llamada In-Content UI de la que os hablamos hace un tiempo. Finalmente sólo ha sido adoptada en el menú de complementos, mientras que el resto de menús siguen apareciendo en una ventana aparte.

Podríamos resumir la nueva interfaz como una mezcla de interfaces del resto de navegadores. En realidad esto no es nada malo porque, aparte de que todos lo hacen (mirad por ejemplo la barra de pestañas de los navegadores: apenas se distinguen en unos pequeños cambios de forma o de color), Firefox ha conseguido tener una interfaz buena, bonita y funcional, que al final es lo que realmente importa al usuario.

Nuevas formas de gestionar las pestañas

Con Firefox 4 llega un nuevo sistema de gestión de pestañas. Por un lado tenemos las pestañas de aplicación, también llamadas fijas o pinned tabs según el navegador que uséis. Podemos fijarlas pulsando en el botón derecho y después en “Fijar pestaña”. Resultan muy útiles cuando tenemos una pestaña siempre de fondo, como pueda ser la del correo o de alguna red social: siempre están en el mismo sitio y no se cierran si pulsamos “Cerrar todas las demás pestañas”.

También está Panorama (que empezó llamándose Tab Candy) que nos permite gestionar visualmente las pestañas agrupándolas a través de una interfaz visual muy llamativa. Personalmente, aunque es muy bonito y moderno no le encuentro demasiada utilidad: para agrupar pestañas es demasiado engorroso, y el hecho de ponerle nombres a las pestañas tampoco me aporta demasiado. Eso sí, seguro que alguien le puede sacar buen partido, de eso no me cabe ninguna duda.

Lo que sí encuentro útil es la nueva forma que han introducido para cambiar pestañas: en la barra de direcciones. Así, sólo con teclear el nombre de una pestaña en la barra podremos cambiar a ella pulsando intro, como veis en la siguiente imagen:

Firefox: navegación muy segura y privada

Aunque Firefox no es de los navegadores con más fallos de seguridad o privacidad graves, Mozilla se ha seguido preocupando para que Firefox proporcione una navegación privada y segura. Como muestra tenemos la implementación de Do Not Track, que podéis activar en Opciones -> Avanzado -> General y que le dice a los sitios web que no quieres ser rastreado.

También han incluido CSP y HSTS. Detrás de estas siglas se esconden dos sistemas de seguridad que tratan de evitar el clickjacking y ataques XSS, y los ataques man in the middle obligando a establecer conexiones seguras por el otro. Si tenéis curiosidad por saber cómo funcionan podéis mirar los documentos técnicos, en inglés, sobre CSP y HSTS.

Soporte total de HTML5

Aunque estos cambios no los veamos, también son bastante importantes. En la versión 4, los chicos de Mozilla se han preocupado por soportar a la perfección HTML5 y han incluido, entre otras cosas, los códecs de WebM para vídeo HD, los nuevos formularios HTML5, los gráficos 3D a través de WebGL y CSS3.

Han añadido la API de audio, que permite a los desarrolladores de webs leer y manipular los sonidos de las etiquetas audio. También han dado más control a los desarrolladores para manipular el tipo de fuente, y ahora permiten usar gráficos SVG como imágenes normales con el consiguiente aumento de velocidad (los gráficos SVG son muchísimo más ligeros que cualquier otro tipo de imagen) y de calidad.

Firefox 4, rápido como una bala

Una de las cosas que más se criticaban de Firefox era su lentitud y pesadez. Los chicos de Mozilla se han preocupado bastante por corregir esto, y como podéis ver en la imagen de arriba han conseguido unos resultados bastante buenos.

Han mejorado prácticamente todos los aspectos de Firefox para hacerlos más rápidos: XPCOM (complementos), scroll de páginas (ahora es realmente fluido), Javascript y gráficos (aceleración por hardware en Windows, Linux y Mac). La verdad es que el inicio aunque no sea instantáneo es bastante rápido, y en general el navegador va muy bien, sin problemas de rendimiento.

En cuanto al consumo de memoria no se dispara demasiado: ahora mismo consume 175MB con 7 pestañas, mientras que Chrome (por poner un ejemplo) con 8 pestañas pasa de 300MB. En realidad, si tenéis un ordenador moderno con memoria suficiente (yo tengo 2GB) el consumo de RAM ya no debería importaros demasiado, ya que entra en juego el concepto “Unused RAM is wasted RAM”.

Lo que viene a decir esto es que si el navegador consume más RAM es que tiene más elementos “en caché”. Desde esa “caché” puede acceder más rápidamente a los elementos. Si no los tuviese en la RAM tendría primero que acceder a los elementos en el disco, cargarlos en RAM y después usarlos. En resumen, que con un ordenador moderno lo mejor que podéis hacer es olvidaros del consumo de RAM.

Firefox Sync de serie, sincroniza datos entre todos tus Firefox

Otra de las características que trae Firefox es Sync. Aunque ya llevaba tiempo con el nombre de Weave y en forma de extensión, Mozilla lo incluye ahora de serie. Con él podemos sincronizar todos los datos del navegador: contraseñas, preferencias, marcadores, historial y pestañas; aunque se echa de menos la sincronización de extensiones.

Tenemos que crearnos una cuenta de Sync para poder usarlo, aunque esto no es demasiado inconveniente. Para sincronizar en móviles (Android o Firefox Home en iPhone) tendremos que introducir en el navegador del ordenador un código que aparece en el dispositivo y que vincula automáticamente el navegador a la cuenta.

Otros cambios: Consola Web, instalación de extensiones sin reiniciar y multitouch en Windows 7

Además de los cambios más llamativos, también hay algunos cambios menos llamativos para el usuario normal, pero que no dejan de ser importantes. Por ejemplo, ahora hay una nueva consola de errores, la Consola Web, que muestra en tiempo real toda la actividad de una página: registro de peticiones HTTP y errores en Javascript y CSS.

En relación con las extensiones, Firefox permite ahora instalarlas sin reiniciar, además de que han incluido la SDK de Jetpack para hacer el desarrollo más sencillo.

Otro cambio es la inclusión de soporte multitouch en Windows 7, de forma que las páginas pueden aprovechar la entrada con varios dedos, tal y como podéis ver en el vídeo de arriba.

Conclusiones: un buen trabajo, pero todavía le falta algún detalle

El cambio desde Firefox 3.6 es brutal, es un navegador totalmente nuevo. Es rápido, fluido, cómodo, seguro, moderno, potente… Sin embargo, para mí gusto todavía tiene que mejorar algún detalle. Por ejemplo, si sois usuarios de Linux lo veréis a la primera: la interfaz sigue siendo horrible en este sistema, sobre todo en KDE. En GNOME puede tener un pase, aunque sigue habiendo una diferencia gigantesca con la de Windows.

También le falta integrar todos los menús con el InContent-UI: al final resulta más cómodo que los menús tradicionales, y visualmente son más atractivos (al menos en los mockups que nos enseñaron).

Pero a pesar de estos detalles, y como digo arriba, Firefox 4 es un navegador muy bueno que ha conseguido recuperar todo el terreno que le llevaban el resto de navegadores, incluso ganando en algunos aspectos. Os animo a probarlo, si no habíais usado las versiones de desarrollo os vais a llevar una verdadera sorpresa.

Vía | Mozilla Blog
Vídeo | Vimeo
Descarga | Firefox 4

Bonus: ¿Queréis saber cómo van las descargas de Firefox? Mozilla ha desarrollado esta página que muestra las descargas de Firefox 4 en todo el mundo.

Bonus 2: Xallow nos avisa sobre la página de demos de Mozilla, donde podéis ver en funcionamiento (y probar) las nuevas características de Firefox 4.

No es el primer caso que vemos en cuanto a la aparición de un determinado tipo de herramientas online, donde tiempo más tarde, Google las adopta de serie en sus servicios. El último ha sido la inclusión de dibujos vectoriales en los documentos de Google Docs.

Pues si, a partir de ahora podemos incluir diagramas en nuestros propios documentos, gracias sobre todo, a que usa la tecnología de la startup Tonic Systems, que Google adquirió en 2007.

Lo único que tenemos que hacer es irnos al menú insertar, y del desplegable seleccionar dibujo. Ya ahí se nos aparecerá una ventana nueva donde crearemos dicho dibujo, de carácter vectorial, contando con sets de figuras, líneas, flechas, dibujo a mano alzada y cuadros de textos, además de zoom o terminaciones de las flechas, entre otras opciones.

Iremos añadiendo cada uno de los elementos que queramos, que podemos mover, redimensionar, deformar o incluso rotar, además de cambiar el grosor de sus líneas y colores.

Una vez terminado, cerramos la ventana y el dibujo aparecerá en nuestro documento, que podemos mover hacia el lugar del documento que queramos. Hay que tener en cuenta que los dibujos vectoriales creados son gráficos SVG (scalable vector graphics), aunque el caso de que nuestro navegador web no sea compatible con este tipo de gráficos, Google Docs usará gráficos VML (vector markup language).

Vía | Google Docs blog