Plugins para Sublime – Gestiona los ToDo con PlainTasks

Sublime text es el editor de texto preferido en Babel Creativa. Podemos sacarle un poquito mas de partido. Existen un montón de plugins cuyo objetivo es hacernos la vida más fácil, colorear código, autocompletar… y también, por ejemplo, tener un listado de ToDo’s que podemos integrar con nuestro workflow para completar el checklist de SEO o accesibilidad.

Para instalarlo sólo tenemos que tener instalado previamente el Package Control, que se encarga de gestionar los plugins. Seguimos dos pasos muy sencillos:

  1. Abrimos la consola de sublime con View > Show console y pegamos el código que podemos encontrar aquí, según nuestra versión de sublime: https://packagecontrol.io/installation#st3
  2. Una vez instalado con pulsar ctrl + shift + P, seleccionamos “install package” y buscamos por el nombre el plugin que queramos instalar.

 

PlainTasks

Lo interesante de PlainTasks es que podemos organizar una lista de ToDo’s interactiva dentro de nuestro propio proyecto en sublime y poder gestionarla desde el mismo programa. Éste vídeo lo explica mejor:

Sublime Plugin: Plain tasks from Smashing Editorial on Vimeo.

Lo único que tenemos que hacer es crear un nuevo archivo con extensión .todo y ya tomará el formato de nuestra nueva lista. Para crear nuevos items es tan sencillo como ctrl + i, los títulos se interpretarán como cualquier línea que acabe en dos puntos (:) – para una guía completa y tutorial para crear y gestionar la lista podemos consultar preferences > package settings > Plaintasks > tutorial

 

Crear un proyecto con IONIC

¿Qué es ionic?

  • Framework open source basado en HTML5, CSS y JS para el desarrollo de aplicaciones híbridas.
  • Está construida con Sass y optimizado con AngularJS.
  • Trabaja bajo Apache Cordova.

¿Por qué usar ionic?

  •  Es sencillo, limpio y funcional.
  •  Está construido para ser rápido gracias a las aceleraciones de transiciones por hardware, la no utilización de jQuery y la mínima manipulación del DOM, además de su arquitectura sólida gracias a AngularJS.
  •  Está basado en los kit de desarrollo de software nativos más populares, por lo que si ya se ha trabajado con aplicaciones nativas, será fácil de entender.
  •  Cuenta con un potente CLI con el que se puede crear, probar, construir o compilar fácilmente las aplicaciones desarrolladas.

Instalar Ionic:

Para poder instalar Ionic necesitamos NPM (node package manager), gestor de paquetes de nodeJS que permite instalar librerías y enlazarlas o descargar programas de js.

INSTALACIÓN DE NODEJS:

  1.  Ir al sitio oficial : https://nodejs.org/en/
  2.  Descargar la versión estable: en este caso V.4.4.4 LTS
  3.  Seguir los pasos del instalador. En el caso de windows, se descarga el instalador, una archivo con extensión msi.

Guía de instalción en iOS:
https://changelog.com/install-node-js-with-homebrew-on-os-x/

Una vez instalado, ejecutaremos en la consola:

Windows:

$ npm i -g cordova ionic

iOs:

$ sudo npm install -g cordova

Con este comando instalaremos Ionic y Apache Cordova, componentes necesarios para comenzar.

Para empezar con la app, ionic ofrece tres esqueletos básicos sobre los que trabajar:

– Blank page: $ionic start myApp blank
– Menú inferior de navegación por tabs: $ionic start myApp tabs
– Página con sidebar menu: $ionic start myApp sidemenu

(myApp -> nombre que tendrá la aplicación. )

 

initialPages

Cuando vamos a ejecutar cualquier comando, tenemos que ir siempre a la carpeta directorio donde queremos que se realice la acción, en este caso nuestra App. Para ir a cualquier carpeta hay que ejecutar en la consola cd + ‘ruta’, por lo que en este caso, para crear la aplicación ejecutaremos dos comandos:

 cd 'ruta carpeta directorio'
 ionic start BBC tabs

Tras finalizar la instalación de nuestra app, podremos ejecutarla para ver el resultado desde la terminal ejecutando:

 cd 'directorio de mi App'

(hay que tener en cuenta que tras la instalación estaremos en la carpeta contenedora del proyecto, por lo tanto, tendremos que entrar dentro de la carpeta myApp, en este caso BBC)

 $ionic serve --lab

(se levantará el navegador con simulación iOS y android) / $ionic serve (levanta el navegador con la aplicación, sin simulación)

firstUp

Para comprobar que todo está correcto, en el directorio de la App, encontraremos una nueva estructura de carpetas:

estructura de carpetas

BEMIT – Agregando funcionalidad a BEM

La nomenclatura BEM (Block, Element, Modifier) ofrece una manera de estructurar nuestro HTML de modo sencillo y claro:
Block (bloque) (Bloque: user)
Element (elemento) (Elemento dentro de bloque: user_ _bio)
Modifier (modificador) (Modificador del elemento: user_ _bio- -hightlighted)

Sólo viendo el código podemos establecer relaciones entre los elementos y estructurar mejor nuestro CSS.

Intentando mejorar la ya de por si útil BEM, Harry Roberts propone incluir el concepto de jerarquías de ITCSS (Inverted Triangle CSS). Las jerarquías ITCSS se aplican de mayor a menor especificidad en el DOM.

Sumaría a BEM + ITCSS = BEMIT.

HTML sin nomenclatura BEM

HTML con nomenclatura BEM

HTML con nomenclatura BEMIT

No se añade ningún elemento nuevo. Sigue existiendo sólo Bloques, Elementos o Modificadores, pero se añaden capas de significado:

c- : para Componentes
Es algo concreto, una parte de UI específica. Cambios en ellos suponen una modificación sólo en ese contexto. Modificarlos es seguro.

.c-modal {}
  .c-modal__title {}
.c-modal--gallery {}

o- : para Objetos
Puede utilizarse en diferentes contextos. Modificarlos puede suponer cambios en muchos sitios, no relacionados.

.o-layout {}
  .o-layout__item {}
.o-layout--fixed {}

u- : para Utilidades (Utilities).
Es una clase dada con un rol específico. No está ligada a ningún componente UI específicamente y por tanto puede ser reutilizada. Usada por librerías y metodologías como SUIT.

.u-clearfix {}

is- / has- : para Estados
El elemento tiene un estilo concreto debido a un estado o condición. Proviene de SMACSS.

.is-close {}
.has-dropdown {}

js- : para JS
Los elementos del DOM tienen una actuación sobre ellos, creada por JavaScript.

.js-modal {}

t- : para Temas
La apariencia del elemento se debe o se ve afectado a que está incorporado dentro de un Tema (theme).

.t-dark{}

s-: para un nuevo contexto (Scope).
Es similar a la usada con t-, pero no restringida a la mera apariencia.

.s-cms-content {}

qa- : para el equipo QA o testing.
Es una clase que se da para recalcar que se está haciendo una acción sobre el HMTL o los elementos del DOM, sin ninguna relación con el CSS.

.qa-error-login {}

_: para Hacks.
Lo ideal es su uso solo de manera temporal.

._c-footer-mobile {}

Enlaces de interés:

BEMIT
http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/

NAMESPACES (con más ejemplos sobre cómo llamar a las clases)
http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

Flexbox: css3 layout

Flexbox es un nuevo layout de CSS3. Se ha creado para mejorar la alineación, dirección y orden de los elementos incluso cuando tienen un tamaño variable o indefinido. La principal característica del contenedor flex es su capacidad de modificar la anchura y altura de sus hijos para llenar el espacio disponible de la mejor manera posible en cada resolución de pantalla.

El algoritmo de flexbox está basado en direccionalidad a diferencia de block o inline, que están basados en horizontalidad y verticalidad.

Voy a utilizar de referencia el W3C y un artículo de scotch.io

Podemos revisar la compatibilidad con navegadores con CanIUse

 

Lo básico

Modelo flexbox. El layout flex está constituído por un contenedor padre llamado flex container y sus hijos inmediatos, llamados flex items. Podemos ver el resto de elementos en este gráfico:

CSS3-Flexbox-Model

 

Uso

Para preparar un contenedor para que ejerza como flex container tenemos que declarar el display: flex; Automáticamente todos sus hijos se convierten en flex items. Un flexbox item puede ser a su vez un flex container si así lo identificamos, por lo que se pueden anidar infinitamente.

Propiedades del contenedor

flex-direction

Esta propiedad especifica como los flex items se colocan en el flex container, definiendo el eje principal.
valores:

  • row (default)
  • row-reverse
  • column
  • column-reverse
flexbox-flex-direction-row

flex-direction: row;

flexbox-flex-direction-row-reverse

flex-direction: row-reverse;

flexbox-flex-direction-column

flex-direction: column;

flexbox-flex-direction-column-reverse

flex-direction: column-reverse;

flex-wrap

El wrap define si queremos que el contenido se mantenga en una sola linea o si fluya en varias.
valores:

  • wrap
  • nowrap (default)
  • wrap-reverse
flexbox-flex-wrap-nowrap

flex-wrap: nowrap;

flexbox-flex-wrap-wrap

flex-wrap: wrap;

flexbox-flex-wrap-wrap-reverse

flex-wrap: wrap-reverse;

flex-flow

Unifica flex-direction y flex-wrap en una sola propiedad. Toma los mismos valores de estas propiedades por separado. Primero se define el flex-direction y luego el flex-wrap. Se recomienda que se utilice este método mejor que declarar los otros dos por separado.

justify-content

Alinea los flex items a lo largo del eje principal del flex container. Ayuda a distribuir el espacio libre sobrante en los casos en los que los elementos de una linea son fijos o si son flexibles pero han alcanzado su limite máximo.

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around
flexbox-justify-content-flex-start

justify-content: flex-start;

flexbox-justify-content-flex-end

justify-content: flex-end;

flexbox-justify-content-center

justify-content: center;

flexbox-justify-content-space-around

justify-content: space-around;

flexbox-justify-content-space-between

justify-content: space-between;

flex-align

Funciona para alinear elementos de la misma manera en que lo hace justify-content, pero esta vez para el eje secundario.

  • stretch (default)
  • flex-start
  • flex-end
  • flex-container
  • baseline
flexbox-align-items-stretch

align-items: stretch;

flexbox-align-items-flex-start

align-items: flex-start;

flexbox-align-items-flex-end

align-items: flex-end;

flexbox-align-items-center

align-items: center;

flexbox-align-items-baseline

align-items: baseline;

align-content

Alinea las filas interiores del flex-container (no tendrá efecto si solo tenemos una) de manera parecida a como actúa justify-content sobre los flex items.

  • stretch (default)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
flexbox-align-content-stretch

align-content: stretch;

flexbox-align-content-space-between

align-content: space-between;

flexbox-align-content-space-around

align-content: space-around;

flexbox-align-content-flex-start

align-content: flex-start;

flexbox-align-content-flex-end

align-content: flex-end;

flexbox-align-content-center

align-content: center;

Propiedades de los items

Order

Define el orden en el que aparecen los flex items. Por ejemplo utilizaremos order: -1; cuando queramos asegurarnos que ese item aparece el primero. Se utilizan numerales, sin unidades. Además, cuando varios items comparten numeral, el orden de aparición será el del html.
Nota sobre accesibilidad. Hay que tener en cuenta que la reordenación solo va a tener efecto a nivel estético, y que por tanto otras maneras de leer nuestro código van a interpretar el orden original del html. Es importante tenerlo en cuenta para que no afecte a la legibilidad de la página y su accesibilidad.

flexbox-order

flex-grow

Define el factor de crecimiento. En concreto cuánto crecerá en relación con el resto de sus hermanos, cuando haya espacio disponible.

flexbox-flex-grow-1

Cuando los numerales coinciden creceran de igual manera.

flexbox-flex-grow-2

El segundo elemento crece tres veces mas con respecto al resto de elementos con el espacio positivo que se va generando en el contenedor.

flex-shrink

Lo opuesto a flex-grow. Cuánto se encojerá en relación con el resto de items cuando el espacio empiece a faltar. No se pueden usar números negativos.  Por defecto todos los elementos se encojeran de manera solidaria, pero si utilizamos el flex-shrink: 0; ese elemento mantendrá su tamaño original.

flexbox-flex-shrink

 

flex-basis

Utiliza los mismos valores que width y height (en función de si estamos en row o en column)  y especifica el tamaño inicial de los flex item, antes de que el espacio libre se distribuya. Al reducir a una variable el “ancho” en función de la orientación de nuestro display, no hace falta cambiarlo si decidimos sustituir columna por fila.

flexbox-flex-basis

 

flex

Sería la propiedad que aglutina flex-grow, flex-shrink y flex-basis, por ese orden.

Además de todas las combinaciones posibles con esos valores, tendríamos los equivalentes a auto y a none, además del valor default:

flex: 0 1 auto; (default)

flex: 1 1 auto; (auto)

flex: 0 0 auto; (none)

align-self

sobreescribe el efecto de align-items para el elemento al que estemos apuntando. Toma sus mismos valores. El “auto” como valor por defecto anula el align-self para que herede el del padre; Si no estuviera definido, su valor sería como el de stretch.

  • stretch
  • auto (default)
  • flex-start
  • flex-end
  • center
  • baseline

flexbox-align-self

 

Info interesante

Elementos colapsados

Con la orden visibility: collapse; se convierte en un flex item colapsado, el elemento sale del flujo, ya no existe. Pero deja un hueco de su presencia. Se recomienda su uso sobre todo cuando se colpase y abra de manera dinámica, para evitar bailes en el renderizado. Si lo que se pretende es ocultar el elemento completamente se recomienda el uso de display: none;

float, clear y vertical-align no tiene ningún efecto.

No resultan en ningún tipo de efecto sobre un elemento flex, no lo saca del flujo ni lo altera de ninguna manera.

 

…Y para ampliar información

Tutoriales

Codrops – La información es muy parecida a la de este artículo, pero además tenemos pequeños playgrounds donde trastear con cada propiedad.

La rana – Una manera divertida de familiarizarnos con las diferentes propiedades de flexbox.

Bugs de flexbox

Flexbugs, comunidad donde se recopilan y resuelven los bugs conocidos de flexbox.

Ejemplos

Solved by flexbox – Ideas de uso y aprovechamiento de flexbox.

 

– Muchas gracias a Sandra por recopilar gran parte de este material.

ITCSS – Primer paso hacia BEMIT

Simplificando mucho y a modo de corta introducción, un par de conceptos útiles para entender este post:
– BEM (Block, Element, Modifier): es una nomenclatura más estructurada del HTML y por tanto, del CSS.
– ITCSS (Inverted Triangle CSS): es una manera de organizar las CSS en función de su especificidad.
– BEMIT es la combinación de la nomenclatura BEM con la jerarquía de ITCSS.

BEM nos suena ¿cierto? No voy a profundizar en ello aquí. Solo diré que partimos de BEM para llegar a  BEMIT y que por el camino, nos conviene entender ITCSS. Pero ¿Qué es ITCSS?

ITCSS – Inverted Triangle CSS (Triángulo invertido CSS)

itcss

Ha sido desarrollado por Harry Roberts, siendo compatible con la nomenclatura BEM (y con casi cualquiera que estés usando a día de hoy en tus proyectos).

En su conferencia “Managing CSS Projects with ITCSS” explicó largo y tendido en que consiste, y os hago un breve resumen a continuación:

ITCSS es una manera de concebir el trabajo con CSS y HTML y organizarlo de una manera más óptima. No es una librería, no es una regla. Utiliza una jerarquía basada en el grado de especificidad del CSS, de menor concreción a mayor, creando un triángulo invertido. Arriba los elementos generales, en la última capa, los concretos, específicos.

ITCSS surge por la necesidad de:
– Desarrollar de una manera sana. Que nos permita escalar fácilmente el proyecto.
– Controlar y ‘domar’ la CSS y su cascada de herencias.
– Utilizar lo antiguo y lo nuevo, con un orden coherente.
– Reducir la redundancia.
– Acabar con las guerras de especificidad.

Ofrece:
– Una arquitectura escalable y limpia
– Es un meta framework: un framework para otros frameworks.
– Es muy simple.
– Es independiente de los preprocesadores. Lo puedes usar trabajando con lo que trabajes.

Si hiciésemos un estudio de Especificidad (‘Specificity Graph’) de la hoja de estilos de un proyecto cualquiera (especialmente si es de gran envergadura) nos encontraríamos algo parecido a la gráfica de la izquierda. Muchos picos asociados a alta concreción en nuestra CSS, seguido inmediatamente de un estilo mucho más general.

picos

Estos picos pueden darse por utilizar ID, !important, selectores anidados… Se salta continuamente de una regla específica, a una regla general, creando picos y valles de especificidad. Lo que provoca que las llamadas en nuestra CSS salten continuamente.

Para seguir una llamada sin saltos, lineal y más lógica, sería necesario agrupar nuestra CSS por especificidad.

llamadasCSS-d

Estos niveles de especificidad, ha llevado a la creación de las capas de ITCSS.

Se parte de 7 capas:

cssit-layers

1.- Settings – Se usa para las variables globales, elementos de configuración (Si usamos pre procesador, si no, podemos saltarnos esta capa)
2.- Tools – Mixins y Funciones (solo si usamos preprocesadores)
3.- Generic – Estilos CSS: reset, box-sizing, normalize.css…
4.- Base – Elementos HTML sin clases, selectores.
5.- Objects – Patrones de diseño, la estructura. Solo si usamos CSS dirigido a objetos (OOCSS)
6.- Components – Carruseles, calendarios… y sets de UI… Aquí metemos nuestros estilos concretos, para una lista concreta de un producto, por ejemplo.
7.- Trumps – Ayudas y lo que usamos para sobreescribir. La capa de los importants, la más específica de todas. Aquí habrá código muy concreto, para partes del DOM muy específicas.

No se trata de llamar de una manera específica a nuestras clases, para eso ya tenemos BEM. Es la manera en que vamos a llamar al archivo .css en función de a qué parte pertenece (y por tanto, que estilos hemos incluido en ella).

Todo el css que incluyamos en nuestro proyecto tiene que formar parte de alguna de estas capas. Nos obliga a pensar a qué pertenece cada línea de código antes de incluirla.

* Las media queries van incluidas en la css del elemento al que estamos dando estilos.

La nomenclatura para la css seguirá la pauta:

Nombre de la capa en la que nos hayamos + nombre de la css concreta:
· base .links.css
· components .carousel.css

El objetivo:
– Afectar al DOM de general a concreto.
– La especificidad aumenta de manera progresiva.
– Nunca se deshace, solo se añade.

No es un universo cerrado. En función de nuestra necesidades podemos añadir capas. Lo importante es seguir el orden de pirámide invertida:
– Escribir CSS en orden de especificidad
– Ser fieles al ‘Gráfico de especificidad’ evitando en la medida de lo posible, los picos.
– El orden en el que creamos las capas tiene que ser lógico. Por ejemplo, para una test AB podemos añadir la capa TEST entre Components y Trumps. O la capa THEME (también entre Components y Trumps).

Algunos documentos de interés:
PDF –  Conferencia – Managing CSS projects with ITCSS (todas las imágenes incluidas en este post, pertenecen a este PDF).

Imágenes responsive: Picturefill.

Buenos días,
Para estrenarme con las aportaciones al blog voy a hablaros del polyfill Picturefill. Un polyfill es un javascript que permite implementar una funcionalidad que no es soportada en navegadores antiguos. De esta manera podremos utilizar la etiqueta <picture>  con seguridad de cumplir con nuestros navegadores. Picturefill permite servir al usuario la imagen adecuada según una variedad de condiciones tales como tamaño de pantalla, tamaño de la ventana, resolución, etc. Ahorramos un montón de transmisión de datos dándole al usuario móvil una imagen de resolución y tamaño adecuado sin sacrificar a los usuarios de sobremesa o de retina, y todo usando el mismo código.

pandas

Es por eso que necesitaremos generar tantas imágenes como breakpoints tengamos.

En el momento de escribir esta entrada la última versión estable es la v 3.0.2 y podemos encontrarla en: “@RECURSOS\JQUERY\Picturefill o en la web del proyecto: http://scottjehl.github.io/picturefill/ para comprobar cuál es la versión mas actualizada.

 

Generación de imágenes

Si tomamos como referencia los breakpoints necesarios para bootstrap tenemos que generar imágenes para las horquillas de dimensiones:

0 > 480px > 768px  > 992px  > 1200px  > ∞

Es decir, tendremos la misma imagen en 5 dimensiones diferentes.

¿Qué tamaño tiene que tener cada imagen?

Para generar las imágenes utilizaremos de referencia la más grande por cada breakpoint; Por ejemplo, si tenemos una imagen que va al 100% tendríamos las siguientes dimensiones:

pandabp

Además, tendremos que generar las imágenes para dispositivos fullHd o retina; La densidad de píxeles de estas pantallas es el doble de las habituales, por lo que también tendremos que generar las imágenes al doble de tamaño a lo que corresponde en cada breakpoint para servir a estos dispositivos. Siguiendo el anterior ejemplo:

pandabpx2

En total habremos generado 10 imágenes, dos por cada horquilla de breakpoint.

Implementación

Ejemplo funcional: @RECURSOS\JQUERY\Picturefill\examples\demo-pandas.html

Lo primero que debemos hacer es incluir el js en el <head>

<head>
    <script src="picturefill.js"></script>
</head>

Con esto sería suficiente, sin embargo, añadiendo un método javascript nos aseguramos que los navegadores antiguos detecten la etiqueta picture antes por si a nuestro js no le ha dado tiempo a cargarse:


<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="picturefill.js"></script>
</head>

Ya tenemos la página lista para detectar nuestras etiquetas;

Explicando el MarkUp

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="image/img3000.jpg, image/img6000.jpg 2x" media="(min-width: 1200px)">
    <source srcset="image/img1200.jpg, image/img2400.jpg 2x" media="(min-width: 992px)">
    <source srcset="image/img992.jpg, image/img1984.jpg 2x" media="(min-width: 768px)">
    <source srcset="image/img768.jpg, image/img1536.jpg 2x" media="(min-width: 480px)">
  <!--[if IE 9]></video><![endif]--> 
  <img srcset="image/img480.jpg, image/img960.jpg 2x" alt="..."> 
</picture>

Tenemos un contenedor con la etiqueta <picture> que contiene una etiqueta <img> y una serie de etiquetas <source>. Además, para que funcione en IE9 necesitamos utilizar una etiqueta <video> para engañar al contenedor de los <picture>.

En <source> cargaremos cada una de las imágenes según su horquilla, que indicaremos con el media query. En el siguiente ejemplo, estamos cargando la imagen que aparece cuando tenemos como mínimo un ancho de 769px, es decir, que la imagen que carguemos será visible a partir de 769px y hasta 992px, que es el siguiente corte. Por lo que pondremos la imagen mas grande que admite esa horquilla, es decir la de 992px de ancho:

<source srcset="image/img992.jpg" media="(min-width: 769px)">

Si además queremos cargar una imagen para retina en ese breakpoint, añadiremos un nuevo source indicando que es para retina (2x) tal que así:

<source srcset="image/img992.jpg, ..image/img1984.jpg 2x" media="(min-width: 769px)">

En <img> cargaremos la imagen por defecto,  la más pequeña (si estamos montándolo usando el media query min-width) y añadiremos el alt=””.

<img srcset="image/img480.jpg" alt="Imagen de muestra">

Hay que tener en cuenta que el primer source que cumpla las condiciones dadas por el usuario será el que se descargue, por lo que primero pondremos las imágenes mas grandes cuando utilicemos el condicional min-width y las imágenes mas pequeñas primero cuando utilicemos  max-width.

Si queremos que una imagen no aparezca

Por diseño en uno de los breakpoints no queremos cargar ninguna imagen; Con un simple display:none podemos no verla, pero no evitar que se descargue. Así que podemos pedir una imagen de 1x1px y minimizamos la carga (aunque no evitamos la petición).

<source srcset="image/1x1.jpg" media="(min-width: 480px)">

En resumen; Es una herramienta muy sencilla para que el usuario reciba imágenes con su tamaño optimizado. Mejoramos velocidad de carga, uso de datos y visualización. 

 

Tutorial – Tipografía de iconos

En este tutorial me gustaría explicar un poco por encima cómo crear una tipografía con iconos para usar en nuestros proyectos web.

En este caso te enseñaré a añadir nuevos iconos a la tipografía Glyphicons que incluye Bootstrap, también nos vale para FontAwesome o para hacer una propia desde 0 :).

Qué necesitamos

– Un programa de diseño de tipografías, existen muchos (FontLab, Glyphs…), pero BirdFont es gratis, y aunque no es muy intuitivo, nos puede servir.

– Conversor de tipos como FontSquirrel, necesitaremos convertir el archivo resultante .ttf en formatos de fuente web: .eot, .woff y .svg.

– Los iconos que quieras meter en la tipografía en formato SVG: sin agrupar, sin trazados compuestos, todas las formas expandidas y fusionadas.

– Mucha paciencia! No desesperes, BirdFont tiene una interfaz un poco rara y poco intuitiva, así que intentaré simplificar y guiar al máximo los pasos.

Continue reading

Cinemagraph – Fotografiando el movimiento

Las imágenes son potentes recursos gráficos que nos permiten marcar la distinción en nuestros diseños. Pero a veces no es suficiente. Un vídeo también ayuda pero pueden llegar a pesar mucho y ralentizar la carga.

¿Qué podemos hacer entonces? Pues un híbrido. Un vídeo que se al mismo tiempo sea una foto. Esta técnica se llama: Cinemagraph.

¿En qué consiste Cinemagraph?

Usaremos un vídeo, del que sacaremos una imagen fija y a la que luego dotaremos a uno de sus elementos de movimiento.
Por ejemplo, una foto de una modelo a la que solo se le mueve el pelo.

¿Qué necesitamos para hacerlo?

Básicamente: un vídeo. Pero no sirve cualquiera. Dependerá de qué es lo que queramos que conserve el movimiento.

Bueno, os explico el proceso y así entenderéis mejor las limitaciones.

Utilizando Photoshop:

– Abrimos el vídeo que hemos elegido (Abrir > Archivo)

– Se nos abre como si fuera una imagen normal. Pero si nos fijamos en la capa, vemos que aparece un icono de película.

pantallazo1

– Vamos al menú Ventana > Animación, para abrir la línea de tiempo y poner trabajar con el vídeo.

– Nos ponemos sobre el vídeo hasta que encontremos un frame que nos guste para ser nuestra imagen fija.

– Duplicamos capa y la rasterizamos.

pantallazo3

– Ahora ya podemos manejar esta capa cómo una capa de imagen normal.

– Hacemos una máscara de capa de lo que queremos que se mueva. Por ejemplo, en nuestro vídeo queremos que se vea movimiento sólo en el ojo del perro.

pantallazo4

– Y ya sólo queda guardarlo como GIF, con la opción de Animación > INFINITO (quitar la opción: SOLO UNA VEZ). Y ya tenemos nuestro Cinemagraph creado.
perro-ojo

El maravilloso mundo del Email Responsive

img

Hola, tenemos que maquetar este email responsive… NOOOOOO!!!

Todos los que nos enfrentamos a este reto, sabemos la gran cantidad de variables que existen a la hora de maquetar un email responsive para que se visualice bien en la gran mayoría de los proveedores de correo; que si Outlook no soporta margins, que si las app de Gmail para iOS y Android  no soporta media-queries…

Os dejo un post donde nos explican cómo solucionar la mayoría de problemas y que nuestros emails se visualicen correctamente. http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919

Espero que os sea útil.

 

La ‘curiosidad’ del viernes – Relojes inteligentes y correos responsive

Después de unos viernes en los que os he dado margen para descansar de ‘curiosidades’ vuelvo a la carga.

ULTIMATE RESPONSIVE TEST

Este test es para los más curiosos. ¿Está tú página preparada para un ‘smart watch’? Te digo ya que no… pero, si quieres comprobarlo, he aquí un test.

reloj-smart

CERBERUS

Si te has vuelto loco preparando una newsletter, este recurso te va a encantar.

Cerberus ofrece algunas sólidas plantillas para hacer una newsletter que se vea bien en diferentes correos. Si no te sirve por completo, al menos te ayuda a empezar con buen pie.

cerberus

 

SCIENCE OF TYPOGRAPHY

Y la última curiosidad/recurso que pongo hoy es esta investigación tipográfica: ver cómo se comporta, su interlineado, su color.

typografia

 

SMASH ICONS

Está bien, está bien… no podía terminar así. Tenía que incluir estos iconos.

Me he encontrado con ellos navegando por la web y además de ser gratis (aún no os había puesto el ‘freebie’ del día) están muy bien diseñados.

smash-icons

 

Espero que os sean útiles.