Atajos herramientas de Photoshop

No está de más tener una hojita impresa con la imagen superior con los atajos de teclado de las herramientas de Adobe Photoshop.

Visto en el tumblr de AdoboPhotoshop.

Pantonera para Android

Quizás el título de la entrada sea algo sensacionalista, pero era el más apropiado de poner para escribir sobre la última aplicación que he instalado en mi smartphone Android: MyPantone.

Detrás de ese nombre simplón se encuentra una aplicación realizada por Pantone con sus bibliotecas de color (también existe una versión para iOS) y que nos permite conocer los valores sRGB, html y Lab para toda la gama de tintas directas Pantone incluyendo Solid Coated + Uncoated, Color Bridge Coated + Uncoated, Metallics Coated, Pastels & Neons Coated + Uncoated, Goe Coated + Uncoated, GoeBridge Coated, CYMK Coated + Uncoated y las librerías Fashion Home (Moda y Hogar).

Lo mejor: que además de consultarla como las pantoneras de toda la vida, tenemos la opción de utilizar imágenes que tengamos o sacarlas en el momento con la cámara del teléfono/tablet y consultar los Pantones más aproximados a la realidad.

Aunque como siempre, dependerá de muchos factores como la cámara que usas, la iluminación, balance de blancos... así que casi mejor tenerlo sólamente como una pequeña ayuda de referencia. Y nada más.

La otra cara de la moneda y como mala noticia es que MyPantone es de pago. La puedes encontrar en la Google Play Store por 5,67€ o también por el mercado negro... pero eso ya son otras historias. Que tampoco es un dineral comparado con las pantoneras en papel... pero tampoco son lo mismo.

¡Ah! Y la paleta que te hayas creado luego te la puedes exportar a las aplicaciones Adobe que tengas en el ordenador. ¿A que esto tiene buena pinta?

Crear tipografía con Prototyp-0

El proceso para crear una tipografía es largo y tedioso. Hay que fijar reglas para todos los caracteres y el estudio de proporciones y acabados para todos ellos puede llevar meses. Meses de bocetos, dibujos técnicos y dibujos vectoriales. Pero Prototyp-0 intentará ayudarnos y logra que la creación tipográfica sea algo menos técnica y algo más creativa.

En el vídeo puedes ver como funciona este software. Es una idea del francés Yannick Mathey, todo un apasionado de la tipografía. Podemos elegir parámetros de altura, kernel, interlineado, serif, peso, grosor... y, automáticamente, se aplicará a toda la serie de caracteres haciéndolos uniformes.

De momento, es un proyecto en desarrollo. Veremos su potencial real cuando esté acabado y disponible para la comunidad. ¡Pero tiene muy buena pinta!

Google Fonts

Google Fonts es la aplicación de Google para fuente de uso libre en nuestros proyectos webs. Se acabó tener que usar Verdana, Helvetica o la Times New Roman, ahora podemos emplear cualquiera de las que Google ha puesto a disposición. Y son muchas y de gran calidad.

Recientemente Google actualizó su Google Fonts a la versión 2, con importantes mejoras para dispositivos móviles y la inclusión de más fuentes estanderizadas. Para usarlas, deberías leerte la API de Google Fonts. Pero es tan fácil como incorporar a la cabecera de nuestra web la hoja de estilos donde se incluya la fuente que queramos utilizar. Y nuestros visitantes podrán ver esa misma fuente tal y como nosotros queríamos. Vale, también podríamos usar Css3 con la propiedad facefont, pero usando a Google de esta forma ahorramos ancho de banda y cumplimos la licencia de uso.

Visita Google Fonts periódicamente, porque no dejan de incorporar nuevas fuentes. Y además siempres puedes descargártelas y utilizarlas para otros fines que no sean la temática web. ¡Son open-source!

Depurar CSS con CSS Lint

En nuestros proyectos web el CSS es muy importante. Y no debe fallar. Pero cuando tenemos cientos de clases con propiedades heredadas y con tantos navegadores que entienden algunas propiedades de manera distinta (ahí tenemos el claro ejemplo de los bordes redondeados con css3), puede ser un caos.

Así que nunca nos viene mal un poco de ayuda a la hora de comprobar lo que hemos hecho y que todo marche bien. Esa es la función de CSS Lint, avisarnos de nuestros errores con advertencias o warnings al estilo compilador, indicándonos las cosas que deberemos cambiar.

Y aunque pueda herir tu orgullo y sentimientos al descubrir tus errores, también te ayuda a que tu código sea mejor. Complétamente recomendable y muy útil.

Plugins jQuery para checkbox y Radio-buttons

Versionar los botones de las casillas de verificación (checkbox) o los elementos de entrada como radio buttons utilizados en formularios de la web suelen ser de los más difíciles de hacer conforme al diseño de la web en general.

Estos elementos se mostrarán diferentes según el Sistema Operativo empleado por el usuario, pero podemos cambiar su aspecto de una forma universal usando el framework de JavaScript por excelencia: jQuery.

Os dejo un listado de 12 plugins jQuery para hacer de vuestros cuestionarios algo más relevantes en vuestros proyectos web. Originalmente de Line25 (en inglés).

1. Checkboxes y radiobuttons elaborados con CSS

Visita la web del plugin

El resto de plugins puedes verlos haciendo click sobre Leer Más:

Bóton +1: ¡novedad desde Google!

Ya lo conocíamos en el gremio, pero es ahora cuando puede utilizarse. Hablo del nuevo Botón +1 de Google y que es, además, personalizable. Algo parecido al botón de Me Gusta de Facebook, pero con otro tipo de aplicación: el buscador de Google en lugar de una red social. Y como acabo de introducirlo en la Comunidad del Abeto, os hablaré un poco de él y de cómo utilizarlo.

La idea principal del Botón +1 de Google es recomendar contenido o anuncios que te parezcan interesantes mientras navegas. Por ejemplo, cada una de las entradas de este blog lo incorporan y al pulsar sobre él, la valoración positiva que Google realiza del contenido mejora. Esto hará que granjas de enlaces y demás métodos sucios utilizados por algunos SEOs dejen de aparecer entre las primeras búsquedas del buscador. O al menos esa es la idea.

Pulsa sobre Leer Más si quieres saber más sobre él y cómo utilizarlo en tu web o blog.

Botón Me Gusta en otros idiomas

Debido a un reciente jugueteo en el plugin Like Box de Facebook que podéis encontrar en la columna de la derecha (el de los fans de la página de Facebook de La Comunidad del Abeto) y a la reciente traducción de mi web personal al catalán pues he tenido que buscarme bastante la vida en averiguar la codificación del idioma/lengua para las aplicaciones FB.

Como todo a fin y al cabo se basa en Javascript SDK que puede soportar diferentes locales. Hay veces que por definición nos aparecerá el locale yanki ya predefinido (locale=en_US) pero podemos cambiarlo por aquel que deseemos. Y si no aparece, siempre podemos añadirlo.

Te dejo con la lista completa, aunque yo la encontré en un post del foro para Desarrolladores de Facebook (oficial).

Pulsa en "leer más" para ver la lista completa:

Abrir con Photoshop desde Firefox

Open With Photoshop es una extensión para Mozilla Firefox bastante interesante: podemos abrir cualquier imagen directamente desde el navegador del zorro rojo sin tener que copiar la imagen y luego dentro de Adobe Photoshop pegarla en un documento nuevo.

Un add-on que sin duda mejorará nuestra productividad y nuestra salud mental.

Detectar el iPad con JavaScript

Muchos de los programadores web estamos acostumbrados a utilizar comentarios condicionales para detectar configuraciones de pantalla o navegadores y realizar cambios específicos para estas versiones. Pero también podemos usar javascript para la detección de dispositivos concretos sin importar su navegador para, por ejemplo, usar archivos CSS concretos y adaptarnos al usuario/navegante.

function isiPad(){
return (navigator.platform.indexOf("iPad") != -1);
}

Pues esa es la función en javascript para detectar el nuevo iPad de Apple. Así de sencillo nos han puesto en la pista de ello desde jQuery-How-To

La vida sin marcas: Unlogo

Unlogo Intro from Jeff Crouse on Vimeo.

Una de las filosofías de mi vida es la de no llevar marcas, odio llevar ropa u objetos de publicidad y encima tener que pagarlos (deberían regalar toda la ropa con grandes letreros y no cobrarla a precio de oro). Me gusta identificarme de una forma y no que me identifiquen con un logotipo o marca. Y así con todo lo que podemos ver en la vida diaria en la ciudad.

¿Te imaginas como sería la vida sin ver los logotipos que nos inundan a diario? Eso se preguntaron los chicos de Unlogo y han creado una aplicación que, subiendo tu propio video, un algoritmo detecta cuando aparece un logotipo en pantalla y lo tapa para no verlo más. Lo publicaba Blastto en su blog y lo he querido dejar por aquí.

Curiosea el código de las extensiones de Chrome antes de instalarlas

Una de las mejores maneras de aprender es fisgonear en el código ajeno: ¿quién no ha echado un vistazo al código de una web para ver como implementar tal o cual cosa? En materia de extensiones, en Chrome hay una que nos facilita la vida en este tema: Extension Gallery Inspector.Lo que hace es desempaquetar cualquier extensión de este navegador y mostrarnos sus datos internos. Para ello, debemos ir a la página de la extensión que deseamos ver en la galería de Chrome y pinchar en el icono con forma de rayo que aparece en la barra de direcciones, lo que nos desplegará un cuadro con la información de su contenido.Por un lado, podemos ver la información general (tamaño, permisos, características, etc.) y por otro, un listado de los archivos que contiene la extensión y el contenido del que seleccionemos para ver. Podemos seleccionar el código y copiarlo, aunque hay que hacerlo por medio de ctrl+c, pues no nos abre el menú contextual.

Una extensión muy útil para curiosear dentro del código de otra o para simplemente ver que es lo que hace y como lo hace exactamente antes de instalarla.

Vía | Genbeta; Download Squad
Enlace | Extension Gallery Inspector

Muro: el editor gráfico online de Deviantart

DeviantArt, el conocido sitio que aglutina una gran comunidad de artistas, especialmente los relacionados con las artes visuales, acaba de cumplir 10 años en línea. Y para conmemorarlo, acaba de sacar una aplicación online de dibujo realizada íntegramente en HTML5: Muro.

¿Qué usa nuestro cliente?

Estás trabajando de manera remota con un cliente y le envías un enlace para que vea el desarrollo de la web que le estás haciendo. Sabes que tiene el logo enorme, más grande de lo que necesita el cliente o una intro en flash …. y por alguna extraña razón este cliente no llega a ver la intro, o no llega a ver correctamente efectos jquery o, simplemente, el cliente tiene la “última versión super estable” de Internet Explorer 6 (toma castaña)… Podrían existir varias razones por las que no está viendo las cosas como debiera.

Sería interesante saber qué demonios tiene nuestro cliente instalado y cómo lo tiene configuado para saber si es error nuestro al programar o no. Pues para eso existe Support Details. Con él podremos averiguar toda la información de nuestro cliente que pueda estar causando estos problemas. Puede decirte lo que le sale por teléfono o guardarlo como PDF y enviártelo desde la misma web. Y vale, está en inglés, pero si lo quieres ver en la lengua de Cervantes, Google lo traduce por tí aquí.

Hazte la vida un poco más simple.