Un tema frecuente en el diseño web es la problemática de usar fuentes fuera de las “estándar” como Arial, Helvetica, Times New Roman, etc, incluso cuando la recomendación de la W3C para disponer de ellas mediante CSS y la regla @font-face tiene ya bastante tiempo. Los diseñadores web optaron por técnicas alternativas como remplazar los textos de los títulos con imágenes o mediante el uso de flash y javascript (sIFR), aunque esto signifique perder accesibilidad para el usuario, además de no indexar ciertas partes del documento en los buscadores.
Afortunadamente los navegadores “modernos” han habilitado la opción de poder indicar mediante un enlace descrito en CSS la fuente que queremos usar (por fin se usa @font-face), así que estás técnicas alternativas que menciono en el primer párrafo quedaran en el olvido. Por consecuencia y en teoría, el diseñador tendrá mayor libertad “creativa”.
El problema que acarrea esta nueva técnica lo mencionan en el blog de Typekit:
Mientras está técnica es realmente sencilla, legalmente es más ambigua. Casi todas las fuentes están protegidas por los derechos de autor (incluso las que se ofrecen gratuitamente), solo algunas te permiten enlazarlas vía CSS o redistribuirla en la Web. Es comprensible, las fuentes representas horas incontables de una labor finamente detallada. Por lo tanto, los diseñadores están preocupados de perder el control de su trabajo.
Bueno, los mismos Typekit presentan la solución que ha traído bastante discusión porque muchos piensan que se aplica un tipo de DRM.
Typekit trabajara con las casas diseñadoras de fuentes para desarrollar licencias que funcionen únicamente en el uso de las fuentes en páginas Web. Tendrás acceso a una librería (de Typekit) de fuentes de alta calidad. Simplemente tendrás que agregar una pequeña linea de código en tu documento (HTML) indicando la fuente que quieras usar.
Ellos mismos indican que la tecnología que están usando esta lejos de ser intrusiva o que se acerque al tan temido DRM. En este momento sen encuentran en fase de pruebas, pero ya ha dado mucho de que hablar. Habrá que esperar qué tan accesibles sean los precios, qué tan extensa sea su librería y que tan bien funcione.
Les recomiendo algunos artículos con el tema o relacionados:
Supongo que más de uno quisiera saber como usar HTML Y CSS, eso que se usa para diseñar páginas web. Realmente no es difícil, digo, en sí, no son lenguajes de programación, simplemente uno lo usas (HTML) para informar al navegador que es cierta cosa y otro (CSS) para decir como se tiene que ver esa cosa, como por ejemplo, un párrafo (en términos muy prácticos).
Tan no complicado es, en los fundamentos básicos, que lo puedes aprender desde tu computadora si tienes la voluntad y totalmente en español por si fuera poco. Sin embargo, hay muchos tutoriales en la red desactualizados que recomiendan usar prácticas no muy habituales estos días, como usar elementos HTML para cosas que no han sido concebidos o peor aún, usar algunos elementos que ya han sido desaprobados por la misma W3C, eso y entre otras cosas que descubriras. Y si por cualquiera de los casos tuvieras la necesidad de usar uno de esas “malas prácticas” por lo menos entender porqué lo estamos haciendo. Aunque también es cierto que no hay que tomarse todo tan estricto en esto de los estándares web como bien menciona Jeff Croft.
Bueno, para aprender desde el principio:
- Saber de que trata HTML y CSS, que mejor que HTML con clase primero y en seguida el manual CSS de Carlos Benavidez.
- Después nos leemos el Manual de Belén Albeza para repasar y actualizar lo aprendido, además de permitir ver como estas dos especificaciones o recomendaciones trabajan juntas. Igualmente nos ayudara a introducirnos al XHTML que digamos funciona de la misma manera que el HTML y comparte el mismo objetivo: “estructurar contenido”.
- Si tenemos dudas en el camino siempre podemos consultar las especificaciones de la misma W3C traducidas por SIDAR HTML 4.01 y CSS 2. O bien consultar pequeñas guías de referencias, en el caso de estar con CSS bajar la chuleta de Ateneu Popular.
- Aprendido lo básico y por si quieres profundizar en el tema están los libros gratuitos para imprimir o leer en linea de librosweb.es sobre XHTML y CSS. Si lo tuyo son los blogs puedes consultar a Diseñorama o CSSLab para técnicas mas avanzadas.
- También es siempre bueno preguntar y para eso están los Foros del Web (yo tenía el nick de Opeth pero hace unos ayeres que no entro).
Todos esos enlaces son sólo algunas recomendaciones que tenía guardados por ahí, si buscas en San Google seguramente encontraras mucha más información útil ya publicada por gente totalmente desinteresada.
(Buenos) Diseños de blogs
Abril 4, 2008
Últimamente he visto diseños que me han llamado mucho la atención en algunos blogs, que pueden servir de inspiración y de cierto análisis.
La mayoría son sitios de diseñadores, por eso en ciertos aspectos creo que tratan de experimentar, digo, no veo como lo aplicarían a sitios más comerciales como los blogs de una red de blogs, que cabe decir la mayoría de estás que encontramos en español no les vendría mal una mano de gato, en Xataca de Weblogs SL han hecho el intento con Veerle Pieters. A lo que me refiero es que por lo menos hagan el intento que su publicidad no sea tan molesta o “intrusiva”, maldito AdSense que feo eres.
Hey, no digo que por colocar publicad inmediatamente te convierte en algo desagradable para la vista, de hecho varios de estos blogs cuentan con publicidad, el objetivo es lograr que no desentonen con la “estética” de la bitácora.
A continuación una pequeña lista de blogs que me gusta su diseño, ni es una lista de los mejores (que podría ser), ni cualquier otra que se asemeje.
A Brief Message
Cuando llegas a A Brief Message entras directamente al post, puedes comentar inmediatamente sin tener que presionar el enlace del título. Un diseño minimalista que irradia elegancia a placer. Detrás de el está nada más y nada menos que Khoi Vinh de Subtraction, por eso el notorio uso de la retícula. También es interesante la dinámica del sitio, pequeñas críticas y opiniones de diseño en menos de 200 palabras.
Naz Harnid
De los diseñadores jóvenes más talentosos que he conocido recientemente. Alucinante el cuidado en los pequeños detalles y la paleta de colores, que en conjunto hace bastante cómoda su lectura.
erraticwisdom
Me gusta este diseño porque todo esta centrado en el contenido, si quieres saber algo más tienes a lado la barra lateral para desplegar. En especial me gustan esos títulos de gran tamaño y el patrón del fondo.
SuperflousBanter
Nunca pensé que el naranja fuera tan placentero verlo en pantalla. El único problema que veo es forzosamente presionar en “continue reading” en cada artículo.
Jon Tan
Este blog lo conocí por Rude. Casi ningún color, sólo un tipo de fuente (serif), todo los textos jerarquizados por tamaños (algo que se olvida hacer adecuadamente) y tonalidades de grises. Simplemente genial y por si fuera poco su contenido es magnifico.
Carsonified
Prácticamente fui viendo como construían el diseño del sito, además de ser uno de los tantos blogs que sigo desde mi lector puedo decir que pertenece a una de las compañías que más admiro.
31Three
El blog de Jesse Bennett-Chamberlain es sin ninguna duda uno de mis favoritos, favoritos… esos paleta de colores me mata.
Simplebits
Lo que me sorprende de este diseño es que enseña todo lo que hace la compañía en una muy pequeña área, para después continuar de lleno a lo que es el blog. Esta es digamos una segunda versión de su diseño anterior, la cual ya era estupenda.
Design View
El blog de Andy Rutledge es pura calidad en cuanto a contenido y diseño se refiere. Una de las cosas a destacar en este re-diseño es como se muestra los post más nuevos de los viejos, cambiando estos de tamaño de texto y color. Recientemente en Typesites analizaron tipográficamente el diseño.
Más excelentes diseños de blogs:
¿Debería ser Fireworks el Photoshop definitivo para Web? ¿el “maquetador” de interfaces?
Marzo 27, 2008
Recientemente leí un par de artículos bastante interesantes sobre el uso y no uso de Fireworks. El primero Mucking Up the Fireworks del reconocido Jason Santa Maria (el diseñador de la página de A List Apart, Bearskinrug, etc.), en el comenta el deseo de que Fireworks evolucione y brinde las opciones necesarias que requiere el Diseño Web actualmente, sobre todo ahora que Adobe quiere hacer a Photoshop en un programa “todo en uno” (con lo que respecta a la edición de imágenes).
Con el tiempo y la adquisición de Macromedia Fireworks fue un poco abandonado, de hecho creía que iba a tomar fuerza e Image Ready desaparecería inmediatamente (ya lo hizo en la suite CS3), porque no sé cual era la diferencia de editar una imagen en Photoshop presionando Ctrl+Alt+Shift+S (Cmd+Opt+Shift+s) que abrirla en el decepcionante Image Ready, en realidad Photoshop es bastante ineficiente en lo que a optimizar imágenes para web se refiere, lo que hace con “los PNG” es un buen ejemplo.
Pero Fireworks podría retomar fuerza, según Jason, sí (entre las destacadas):
- Añadieran un motor de interpretación (rendering) que entienda CSS y medidas relativas (em, %)
- Funciones para manejar las imágenes y textos como elementos envolventes y que respeten el flujo del documento más que islas de contenido que necesitan ser coladas individualmente
- Librerías de elementos de las interfaces de los distintos navegadores para usar en composiciones
Por otro lado y por el contrario, el otro artículo que leí “Enterprise Fire-Flow” de Nathan Smith, rescata algunas bondades de Fireworks. Él cita y menciona:
- “Si Photoshop es la herramienta para fotógrafos expertos, Fireworks es el instrumento para Profesionales Web”
- Un beneficio es que el formato “nativo” de Fireworks es PNG y permite trabajarlo en capas, lo que reduce el tamaño del documento comparándolo con el formato PSD de Photoshop
- Siendo PNG un archivo que manejan más programas lo hace más “portable”, ahorrando tiempo en conversión de formatos y permitiéndote hacer cambios más rápidos a los bocetos de interfaces
- Puedes crear páginas múltiples en un sólo documento, dando la posibilidad de crear todo el aspecto visual de un sitio
- Cuando divides/cortas tu imagen para pasarla a HTML y CSS, nadie gana a Fireworks en términos de compresión de imágenes
- Photoshop no puede leer archivos PNG con capas. Fireworks puede (parcialmente) leer y editar documentos PSD.
Con todas estas ideas y opiniones sobre Fireworks, todavía pienso que sigue rezagado como el programa ideal para el diseño web (en lo que a maquetar respecta). A mi me encartaría que Fireworks fuera el InDesign para Web, el que se encargue de poner las cosas en orden de lo que haces en Photoshop o en Illustrator, que te permita crear retículas para cada documento, que maneje los estilo de caracteres y textos como lo hace grandiosamente InDesign pero con las especificaciones CSS, que te permita crear mapas de navegación, etc.
Nota: En “maquetar” me refiero a diseñar visualmente la interfaz, el “código” final CSS y HTML sería en un programa especializado como Dreamweaver, Coda, NotePad++, Textmate, etc.
Em (cuadratín en español) suele tener diferentes interpretaciones según en el contexto que se utilice, por eso muchos los malentendidos cuando se habla de esta medida. En Type 101 (por referencia de i love typography) hicieron una estupenda e ilustrativa entrada de nombre “The Em“, explicando sus diferentes usos. En el que concluyen:
- Para el tipógrafo:
Em es un tipo de espacio que puedes usar para “sangrar” la primera línea de un párrafo.
– Para el diseñador de tipos:
Em es el espacio de diseño donde un carácter es dibujado.
- Para el ingeniero de software:
Em es una unidad sin dimensión para representar la forma de un carácter y el espacio de información.
- Para CSS:
Bueno, esto no lo explicaron. pero se me hace interesante lo que dice este documento de W3C “The amazing em unit and other best practices“.
“En CSS, la unidad Em es una unidad general para medir longitudes. Por ejemplo, los margenes y rellenos (padding) alrededor de los elementos. Tu puedes usar ambos horizontal y verticalmente, y esto es lo que desorienta a los tipógrafos tradicionales, ya que ellos han usado “Em” exclusivamente para medidas horizontales”.
Fuentes tipográficas para escribir código
Marzo 8, 2008
Cuando abrí notepad++ me cansé de ver Courier como fuente predeterminada de texto, así que fui en búsqueda de alguna alternativa, hasta que finalmente llegue al estupendo y perfecto artículo de “The Typography of Code” por the hamstu vía i love typography.
Empecemos con un poco de historia. Courier fue creada para IBM por Howard G. Kettler en 1955, una tipografía diseñada para usarse en máquinas de escribir de aquella época. Pertenece a la familia monoespaciada (monospace o no proporcional), tiempo después fue rediseñada por Adrian Frutiger para misma la IBM, posteriormente se incluiría en Windows 3.1. Lo que distingue este tipo de fuentes de las demás, son que todos sus caracteres tienen un mismo ancho, esto significa que la letra “i” ocupa el mismo espacio que la “m”.
Las fuentes no proporcionales, como la Courier, son adecuadas para:
“Mostrar muchos datos ya que ofrecen lecturas mas claras en listas de datos, tablas, calendarios, etc… También son más adecuadas para la entrada de datos en las cajas de texto de formularios porque es mas fácil ver los errores por la mayor separación entre letras.” ainda.info
“Como fuente monoespaciada ha adquirido un nuevo uso en el mundo electrónico en situaciones donde las columnas de caracteres deben estar consistentemente alineadas”
Wikipedia
Estas pueden ser algunas de las razones del porque la popularidad de las fuente monoespaciada entre los programadores. Además, obviamente, ser más legible para el tipo de texto que se usan en los códigos de programación y que permiten “maquetar” más fácilmente el texto por tabular.
Comentaba en un principio que buscaba un remplazo de Courier, la razón principal era para ganar legibilidad en mis archivos CSS y HTML. También por que las mayorías de mis notas las hago en Notepad++, ya que hace un tiempo no uso Word (no por radical, sencillamente empece, me acostumbre y me gusto), y lejos de argumentos “técnicos”, me harté de esta fuente.
En el artículo The Typography of Code para mi fortuna, hacen repaso de algunas de mejores fuentes monospace, de las que menciona son dos con las que me quedo y lo mejor de todo, las dos gratuitas, que inconscientemente ya tenía instaladas.
Courier New
Una imagen de la fuente que quiero remplazar, en realidad no es mala, de hecho viene como fuente predeterminada de varios programas y hasta el 2004 era la tipografía estándar del Departamento de Estado de Estados Unidos (la remplazaron con la Times New Roman, mmm…).
Consolas
Que buena fuente diseñada por diseñada Lucas de Groot, sobre todo en tamaño reducido. La consigues simplemente al descargar e instalar el visor PowerPoint 2007, que en un principio lo use para otro fin. Por defecto viene en Windows Vista y para instalarlo en Linux Alex Sancho tiene la respuesta.
Bitstream Vera Sans Mono
Una tipografía diseñada por Jim Lyles con licencia libre, por eso DejaVu, una variante de ella, viene instalada por default en GNU/Linux. Todas las variantes de Bitstream Vera las puedes descargar gratuitamente. La peculiaridad de la fuente es ser un poco más alta en su línea vertical que las demás, por eso la impresión de estar, valga la redundancia, alta.
A modo de conclusión, fuera Courier bienvenida Consolas. Sí, no hay más.
Más información y enlaces de interés:
- The Typography of Code | the hamstu. Estupendo artículo, con mucha información útil, sobre todo si realmente eres programador
. - Finding the Perfect Programming Font | Command-Tab. Otra comparación de fuentes inspirada en el primer enlace, pero aquí podemos encontrar fuentes usadas en las Mac, como Panic Sans del programa Coda.
- Fuentes gratis, cortesía de Microsoft | Yukei. Fuentes que puedes descargar, además de la ya comentada Consolas.
