Cómo usar fuentes de Typekit en tu escritorio (Photoshop, Illustrator, Fireworks…)

Las webfonts molan. Trabajar con ellas en el escritorio, no tanto.

Servicios como Typekit o Fontdeck son interesantes tanto por el extenso catálogo de fuentes de calidad que ofrecen, como por la facilidad de servir el formato adecuado para cada navegador.

Pero hay una gran desventaja de estos servicios respecto a otros como Fontsquirrel, Fontspring, o Google Web Fonts. En estos últimos podemos descargar la versión OpenType a nuestro escritorio y usarla durante la fase de diseño en programas como Photoshop, Illustrator, Fireworks… Por el contrario, con Typekit o Fontdeck no dispondremos de una versión de escritorio, por lo que no podremos usarlas durante la fase de diseño, a no ser que dispongamos de una licencia específica para escritorio de esas fuentes.


Typekit en Photoshop/Illustrator/Fireworks? Tendrás que esperar.

Desde que Adobe compró Typekit muchos hemos estado esperando el momento de verlo integrado en las principales herramientas de diseño de Adobe (Photoshop, Illustrator, Fireworks…).

Había esperanzas de que esto ocurriera en la última versión de la suite de Adobe (CS6). Pero no fue así, lamentablemente sólo está disponible en Muse. Además, necesitarás acogerte al pago por suscripción vía Creative Cloud.


Un experimento

Siendo éste uno de los mayores inconvenientes de trabajar con servicios de webfonts bajo suscripción, y viendo que Adobe no lo integrará a corto plazo en el resto de sus aplicaciones, he decidido realizar un sencillo experimento para ver si sería posible usar las fuentes de Typekit en el escritorio.

Hay seguramente muchas posibilidades de realizar lo que voy a describir a continuación, pero para evitar tener que instalar scripts o aplicaciones sólo disponibles para una u otra plataforma, lo haré con un par de sencillas herramientas online y gratuitas.


DISCLAIMER

  • Esto no es más que un experimento.
  • Usar las fuentes de Typekit como voy a describir a continuación no está contemplado en la licencia de usuario final (EULA).
  • Si vas a usar dichas fuentes en programas de escritorio deberás comprar una licencia adecuada de las mismas.
  • No hagas el mal. No distribuyas ni embebas en tu sitio fuentes de las que no tienes licencia.
  • Typekit describió en su blog cómo protegen sus fuentes y cómo pueden ser evitadas estas medidas.

Vale, a lo que venías.

  1. Elige la fuente con la que quieres realizar el experimento. Por ejemplo, Cora Web.

  2. En el inspector de Webkit (Chrome, Safari…) o en Firebug, localizas la webfont descargada.

  3. Copia el código de dicha fuente disponible en la pestaña “Headers”. Copia sólo el contenido del campo “Request URL:”. También lo podrás localizar en la hoja de estilo CSS. Elimina la cabecera “data:font/opentype;base64," del texto copiado y quédate con el resto.

  4. Pega el texto en este decodificador base64, y selecciona las opciones “decode the data from a Base64 string (base64 decoding)" y "export to a binary file, filename: base64.bin”. Cuando lo tengas, dale al botón “Convert the source data”. Se descargará un archivo llamado base64.bin.

  5. Sube el archivo base64.bin a este conversor de WOFF a OTF y pulsa “Convert”. Descarga la fuente convertida a OTF, “base64.ttf" (en vez de .ttf, puede que el archivo generado tenga la extensión .otf o .ttc).

  6. Fin del experimento. Borra la fuente creada, no la uses.

Respondiendo al título de este post, no puedes usar de manera legal fuentes de Typekit en tu escritorio. La licencia de Adobe Typekit (EULA) no permite usar ni instalar fuentes creadas por este método. Además, debes saber que dicha fuente podría no estar completa, es decir podría no contener todos los caracteres (para más información lee el apartado “Segmenting and subsetting” de Serving and Protecting Fonts on the Web).

I know many people are looking for the magic bullet or software tool which will tell them what to do, but I’ve never found anything more powerful and trustworthy than my own gut.

Responsive Web Design - Diseño Sensible

El viernes hablé en The Mêlée sobre Responsive Web Design. El objetivo de la presentación no era explicar los detalles de cómo implementarlo (fluid grids, fluid media, media queries…), sino discutir sobre cuándo o por qué aplicarlo.

Quería evitar centrarme en los aspectos técnicos de bajo nivel (código, técnicas front-end y back-end…), y poner el foco en los aspectos de más alto nivel (principios, limitaciones, alternativas…).

Disclaimer

Me parecía el planteamiento más interesante ya que invitaría a reflexionar tanto a aquellos con más experiencia como a los que estuvieran todavía preguntándose qué es y qué les podría aportar Responsive Web Design, y esto encajaba perfectamente con la diversidad de perfiles de The Mêlée.

Para que éste planteamiento quedara claro, hice la siguiente advertencia:

No es una presentación técnica, no habrá ejemplos de código.

El objetivo es discutir qué problema trata de resolver “Responsive Design”, qué principios sigue y qué herramientas ofrece, preguntándonos si éstas se ajustarán a las necesidades de nuestros proyectos.

Contenidos

El desarrollo de la presentación fue el siguiente:

El problema

Cómo hemos pasado de pensar en un sólo dispositivo y una resolución, a un escenario mucho más complejo de múltiples dispositivos de diferentes resoluciones, densidades y capacidades.

La solución

¿Es posible encontrar una solución sencilla para este complejo escenario? ¿Es Responsive Design la respuesta? ¿O quizás sean aplicaciones webs/nativas dedicadas? ¿O una combinación de ambas? ¿Sí , no, de qué depende?

El contexto

El contexto lo es todo. No hay soluciones universales, todo dependerá del contexto, entendiendo como tal las limitaciones de tu proyecto (tiempo, alcance, presupuesto), los objetivos de tus usuarios, los objetivos de negocio, las limitaciones técnicas…

Responsive Web Design, una posible solución

Habrá determinados casos (proyectos) en los que aplicar lo que hoy conocemos como Responsive Web Design sea la elección más acertada.

Explico brevemente en qué tecnologías se fundamenta y hago referencia a diferentes artículos, libros y presentaciones en los que se explica detalladamente cómo implementarlo (código, herramientas…).

Pros y Cons

Destaqué algunos puntos a tener en cuenta a favor y en contra de Responsive Web Design.

Responsive Web Design VS sitios/aplicaciones móviles

¿Cuándo aplicar Responsive Web Design y cuándo optar por una versión específica para un dispositivo (mobile, tablet…)? ¿Es un mito el “Mobile Context”? Mobile first, Desktop first, Content first, o Target experience… ¿Qué debemos priorizar?

Objetivos del usuario VS Objetivos del negocio

Hablamos brevemente sobre las diferencias entre las necesidades/objetivos de los usuarios y de los negocios, y de cómo debemos encontrar el equilibrio entre ofrecer la mejor experiencia al usuario y cumplir con los objetivos del negocio.

Ejemplos

Con los ejemplos no buscaba enseñar un galería de sitios Responsive en acción, al estilo de http://mediaqueri.es/. Lo que pretendía más bien era responder a preguntas como:

  • ¿Responsive Web Design escala para sitios complejos?
  • ¿Se puede plantear a posteriori (retrofit) o debe estar contemplado desde el principio?
  • ¿En qué punto deja de tener sentido adaptar contenido (HTML/CSS/JS, images, video…) en favor de una versión dedicada?
  • ¿En cuáles de los siguientes ejemplos aplicarías Responsive Web Design y en cuáles optarías por un sitio/aplicación a medida?
  • ¿El planteamiento de Responsive Web Design encajaría con las necesidades de tus próximos proyectos?

Una vez más, la respuesta a todas estas preguntas era un decepcionante pero realista "depende", y ese “depende” quedaba determinado por el Contexto, citado en uno de los puntos anteriores.

Ejemplo: Bookstores

Con este ejercicio quería ilustrar todo lo comentado sobre el Contexto, poniendo ejemplos reales de un mismo sector (venta de libros) pero de un contexto muy diferente. Pasando así de principios abstractos a ejemplos concretos y aplicaciones reales.

Por un lado teníamos casos simples (A Book Apart, Five Simple Steps, Rosenfeld), de editoriales independientes, de nicho. En este primer caso veíamos como plantear estos sitios como Responsive sería totalmente viable y muy acertado.

Por otro lado teníamos casos complejos (Amazon, Barnes & Noble), de mayoristas, con un catálogo generalista. En estos casos, por lo contrario, veíamos cómo diferentes factores dificultaban enormemente que un planteamiento Responsive fuera viable.

Ejemplo: News

Al estilo del ejercicio anterior vimos diferentes casos complejos de grandes medios generalistas, y qué solución había adoptado cada uno de momento.

Por otro lado veíamos casos mucho más simples de blogs del sector web que habían seguido un rediseño Responsive.

Conclusión

Las ideas presentadas, los ejemplos mostrados, las preguntas lanzadas y su discusión creo que ayudaron a poner en perspectiva la problemática que trata de resolver Responsive Web Design, dando quizás una visión más amplia que ayudara a cada uno a tener una opinión algo más formada y crítica sobre qué camino seguir en cada proyecto.

El concepto del “Contexto” es algo que estuvo presente a lo largo de toda la presentación, Responsive Web Design se presentó como una solución más que debemos conocer, complementaria a otras que ya conocemos, y que debemos saber cuándo aplicar.

Dicho esto, reconocimos que muchos de nuestros proyectos sí podrían encajar perfectamente con Responsive Web Design.

Hasta la próxima presentación. ¡Y gracias por leer!

If you have a passion, there’s nothing that can stop you - that’s my advice. Follow your dreams, be creative, don’t try to be better than X or Y, just do what you believe in and do it well. If you aren’t willing to do it as best as you can, it’s better not to do it at all.

Desde que vi el videoclip de Timber de Coldcut y Hexstatic siempre quise probar a hacer algo parecido.

Unos 15 años después encuentro la oportunidad para intentarlo, gracias a la aplicación MovBeats para iOS.

Lo mejor quizás no sea el resultado, sino los protagonistas, ya que se trata de nuestro hijo y su primer juguete, un Lamaze Octivity Time que le regalaron ayer. Si desde pequeño le da por pegar golpecitos y hacer ruidos con objetos, con este vídeo le podré recordar dónde empezó todo, así como demostrarle que esto viene de familia.

Hola Jano. He encontrado tu blog y tus post sobre codeigniter a partir de la licencia don not be dick. Estoy volviendo al desarrollo tras unos años de desconexion y aunque para mi es nuevo utilizar un framework y la arquitectura mvc no me son del todo desconocidos y la filosofía la entiendo bien, aunque no encuentro mucha información en español sobre los templates. Podrías echarme un cable ? gracias — Asked by colegatron

Me temo que no podría ser de mucha ayuda si buscas información en español sobre CodeIgniter. Si quieres iniciarte te remitiría sin ninguna duda a su documentación, ya que es muy clara, directa y completa.

Para empezar, instálatelo y sigue el tutorial.

En la documentación encontrarás la respuesta a muchas de las preguntas que te irán surgiendo. Comentarte que me compré un par de libros sobre CodeIgniter y nunca los he necesitado consultar. Siempre he recurrido a la documentación online ya que ésta me resulta más clara, además de estar siempre está actualizada.

Otro gran recurso (en inglés) para aprender CodeIgniter es Nettuts+, allí podrás ver y leer tutoriales desde nivel principiante hasta avanzado.

Si necesitas ayuda en español, prueba en el foro no oficial en español. Si estás dispuesto a comunicarte en inglés (absolutamente recomendado) usa el foro oficial o Stack Overflow.

Respecto a los “templates” CodeIgniter no usa por defecto un sistema de plantillas, usa “Vistas”, las cuales puedes escribir con PHP nativo, no requieren ningún pseudo-lenguaje de plantilla (tipo Twig o Smarty). La sintaxis alternativa de PHP te ayudará a escribir tus vistas de una manera más simplificada.

Si estás interesado en algún sistema de plantillas, CodeIgniter incluye uno muy sencillo, el cual como decía no es requerido para el funcionamiento del framework.

Un saludo!

Undercovers - Ibiza 2011

Location: S.D. Jesús. Nuestra Señora de Jesús, Santa Eulária des Riu, Ibiza
Date: August 13, 2011.
Equipment: Sigma SD14, Sigma 70mm f2.8 EX DG Macro, Metz 35CT3.
Post processing: Sigma Photo Pro 3.3

Azpilkueta

Location: Azpilkueta
Equipment: Sigma SD14, Yashica Yashinon 50mm f1.7 DS-M (M42 mount, multi coated, radioactive, made by Tomioka) with B+W Circular Polarizer filter.
Post processing: Sigma Photo Pro 3.3

Políticos irresponsables: Uso y abuso de la ciencia y la tecnología.

Se suele decir que “Un gran poder conlleva una gran responsabilidad”. Éste fue el mensaje que el premio Nobel Harold Kroto dejó a los políticos sobre el uso irresponsable de la ciencia y la tecnología:

“Creo que otro aspecto mucho más peligroso para la humanidad [que los peligros intrínsecos de las nuevas tecnologías], es la estupidez de los políticos, que han creado 28.000 armas nucleares.

Es la misma estupidez, la misma, que hace que tengamos un ministerio de defensa que firma contratos para utilizar la ciencia y la tecnología para fabricar más armas peligrosas. Por ejemplo, las estupidez del napalm.

Muchísimas personas mueren por las decisiones de los políticos, que no resuelven los problemas sociales sentándose a debatirlos alrededor de una mesa, sino mandando a jóvenes a matarse unos a otros con armas cada vez más eficaces.

¡Hay que darle la espalda a eso!”

Harold Kroto - Premio Nobel Química 1996

Puedes ver la entrevista original en el capítulo “El mundo de abajo arriba” de Redes [25:50 - 26:32].

Una nueva política. Abierta y participativa.

Ésta es mi reflexión sobre el movimiento #15M. Una opinión independiente, libre de cualquier signo político y bandera. No voy a entrar a discutir propuestas (trabajo, vivienda, educación…), sino a valorar la relación la clase política con la ciudadanía.

Si hay futuro, quizás esté en Internet

Internet puede ser el medio de la nueva vida política, de la renovación de los partidos y de la participación ciudadana. ¿Por qué?.


Porque la propaganda (mítines, panfletos, spots…) y los grandes medios (prensa, televisión, radio…) han sido hasta ahora las únicas vías de “comunicación” de la clase política hacia la ciudadanía.

Estos medios han demostrado tener grandes deficiencias, como la intoxicación informativa, derivada del partidismo, y la unidireccionalidad, que imposibilita una comunicación real. En un medio unidireccional no habrá comunicación posible, tan sólo se tratará de propaganda. Para una comunicación real es necesaria una retroalimentación, los votantes deben poder transmitir de forma regular y fluida sus opiniones y su sentir a los cargos electos, y esto debe tener un efecto directo sobre la política diaria.

De la falta de comunicación surge la desconfianza, el desentendimiento, el desinterés, la indiferencia… y la consiguiente falta de identificación con los grupos políticos actuales.


Porque la “participación” ha sido relegada hasta ahora a firmar un cheque en blanco por cuatro años sobre grandes planes estratégicos que nadie puede predecir y que muy probablemente nunca se cumplirán.

Los programas electorales a cuatro años y sus correspondientes elecciones o “fiestas de la democracia” no pueden ser el único instrumento para canalizar la participación y escucha de los votantes, no pueden ser un cheque en blanco para los cargos electos, el papel de la ciudadanía no puede quedar como el de unos meros espectadores del bochornoso espectáculo de la vida política durante esos cuatro años. ¿Con qué otros mecanismos de participación y escucha contamos hoy en día?, ¿tan sólo nos quedan las manifestaciones?, no creo que sea una situación ideal, si no algo fácilmente mejorable.

Es necesaria una participación de la ciudadanía más frecuente y decisiva.


Porque afortunadamente hoy contamos con un medio mejor, bidireccional y participativo. Ese medio es Internet, el mismo en el que se gestó el #15M y otras revoluciones anteriores..

La comunicación bidireccional y las posibilidades de interacción y participación no son las únicas cualidades de Internet, otras ventajas de este medio son su carácter dinámico, ágil, independiente, democrático, representativo, descentralizado y su capacidad de generar ideas y corrientes que nacen desde la base (grass-roots, bottom-up).

Hace falta una apuesta real, seria y permanente por Internet como plataforma para una nueva política más democrática, más abierta, donde el ciudadano esté permanentemente informado de la actividad política, sea escuchado y su participación tenga un efecto directo en la vida política diaria, de manera constante, y no cada cuatro años.

La apuesta por Internet no puede quedarse en una maniobra cosmética y puntual, orquestada por una agencia o asesor de comunicación para una campaña electoral.

Un futuro abierto

El futuro debe ser abierto y transparente. Porque sólo la transparencia y la participación real pueden acabar con tanta frustración.

La transparencia y la cercanía deberían pasar a ser unos de los máximos valores de la vida política.


Una transparencia radical, conseguida a través de la máxima difusión de todos los datos de la actividad política e institucional de forma pública, abierta y fácilmente accesible.

Como iniciativa ejemplar, cabe mencionar el desafío Abredatos, organizado por la asociación Pro Bono Público.

Algunos proyectos de ejemplo:

http://lospresus.de/
http://parlio.org/
http://www.eldisparate.de/


Una cercanía real, mediante la participación y escucha de la ciudadanía a través de lnternet.

Quienes lideran el destino de la web, llevan años insistiendo en la importancia de las tecnologías abiertas, de los datos abiertos, del acceso abierto a la información y al conocimiento, para todos, sin barreras políticas, económicas o de cualquier otro tipo. La misión de la web, según esta definición, es hacer un mundo mejor, nada más lejos.

“The web is more a social creation than a technical one. I designed it for a social effect — to help people work together — and not as a technical toy. The ultimate goal of the Web is to support and improve our weblike existence in the world”.
Tim Berners-Lee


Hemos visto cómo distintas organizaciones y empresas abrazan esta nueva forma de entender el mundo, echando por tierra la gestión tradicional, basándose en un modelo más horizontal y aprovechando las posibilidades de los nuevos medios.

Ya basta de un liderazgo basado exclusivamente en un sistema vertical (top-down). Un verdadero líder debe dar apoyo y poner todos los medios necesarios para que sus bases sean lo más participativas, proactivas, creativas e innovadoras posible, obteniendo lo mejor de esta relación, y no acallándolas o ignorándolas. Un verdadero líder tiene que poder transmitir un mensaje con claridad y pasión, dentro y fuera de la organización, pero más importante aún, debe escuchar además de hablar.

Internet y la web lo están cambiando todo, algo que no me parece ninguna exageración, sino una realidad de sobra confirmada. Después de haber tambaleado y replanteado industrias, de haber revolucionado cómo nos comunicamos, cómo trabajamos y colaboramos, cómo creamos, cómo aprendemos y compartimos conocimiento, o cómo compramos y vendemos, en definitiva, después de haber revolucionado nuestra vida personal y profesional ¿por qué no iba a hacer lo mismo con la vida política?

Ya disponemos del medio, de la tecnología y de muchas de las herramientas necesarias. Ahora sólo falta la voluntad de aceptar el cambio, de evolucionar, de hacer apuestas valientes con el fin de poder mejorar.

Ésa es mi visión de como podría ser una nueva vida política. Una en la que me podría ver representado y de la cual me gustaría poder participar. Una democracia transparente, abierta y participativa. Una democracia enriquecida por los nuevos medios y posibilidades.

No esperes al futuro, créalo

“The best way to predict the future is to invent it.”
Alan Kay

No he participado en ninguna acampada, pero eso no me quita el derecho a reflexionar y expresar mi opinión, porque considero que este movimiento, ante todo, invita a reflexionar, sembrando la demanda de cambio en cada uno de nosotros, y eso sí que tiene un efecto a corto y largo plazo.

Hasta aquí mi reflexión sobre el movimiento #15M. Espero poder conocer también la tuya.