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/

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;
}

Si bien el uso de los comandos <table> actualmente está en deshuso a favor de los mágicos y a la vez más complejos <div> os vamos a pasar un enlace donde encontrarás un montón de estilos CSS muy optimizados para implementar en tus tablas.

En este enlace podrás ver en directo muchos de los CSS aplicados, pulsa sobre el título del diseño del CSS y la misma página que contiene una tabla se vestirá con el CSS escogido, dispones de un botón “Download” que te bajará o mostrará el CSS que se aplica sobre la tabla.

Enlace: http://icant.co.uk/csstablegallery/