Flite, para diseñar anuncios y animaciones en HTML5

flite

Hace pocas semanas os anunciamos una herramienta que Google habí­a construido para permitir que los diseñadores realicen campañas (anuncios) en HTML5. Se trataba de WebDesigner, aplicación que podemos instalar en nuestro ordenador para crear banners y animaciones de diversos tamaños olvidando el Flash, tecnologí­a cada vez menos presente en la web moderna.

Esta aplicación está disponible para Mac y Windows, pero si lo que queréis es una que pueda ejecutarse en la web, sin necesidad de instalar nada, echad un vistazo en Flite.com.

Se trata de una plataforma que, según han informado a Techcrunch, no tiene mucha competencia en el mercado, a excepción de la mencionada WebDesigner de Google, aunque en este caso, al no requerir instalación (es 100% web), puede ayudar mejor a los que usan Linux o a los que no pueden instalar aplicaciones sin pasar por burocráticos procesos en su empresa.

Flite permite importar también archivos de otras plataformas, como Photoshop o Illustrator, siempre con la idea de que el trabajo creado pueda ser visualizado sin problemas desde dispositivos portátiles.

Aunque el objetivo principal es el de crear anuncios, podemos usarlo para realizar cualquier tipo de animación, eligiendo el tamaño y arrastrando los componentes deseados dentro del panel de control.

Más de 300 iconos gratuitos para sitios web, carpetas, tiendas online, móviles, blogs…

Los iconos son parte extremadamente importante en las aplicaciones, tan importante que existen cientos de sitios especializados en la distribución de este tipo de material, tanto gratuito como de pago, con varias licencias diferentes que, como siempre, tenemos que leer detenidamente para saber cuándo podemos usarlos y bajo qué condiciones.

iconos

Hoy os hablaremos de En webiconset.com, donde hay una categorí­a con más de 300 iconos gratuitos clasificados, disponibles tanto para uso personal como comercial. Allí­ podemos encontrar imágenes para ilustrar artí­culos, tarjetas de crédito, iconos para diseños de proyectos de comercio electrónico, aplicaciones móviles, sellos para indicar perfiles de redes sociales, emoticonos para publicar en las redes, carpetas indicando tipos de archivos… son en total 332 iconos, los gratuitos de una colección total de más de 2.000 elementos gráficos que ofrecen en dicho sitio web.

Para obtenerlos hay que poner cero en el campo valor, cuando pide los datos de pago, de esa manera podréis ir a la página de download sin informar tarjeta de crédito.

No es la primera vez que os comentamos esta web como una referencia a la hora de ofrecer iconos gratuitos, lo hicimos hace pocos meses cuando liberaron de forma gratuita algunos iconos que podí­amos usar dentro de mapas de Google, por lo que si os interesa este tipo de contenido es importante que prestéis atención al material que publican para que podáis encontrar el contenido gráfico adecuado para vuestros proyectos.

Dos colecciones de iconos gratuitos que vale la pena conocer

Desde que WWWhatsnew.com nació, hace ya casi 8 años, nos hemos preocupado mucho en divulgar recursos gratuitos para la comunidad de diseñadores web. Herramientas pare recibir feedback, aplicaciones para transformar archivos de un formato a otro, sistemas para diseñar mockups y, por supuesto, iconos gratuitos.

Son tantas las veces que hemos comentado este tipo de sitios que ahora recibimos decenas de emails cada semana con recomendaciones de todo tipo relacionadas con los iconos disponibles en la web, y los dos que comentamos hoy valen la pena ser mencionados.

El primero es de elegantthemes.com, una colección donde el color es el protagonista, con 44 obras de arte en 64px, 128px y 256px, en formato PNG y con su fuente en photoshop (PSD).

iconos

La segunda colección es más discreta, disponible en ionicons.com y divulgada recientemente en webresourcesdepot.com, 400 iconos en blanco y negro pensados inicialmente para ilustrar los trabajos realizados con el framework ionic, para desarrollar aplicaciones móviles en HTML5. Se trata de una fuente de iconos, ideal para la programación de sitios web.

fuente de iconos

Por supuesto, podéis navegar entre más recursos de este tipo dentro de la categorí­a de «Utilidades para diseño«, donde seguiremos divulgando todo lo que sea de utilidad para esta cada vez más respetada categorí­a profesional.

Typecast ofrece versión gratuita para usar tipografí­a de Google Fonts

TypeCast

Seguramente los que trabajáis con diseño web ya habéis oí­do hablar de Typecast (typecast.com), la herramienta, adquirida hace un año por Monotype, que nos permite usar varios tipos de letra en un entorno web que nos ayuda a tomar la decisión antes de implantarla en nuestro sitio.

TypeCast no es una plataforma gratuita, es compatible con varios directorios de fuentes y permite de esa forma comparar cada tipografí­a y realizar pruebas de todo tipo, pero hay que pagar después de la etapa de pruebas.

El caso es que se han asociado con Google para permitir el uso de la herramienta siempre que queramos usar las fuentes de Google Fonts. Solo tenemos que abrir la tipografí­a deseada en www.google.com/fonts, elegir una de ellas y pulsar en el enlace «Probar con TypeCast», accediendo así­ a un panel de demostración gratuito que no requiere registro para ser usado.

Desde allí­ podemos utilizar controles para experimentar el tamaño de la fuente, la medida, la lí­nea de altura, diferentes tipos de letra lado a lado en el editor, rellenos, márgenes, sombras, fondos, bordes… son decenas de herramientas disponibles para «jugar» con la letra en busca de la ideal para nuestro proyecto.

Podemos generar un PNG del diseño creado para compartirlo con otros, generar el CSS y HTML necesario para incluirlo en nuestra web, todo sin pagar ni identificarse.

Visually: Nueva versión de su mercado de infografí­as, presentaciones y trabajos creativos

En visual.ly tenemos la posibilidad de navegar por cientos de infografí­as de los más diversos temas, trabajos realizados por miles de diseñadores que ya trabajan con esta plataforma que ha conseguido crecer de forma impresionante en los últimos dos años.

Además de ofrecer infografí­as para su consulta pública, tienen un market que permite a las marcas solicitar trabajos creativos y recibir propuestas de los profesionales que trabajan en Visually, existiendo la posibilidad de que cualquier diseñador de cualquier parte del mundo forme parte de dicho grupo.

Las marcas solicitan los trabajos aquí­, solicitando tanto infografí­as como ví­deos, presentaciones o animaciones interactivas, con precios que varí­an en función de la complejidad de lo solicitado, aunque nunca es menor de 1000 dólares.

Ahora anuncian un nuevo diseño de la plataforma, permitiendo que sea más sencillo solicitar trabajos ví­a web y trabajar ofreciendo el feedback de cada diseño recibido.

visually

Comentan en la presentación que ha han repartido más de 2 millones de dólares entre los diseñadores que trabajan con ellos, con clientes de la talla de Nissan, Nike, Twitter, NBC, P&G, UNESCO, y un largo etcétera, mostrando como este sistema puede funcionar tanto para pequeños como para enormes clientes de todo el mundo.

Para los diseñadores no deja de ser una buena oportunidad para trabajar en grandes proyectos, aunque siempre existe el riesgo de trabajar en una propuesta y perder el tiempo al no verla aprobada.

Para añadir en tu sitio ví­deos de Youtube que adaptan su tamaño automáticamente

embedPublicar un ví­deo de Youtube en un sitio web (sea blog, portal, sitio corporativo o cualquier otro medio) es algo tan sencillo como copiar y pegar el código que se muestra en la parte «Compartir» existente en la sección inferior de cada uno. Podemos elegir el tamaño del mismo para que se adapte al diseño de nuestro sitio, pero… ¿qué pasa cuando nos consultan desde un móvil? ¿o desde un monitor gigante?.

webdesignerwall.com comenta una solución, solución que vimos más tarde en seetio.com. Se trata de una solución que podemos usar alterando la hoja de estilos (.css) de nuestro blog, algo tan sencillo como añadir las siguientes lineas: Continúa leyendo «Para añadir en tu sitio ví­deos de Youtube que adaptan su tamaño automáticamente»

Flowboard, excelente opción para crear presentaciones multimedia desde el iPad

Ya sea que necesitemos realizar una presentación para el trabajo, crear un portafolio creativo en pocos minutos o simplemente buscar una manera divertida de realizar una galerí­a de fotos para los pequeños de la casa, Flowboard es una opción que podemos tener en cuenta.

flowboard

Es una aplicación con una interfaz muy atractiva e intuitiva, que con unos pocos movimientos nos dejará obtener los resultados esperados. Para comenzar, podemos desplegar toda nuestra creatividad comenzando desde cero o podemos escoger algunas de las plantillas que nos presenta la aplicación para crear catálogos, presentaciones, galerí­as, entre otros.

A nuestro proyecto podemos integrar imágenes, enlaces web, videos, texto con opciones para organizarlos o redimensionarlos. Podemos integrar contenido desde diferentes fuentes como por ejemplo, Google, nuestra cuenta en Dropbox, Facebook, Box, Instagram, SkyDrive.

Cada una de las opciones para integrar contenido a nuestra presentación cuenta con diferentes modos de personalización. Por ejemplo, podemos determinar que fuente utilizar en nuestro texto, recortar las imágenes que deseamos subir, obtener una vista previa de los videos para escoger el adecuado, entre otros.

Desde el editor podremos corregir o cambiar cualquier detalle según nuestro criterio o guardar en borrador para una edición posterior. También tenemos opciones para compartir directamente en Twitter, Facebook, correo electrónico o mediante un link que nos proveerá la aplicación.

Flaticon, galerí­a gratuita de más de 14.000 iconos para usar en nuestros trabajos

flaticon

Webmasters, diseñadores, app developers… os recomendamos hoy Flaticon, una amplia (muy amplia) galerí­a de iconos que podremos descargar para utilizar en nuestros proyectos, todos ellos creados por diseñadores profesionales y con iconos también de Freepik, un motor de búsqueda para recursos creativos.

Los iconos no serán en 3D o coloreados en este caso, y la galerí­a se ciñe fuertemente a la estética minimalista ofreciendo dichos iconos en blanco y negro y con un diseño sencillo, como está de moda en la web 2.0. El sitio web nos permitirá buscar los iconos de forma detallada, cosa a agradecer en una galerí­a con más de 14.000 elementos, y podremos buscar los iconos según popularidad, por categorí­as (animales, edificios, flechas, arte, controles, comercio, educación, y unas cuentas más) e incluso por packs según diseño, menú que nos especifica el nombre del diseñador o developer responsable de dichos iconos. Por supuesto, también podemos utilizar el buscador integrado en el sitio web para buscar motivos o sí­mbolos muy concretos.

Adicionalmente, y algo digno de mención, Flaticon ofrece ahora un plugin gratuito para Photoshop para buscar los iconos directamente desde el editor de imágenes, para insertarlos directamente en el lienzo, cosa que nos ahorra tiempo.

Todos los iconos son descargables de manera gratuita, y seleccionando múltiples objetos en la galerí­a podremos hacer clic en el «download» de la parte superior derecha para bajarlos todos a la vez.

Plantilla web en HTML5 gratuita imitando las tarjetas de Google Now

plantilla

Iván Barcia nos presenta una plantilla realizada por él mismo en HTML5 y CSS3 que, imitando el estilo de las tarjetas de Google Now para Android, está disponible de forma gratuita en su web para que podamos bajarla y usarla en nuestros proyectos.

Se trata de un documento que comenzó como un proyecto personal para realizar documentos (manuales), aunque fue tomando forma para un uso general y se decidió desarrollar un manual para ofrecerlo de forma gratuita bajo licencia Creative Commons Attribution 3.0 Unported.

Todo el código HTML y CSS está escrito por mí­, sin partir de ninguna plantilla. Ambos están validados por la W3C. El manual y toda la documentación adjunta está en español, espero poder ofrecerla en mas idiomas pronto.

El diseño puede consultarse desde cualquier dispositivo, ya que se adapta a las diferentes pantallas. Es posible bajarlo desde la web y acceder a una demostración de dicha plantilla directamente desde aquí­.

Esperemos que siga evolucionando y llegue a transformarse en un tema para Wordpress, el diseño lo merece.

Notegraphy, para transformar nuestros textos en obras de arte

Si acostumbráis a escribir textos en las redes sociales y queréis destacar su forma un poco más, os aconsejo echar un vistazo a Notegraphy (notegraphy.com).

Se trata de una aplicación para iOS y web que permite transformar textos en obras de arte, generando estilos de forma automática, como si de filtros de instagram se tratara, para publicar el resultado en redes sociales o en nuestro propio perfil dentro de la aplicación.

notas

Solo tenemos que escribir y seleccionar el formato, eligiendo entre uno de los disponibles. De momento solo se puede ejecutar en iOS y ví­a web, no hay versión Android, pero podemos consultar el resultado de cualquier perfil desde la web, siguiendo y siendo seguidos, de nuevo como en Instagram.

Es por ello que en lifehacker lo llaman «el instagram de los textos», un recurso ideal para quien respeta lo que escribe por encima de todo y quiere dar forma al contenido que muchas veces pierde protagonismo por falta de un poco de «sal» en su presentación. La primera letra de lo que escribimos servirá para diseñar el fondo, el resto podrá mostrarse con diferentes colores y tipografí­as, permitiendo guardar borradores o publicar directamente en nuestro perfil.

Mirad el ví­deo de presentación para que podáis entender mejor sus posibilidades:
Continúa leyendo «Notegraphy, para transformar nuestros textos en obras de arte»