¿Qué es el lettering?

Nada mejor que explicarlo mediante un magnífico tutorial de iniciación:

Cómo realizar lettering mezclado con ilustración

Fuentes gratuitas

En Smashing Magazine le echan un segundo vistazo a las tipografías de código abierto y a las gratuitas más populares. Entre ellas encontramos algunas tan comunes como Source Sans Pro o Open Sans.

Taking a Second Look at Free Fonts

Un buen momento para instalar algunos tipos más.

Estimula tu creatividad

En Vecindad Gráfica apuntan a una infografía sobre cómo estimular la creatividad.

27 Simple Ideas to Stimulate Creativity

Hay una traducción al español muy interesante, de Barbara Luz, pero parece dificil localizar la fuente de origen.

Más fondos bonitos para el escritorio

La cantidad de fondos de escritorio espectaculares que se pueden encontrar en Internet no tiene fin. Aqui dejo un ejemplo, una magnífica recopilación bien seleccionada de fondos de paisajes para alegrar cualquier escritorio.

Fondos de escritorio de paisajes

Vía Noupe.

Dos conjuntos de iconos dos

Dos conjuntos de iconos pequeños y limpios muy útiles para cualquier proyecto web.

El primero incluye 91 iconos, de August Interactive y visto en Smashing Magazine.

Free Vector Web Icon Set

El segundo son 160 iconos de 365psd. Visto en WebResourceDepot.

160 Tiny Icons

En formato PSD y los primeros también en PNG.

Proyecto Arcón. Mis últimos proyectos

En el Proyecto Arcón llevo trabajando cerca de un año, pero es en este momento cuando se ha comenzado a publicitar el trabajo. Como en los anteriores, aquí se cumple de nuevo la premisa de la fortuna que supone el poder trabajar en un proyecto con un objetivo inmejorable junto a un grupo humano que te sorprende día a dia.

Web del Proyecto Arcón

El proyecto se describe en dos frases:

El Proyecto Arcón es un programa que permite la comunicación a través de una plataforma digital a las personas que por alguna circunstancia no pueden expresarse oralmente.
El Programa Arcón “habla por ti”. Con la ayuda de una plataforma digital se pulsa sobre el concepto que se quiere expresar y se transmite el mensaje de manera visual y auditiva.

Así que hemos desarrollado una pequeña aplicación para Nintendo DS que facilita la comunicación a personas con algún tipo de discapacidad comunicativa en el sentido más amplio del término:

• Personas con discapacidad intelectual.
• Personas con desconocimiento del idioma (inmigrantes).
• Personas que salen de viaje a países con otro idioma diferente al español.
• Personas que por alguna circunstancia están privadas de su voz (por ejemplo después de ser intervenidas).

De este modo, la persona en cuestión puede utilizar la consola para comunicarse con facilidad. El equipo tiene diseñado todo un protocolo para optimizar el proceso de su uso con niños con discapacidad.

En una segunda fase hemos desarrollado una versión basada en Flash que amplia mucho el tipo de dispositivos con los que se puede trabajar y ahora, en una tercera fase, estamos diseñando una tercera versión basada en Android, la joya de la corona.

Como decía, este es el proyecto que más esfuerzo de aprendizaje ha demandado. La programación de la versión de Nintendo se realiza en C, que lo tenía ya algo oxidado, haciendo uso de las librerías PA_Lib.

Además, para resolver todos los problemas que tenían difícil solución con ese entorno de desarrollo, recurrí a Phyton. A día de hoy todavía estoy sorprendido con su sencillez. Es casi increible ver que se pueden aprender los rudimentos básicos del lenguaje y desarrollar la solución que uno busca y depurarla en apenas dos tardes.

La versión multiplataforma y para la web la desarrollé con Flash, donde también aprendí algún que otro truquillo interesante.


Los problemas más complejos han estado relacionado con el tema de la codificación de caracteres, las tildes, las eñes y el UTF-8. Aún hoy arrastramos algún problema en ese sentido.

El entorno de desarrollo empleado ha sido Eclipse. Una delicia para programar, especialmente con la extensión de Python (PyDev).

El proyecto ha resultado tan multidisciplinar que también me ha permitido trabajar con otros programas con el sorprendente Inkscape. Nunca lo había utilizado para hacer algo medianamente serio y realmente resulta muy útil y versátil. En este caso lo hemos empleado para diseñar una serie de carteles para un congreso.

Por último, hemos creado también una pequeña web basada en Joomla 1.6 donde iremos contando los avances del proyecto Arcón.

Proyecto Arcón

También cuenta con una cuenta de Twitter que esperamos que se actualice con el paso del tiempo.

Generador de fondos web 2.0

Así que necesitamos un fondo moderno para una página web o un logo y no tenemos ganas de echar una hora delante de Gimp o de Photoshop. La solución es Stripe Generator.

Stripe Generator

Moviendo sus cuatro controles podremos crear un fondo a medida que se descarga en formato png listo para ser usado donde más nos convenga. Aquí hay uno que he generado en un rato.

En Technology Bytes cuentan también con una lista muy interesante con veinte herramientas de este tipo:

Web 2.0 Background Generators

En especial bgpatterns, nos permite hacer fondos diferentes con la misma sencillez.

Adobe Browserlab

Adobe Browserlab es una página web de Adobe que realiza una simulación de cómo se vería una página web en un montón de navegadores diferentes y sistemas operativos. De este modo puedes ver si tu página se muestra correctamente sin necesidad de tener instalados esos navegadores en tu ordenador, así como diferentes sistemas operativos.

Adobe BrowserLab

El único inconveniente es que tienes que acceder con un ID de Adobe, es decir, que hay que darse de alta previamente.

Desde Dreamweaver CS5 parece que hay una opción para lanzar el sitio web que se esté construyendo directamente.

Adobe CS5

Ya llegó el día del lanzamiento de Flash CS5 y de toda su familia, Adobe Creative Suite 5. Desde el siguiente sitio web se realizará el lanzamiento oficial a eso de las 17:00 hora española del 12 de abril.

Adobe Creative Suitte 5 Launch Site

También hay un blog con diferentes novedades al respecto.

http://cs5.org/

Y por último, en Adobe TV se pueden consultar las nuevas características de cada producto

What's New in CS5

Creación de botones con CSS

Tres métodos tres para crear botones para una aplicación web y que además sean bonitos y escalables:

Scalable CSS Buttons Using PNG and Background Colors

Utiliza JQuery y CSS para conseguir una apariencia muy agradable.

Building Beautiful Buttons with CSS Gradients

En este caso genera la decoración de los botones mediante gradientes. Integrarlo es un juego de niños.

How to Design a Sexy Button Using CSS

Un tercer método que crea el degradado mediante una imagen y el resto a base de CSS.

Qué tipo de gráfico representa mejor una serie de datos?

Tomar una decisión al representar unos datos de forma gráfica con Calc o Excel es a veces una decisión complicada. No siempre es evidente si debemos usar un gráfico de barras o de columnas, por no hablar de otros más extraños tipo dispersión, burbujas, etc.

Esta imagen nos hace unas recomendaciones rápidas que nos pueden ayudar a tomar una decisión.  Haz clic para ampliarla, o se puede descargar con un tamaño grande aquí.

Dependiendo de si estamos comparando series, mostrando relaciones, distribución a través de un eje o la composición de los datos nos propone una serie de tipos de gráficos que se comportan mejor según la cantidad de información, el número de variables,etc.

Visto en swissmiss.

Más ideas de los comentarios de ese artículo: http://www.thebackofthenapkin.com/tools.php

Material para tus recursos didácticos

Así que estás pensando en hacer un material para la pizarra digital interactiva o para un pequeño proyecto con Flash y no se te da muy bien la fotografía o no tienes ganas de andar por ahí haciendo fotos, ¿eh?

En wwwhatsnew han recopilado 12 bancos de imágenes gratuitos poco conocidos, más allá del tradicional Banco de imágenes del ITE.

12 excelentes bancos de imágenes gratuitos

El grupo es variado y muy completo. Encotraremos páginas que requieren registro y otras que no, algunas que sólo permiten su uso para fines no comerciales mientras que otras se basan en el uso de la licencia Creative Commons. En estos casos normalmente nos bastará con citar el nombre del autor en algún lugar del material.

Además estos sitios son un espacio ideal para poder compartir nuestro trabajo fotográfico, para que la próxima persona que realice una búsqueda encuentre más y más resultados.

5 técnicas para mejorar tus hojas de estilo CSS

Recopilación de 5 consejos para que las hojas de estilo de un proyecto sean más útiles.

5 rules to Write More Readables CSS Files

Son las siguientes:

1. Ordenar los elementos de la hoja alfabéticamente.
2. Anidar y tabular los elementos relacionados. Tipo #nav, #nav ul, #nav ul li, etc.
3. Añadir bloques de comentario para aclarar cada parte.
4. Tabular las propiedades de cada elemento, para añadir espacio y legibilidad.
5. Agrupar los elementos que tienen propiedades comunes, redefiniéndolos sólo para las propiedades distintas. El ejemplo del original es muy clarificador:

.icon-facebook {
  background:url(facebook.gif);
   padding-left:  26px;
   margin-right:  20px;
   width:        100px;
}
.icon-twitter {
  background:url(twitter.gif);
   padding-left:  26px;
   margin-right:  20px;
   width:        100px;
}
.icon-delicious {
  background:url(delicious.gif);
   padding-left:  26px;
   margin-right:  20px;
   width:        100px;
}

Lo cambiaríamos por

.icon-facebook,
.icon-twitter,
.icon-delicious {
   padding-left:  26px;
   margin-right:  20px;
   width:        100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}

Es más sencillo actualizarlo de ese modo.

Por último, Antonio Luppeti, el autor, recomienda también un par de utilidades para crear una versión comprimida de la hoja de estilos, una vez que hayamos terminado con ella. De ese modo mejoraremos la velocidad general del sitio web.

Foto tomada de Flick. Steve McOrmond.

Otras 300 plantillas más para presentaciones con Impress

Hace un tiempo publicaba una nota que recopilaba unas 100 plantillas para Impress.

Ahora que me toca revisar algunas presentaciones he pensado en revisitar aquella lista y actualizarla. Todo el listado anterior permanece activo, sin grandes incorporaciones ni cambios, así que se puede visitar para ver esas 100 primeras plantillas de las que hablábamos.

Además, hoy en día en Internet se pueden encontrar algunos otros sitios interesantes para localizar más plantillas para Impress:

• Modern Impress Templates: Es una extensión de Impress. Un paquete .oxt que se descarga y se incorpora a Impress automáticamente. Incluye unas 41 plantillas, a cada cual más curiosa. En esta página se puede ver una vista previa de todas ellas. Instalar ya.
  

• Pack profesional de plantillas: Otras 120 plantillas más, también para Writer y Calc. Estas son plantillas profesionales, probablemente todo lo que podamos necesitar, con un diseño muy cuidado. Como las anteriores, se instalan solas gracias al paquete .oxt en el que se encuentran. Instalar ya.

• Plantillas profesionales de Sun: 80 plantillas creadas por Sun hace algún tiempo para Impress. De nuevo se instalan automáticamente. Instalar ya.

• 30 Plantillas en SpreadUbuntu: Una recopilación en formato .tar.gz. Al descomprimir el archivo obtendremos 30 nuevas plantillas distribuidas bajo licencia Creative Commons por su autor. Todas están relacionadas en su estilo inicial con Ubuntu, así que son perfectas para hacer una presentación de Ubuntu, aunque por supuesto se puede modificar y adaptarlas a nuestras necesidades.

El único inconveniente que le veo a instalar demasiadas plantillas es que se relantiza la búsqueda a la hora de elegir una. Por lo demás obtendremos una mejora notable en nuestras presentaciones.

Cajas recortables

La página de HowPack contiene decenas de modelos de paquetes listos para ser impresos y recortados.

HowPack

Visto en meneame.

Si te interesa el tema del packaging, que hoy en día es todo un arte, puedes encontrar más referencias y plantillas en la web de Desfaziendo Entuertos.

Caracteres Unicode y entidades HTML

Un par de recursos útiles para insertar correctamente en una página web aquellos símbolos que no son los habituales, caracteres reservados, etc.

Entity Code

Ésta incluye un listado de los códigos correspondientes a los símblos especiales utilizados en el conjunto de caracteres ISO-8859-1, que se utiliza frecuentemente en muchos navegadores.

Unicode table

Viene a hacer lo mismo, pero en este caso con el conjunto de caracteres Unicode, el futuro y el presente de todo esto.

Todas las fuentes de tu ordenador

Flipping Typical es una simple página web que nos muestra las diferentes tipografías que tenemos instaladas en nuestro ordenador. Esto puede ser útil a la hora de seleccionar un tipo de letra para un proyecto, un escrito, etc. Entra y lo compruebas.

Flipping typical

Impresiona lo sencillo de la idea y lo útil que puede llegar a ser.

Si pulsas Ctrl-B o Ctrl-I se cambian los tipos a negrita y cursiva, respectivamente. Además, haciendo clic en cualquiera de ellas conseguimos que se amplie en la parte superior.

Visto en esta impresionante lista de recursos para diseño web publicada en Web Designer Depot.

Curso de After Effects

En ceslava.com están publicando un tutorial que explica los conceptos básicos de After Effects, que es una herramienta de producción de vídeo de Adobe, ideal para complementar a Adobe Premiere. Está basado en la versión CS3, pero es perfectament aplicable a la versión CS4.

Curso de Adobe After Effects por Daniel Paniagua

Ya llevan seis entregas en este momento.

Más iconos gratuitos

Cada vez se encuentran más librerías de iconos gratuitos para pequeños proyectos web, pero esta es especial por sus características.

Iconza

La diferencia de esta es que, aunque no tiene una cantidad inmensa de iconos, podemos elegir previamente el color y el tamaño que nos interese antes de descargarlos.

Visto en Criterion.

Diseño de plantilla fijo o dinámico

En Smashing Magazine publican un excepcional artículo que bucea entre la importancia de utilizar un diseño de plantilla fijo o fluido a la hora de crear una página web.

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

De su lectura se obtienen algunas conclusiones más o menos universales:

• El optar por un diseño fijo o fluido depende en gran medida del proyecto. Si la estética prevalece sobre el contenido un diseño fijo da más juego, mientras que un dinámico permite presentar más información.

• Al trabajar con un diseño fijo, la medida adecuada para el wrapper (la capa que definirá la anchura exacta de la página) a día de hoy, en junio de 2009, sería de 960 píxel, un diseño seguro para una resolución de 1024 de ancho. Hoy en día, sólo un 10% de personas navegaría con una resolución menor que esa.

• En un diseño fijo es mejor centrar siempre la información (la capa wrapper), con un estilo muy sencillo: .wrapper {margin: 0 auto;}

En los diseños fluidos, el espacio se ajusta mejor. La clave del buen uso es utilizar dos propiedades css max-width y min-width para establecer algunos mínimos y máximos en las capas y evitar así que se descoloque todo en determinadas situaciones. La pega es que no funciona con Internet Explorer, como tantas cosas.

El artículo profundiza aún más en estos modelos, además del diseño flexible.