Posts sobre "Diseño"

Un reloj web que cuenta los colores

reloj.mov

James E.Murphy es el creador de un reloj web que va convirtiendo los seis dígitos del tiempo en colores hexadecimales. Así, por ejemplo, las 7 de la mañana corresponderían al color #070000.

Una idea interesante, lo raro es que a nadie se le ocurriese antes la asociación, visto que el tiempo se puede expresar con 6 dígitos igual que los colores hexadecimales.

Si lo quieres tener como salvapantallas en el mac, Jonic Linley te lo pone fácil.

Usar la proporción áurea en CSS

I was excited to play with the idea, and so I began working with the golden ratio (1.618033988…). (after 4 years of architecture school, it still has a soft spot in my heart.) Getting the basic shape was easy enough, though I needed to do some tweaking with the positioning to keep the rectangles radiating from the center.

Duncan Graham explica como utilizar la Proporción Áurea con CSS. Él la utiliza para crear rectángulos y espirales. Pero qué si la empleamos para escalar las tipografías?

Pocket se convierte en Instapaper

De piedra me he quedado al ver el rediseño de Pocket en su versión web, anunciada ayer. Había visto un par de posts en mis feeds al respecto, sobre todo uno que titulaba Pocket for Web gets a new simplified layout and features that power users will love en The Next Web.

Así que ahora le he echado un vistazo a ver que era eso que a los powers users les iba a gustar tanto del rediseño. Y ya lo he visto: ahora Pocket es igual que Instapaper!

Instapaper

Instapaper

Nuevo diseño de Pocket

Nuevo diseño de Pocket

Comparen las dos capturas. Pocket usa ahora la misma tipografía que Instapaper, Próxima Nova. E incluso el color de la misma es muy parecido: #333 en Instapaper, #222 en Pocket.

Aparte de eso Pocket ha aumentado sus márgenes, estrechando la anchura del párrafo, algo que en Instapaper se puede personalizar a gusto del lector.

Cada vez me convenzo más de que he hecho bien volviendo a Instapaper.

Logowski

In 24 hours you will receive an e-mail with a preview of your logo. You can buy your logo by paying Logowski via PayPal. The price is up to you. You get the logo files in all official formats

A veces las ideas más sencillas son las mejores. Logowski crea tu logo en 24 horas. Pagas lo que quieras pagar.

Naked WordPress: un theme comentado para saber que hace cada cosa

Esta es una idea genial. Joshua Beckman ha creado un theme básico llamado Naked WordPress en el que cada parte del código está comentada, indicando que hace cada función.

La utilidad de esto depende del grado de conocimiento que tengas de las tripas de WordPress. Para desarrolladores que no tengan tiempo o no quieran pararse a estudiar el Codex de WordPress es una auténtica navaja suiza.

Pero para los usuarios normales también es muy útil, por ejemplo cuando quieres hacer cambios en tu theme pero tienes miedo de estropear algo. Sabiendo lo que hace cada cosa en el theme será más sencillo.

La única pega que tiene es que está en inglés, pero si lo dominas medianamente no vas a tener problema.

Además también sirve como base para crear tu propio theme, porque viene con características como diseño sensible (para dispositivos móviles), menús, sidebars y widgets personalizados, comentarios, categorías, tags, etc.

Naked WordPress (zip 38Kb) se puede descargar gratuitamente, aunque también puedes realizar un donativo.

Themes de WordPress, GPL y rastreo oculto

En medio de la polémica por las licencias de Themeforest aparece un servicio que monitoriza los blogs de los clientes sin previo aviso: El desarrollador se crea una cuenta en el servicio, da de alta sus themes y se le proporciona un código que debe incluir en el archivo functions.php de cada theme. Cuando un usuario se instala ese theme en su blog, inmediatamente el sistema lo localiza y avisa al desarrollador, que puede comprobar si el usuario tiene o no licencia para usarlo.

Continue reading

Recargar la página igual que en iOS con Hook: cómo instalarlo en tu blog

Una de las novedades más útiles que trajo consigo iOS fue la acción de arrastrar hacia abajo y soltar para actualizar una aplicación, un timeline o una página web. Si no recuerdo mal la primera vez que vi esa función fue en el ya desaparecido Tweetie, el primer cliente decente de Twitter para el iPhone, que al final el propio Twitter terminó comprando y destrozando.

Pues ese sencillo gesto de arrastrar hacia abajo y soltar para actualizar ya podemos tenerlo también en nuestra página web o blog con Hook. Se trata de un script desarrollado por Jordan Singer y Brandon Jacoby que podemos descargar gratuitamente (al pie tenéis el enlace).

Cómo instalar Hook en tu blog

Instalarlo es muy sencillo. Una vez descargado debemos colocarlo en una carpeta llamada hook dentro del theme de WordPress que estemos usando.

Luego editamos el archivo header.php de nuestro theme y justo antes de la etiqueta </head> colocamos este código:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="hook/hook.css" type="text/css" />
<script src="hook/hook.js" type="text/javascript"></script>

Después localizamos la etiqueta <body> y justo a continuación de la misma insertamos este código:

<div id="hook">
<div id="loader">
<div class="spinner"></div>
</div>
<span id="hook-text">Reloading...</span>
</div>

Y listo, tras guardar el archivo header.php ya sólo nos queda acceder a nuestro blog en el navegador y comprobar que funciona (es posible que debas refrescar la cache).

Descarga: Hook.js

Tendencias en diseño de blogs

En los últimos meses algo está pasando en la blogosfera internacional. Comenzó en muchos blogs personales norteamericanos y británicos, y ya se está extendiendo a las grandes redes de blogs. En realidad se trata de dos corrientes contrapuestas.

Gizmodo

Por un lado tenemos la corriente minimalista y purista, que prescinde de todo lo accesorio y vuelve a recuperar el papel principal de los textos. Los posts ahora ocupan prácticamente todo el espacio del diseño, reduciendo incluso la publicidad en favor de la experiencia lectora. Los formatos varían de un blog a otro, pero esencialmente se mantiene el clásico esquema blog, sin slides ni elementos que distraigan.

Algunos ejemplos (no necesariamente los primeros en sumarse a la tendencia ni los inventores) de esto serían The Brooks Review, Obvio de Manu Contreras, la versión española de Gizmodo, o más recientemente Blogpocket y Mangas Verdes. Yo mismo vengo experimentando con el modelo desde octubre del año pasado, aplicándolo en todos mis blogs.

Es cierto que existen muchos blogs que siempre han contado con diseños de este tipo. La diferencia es que ha llegado un momento en que muchos bloggers, cansados de la creciente complejidad de WordPress, hemos optado por regresar a lo simple. No se trata de una decisión basada solo en lo estético, sino también en la optimización de sitios con relativa carga de servidor y base de datos, que necesitan aligerar sus requisitos técnicos.

Está tendencia se puede observar también en la creciente proliferación de themes de este estilo, llamémoslo minimalista o purista. También en la aparición de herramientas como Twitter Bootstrap o Kirby, que abogan por un retorno a los orígenes, al háztelo tu mismo y la importancia de la tipografía como elemento principal de una web.

Mashable

Y como decía, también existe la tendencia contraria, que predica que la suma de elementos da mayor consistencia al resultado final. Los blogs que siguen esta tendencia suelen contar con diseños tipo magazine, algunos realmente originales y efectivos. Estos blogs suelen ser una amalgama de colores, tipografías y espacios de diferente forma y tamaño estructurados de manera cuasi arquitectónica.

En general suelen pertenecer a grandes redes de blogs comerciales, aquellas que pueden permitirse el coste de sobrecargar su servidor con toda clase de plugins, añadidos y funciones sociales.

Buenos ejemplos serían los actuales diseños de Mashable, The Verge, o el más reciente y excelente rediseño de Alt1040 (salvo por una tipografía poco legible para mi gusto en los posts).

La adscripción a una u otra tendencia depende del gusto de cada bloguer y de los recursos que tenga a su disposición, pero también de los principios que quiera transmitir en relación con el acto de comunicar, vender o crear opinión.