Inspira, expira, inspiración en CSS expiración en HTML, te presentamos un punto de referencia indispensable así que a bookmarquearlo de inmediato.

Esta reseña se trata de la galería de CSS de los denominados premios CSS Los CSS Awards, así que tras los cacareados Oscars, ahora toca el tema de los CSS, and the winner is:

Enlace: http://www.thecssawards.com/gallery.php

Este tema para Wordpress nos ha gustado mucho, muy limpio y memorable.

Lo mejor de ello es que sus creadores, la agencia N-desing Studio nos ha dejado el boceto con las medidas y mejor aún el fichero PSD para que puedas modificar la plantilla con Photoshop o Gimp para crear tu propia variación sobre este tema, a nosotros ya se nos han ocurrido un montón, el más evidente desaturar ese amarillo estilo post-it y pasarlo a blanco marcando el rayado de imprenta que contiene con un azul más intenso, dejar una goma de borrar marca Milan algo sucia de usarla colocada en alguno de los márgenes, algún garabato por el papel y vaya… inspirarnos en los cuardenos que nos acompañaron durante EGB.

La distribución y maquetación de este tema de Wordpress para nosotros es perfecta, tamaño correcto, textos a la izquierda para facilitar la lectura y no tener que saltar el bloque de menú o sidebar con cada línea que el visitante lea, diferenciación visual entre fecha, título, breve del artículo. botones generales de navegación destacados en la parte superior y con un diseño muy Apple, todo a excepción del header que no aporta belleza alguna y diluye algo el buen efecto que puede causar este tema, un header que no mostramos en la captura y el fondo iMac translúcido

Aqui os dejamos el boceto o wireframe del tema para Wordpress comentado:

El fichero PSD para que puedas editar: Fichero Photochop tema Wordpress (1)

El fichero con el tema para Wordpress listo para uploadear: Tema Notepad para Wordpress (1)

Enlace: http://www.ndesign-studio.com/wp-themes/notepad

Bueno, aunque el título reza que lo que hoy te traemos es exclusivo para iPhone, más bien es para cualquier tipo de dispositivo que disponga digamos de una pantalla especialmente pequeña o con unas proporciones diferentes a las habituales, incluídos los Androids, los aburridos Windows Mobile 7 y las gorditas Blackberries.

Se trata de un framework (un framework es una estructura de trabajo predefinida y un pequeño conjunto de utilidades básicas para el desarrollo enfocado) desarrollado bajo html 5 y compatible con casi todos los navegadores modernos y con el que gracias a él te podrás olvidar de las diferentes resoluciones para los diferentes dispositivos pues con este framework la web detecta la resolución de pantalla y autoadapta el contenido para que se visualice de forma óptima en el dispositivo lo que representa una clara mejora en la usabilidad de cualquier página web, blog  o aplicación web.

Este framework está compuesto por un par de ficheros CSS, un javascript y una forma de maquetar el encolumnado mediante CSS. Aún no hemos podido ponerlo en práctica por nosotros mismos pero en la web que enlazamos, la de sus creadores, puedes jugar a resizar (redimensionar) la ventana del navegador y ver como el contenido se adapta de forma perfecta a cualquier tamaño y proporción.

Aquí tenéis, listo para bajar un archivo zipeado con los ficheros del framework y un ejemplo: Framework web para iPhone (1)

Enlace: http://lessframework.com/

Mirad que iconos de forma de pago os hemos conseguido! Son auténticos iconazos, realizados con mucho arte y que podrás disfrutar en resoluciones de 16 px, 24 px, 32 px, 64 px, 128 px, 256 px y 512 pixelazos.

Iconos para aceptar pagos de Mastercard, Visa, Paypal, Google Checkout, pago por cheque y transferencia, lo mejor de todo además de su trabajado diseño es que son totalmente libres es decir, los puedes utilizar en tu web o en cualquier otro lugar.

De la mano de IconShock aquí tienes el set completo zipeado listo para descargar: Iconos de formas de pago (4)

En alguna ocasión te encontrás el siguiente escenario donde en determinados proyectos existe una clara molestia visual producida por los constantes salto en la maquetación del contenido que se desplaza unos 20 píxeles hacia tu izquierda al navegar entre una página y otra.

Este salto es normalmente producido por la existencia o no existencia de la barra de desplazamiento vertical o barra de scroll, una barra que quieras o no ocupa su espacio en el universo y como dice un tal arquímedes con su teoría sobre los líquidos esta barra desplaza el contenido tantos píxeles como volumen tiene la misma.

Aunque si bien este es un comportamiento natural, predecible y argumentable hacia tus clientes, el efecto que produce ese desplazamiento de contenidos es del todo indeseado y más aún cuando suele suceder desde la propia página de inicio o home donde muchos maniáticos de la comunicación, entre los que me incluyo, quieren poco texto poco espacio para evitar un exceso de información e invitar al cliente a profundizar, en páginas con más contenido y por tanto con la dichosita barra de scroll.

Pues bien, hemos acudido al dios salvador, que no es otro que el CSS y tachán la solución en tres líneas, y tan fácil como forzar la aparición de las barras sí o sí.

El código CSS:

html {
/* forzado de scrollbars */
min-height: 100%;
margin-bottom: 1px;
}