99 Lime - HTML QuickStart

HTML KickStart es un framework; un conjunto formado por fragmentos de HTML5, CSS y archivos jQuery.

Este framework contiene elementos de diseño que le dan al Webmaster una buena ventaja inicial al momento de dar inicio a un nuevo proyecto Web.

El tagline del producto, es más que elocuente: "Si sabés tipear HTML y editar CSS, esto es para vos". El frameworks es sencillo de utilizar; contiene layouts, slideshows, menúes, grillas (muy flexibles), trabaja con contenedores para las imágenes (aka image placeholders), y ofrece botones, pestañas y un largo, largo etcétera.

Si querés ahorrarte recursos a la hora de trabajar en tiempo de diseño; podés descargarte gratis este valioso framework.

Sitio Web | HTML KickStart
Vía | Los marcadores de Delicious de Juaniquillo (Gracias Víctor!)

Leer más

Como diseñar una página para Facebook

Pagemodo es una forma práctica y sencilla (ideal para dummies) de crear en forma personalizada una página para Facebook.

Básicamente la aplicación ofrece 2 plantillas y la posibilidad de insertar fotos, textos y enlaces según se requiera.

Como diseñar una página para Facebook

Finalmente, se puede descargar la plantilla para luego subirla a Facebook o—de otra manera—instalarla desde la aplicación.

La aplicación inserta la clásica leyenda en el footer Hecho por (...) a menos que se decida erogar U$S 19.95para quitarla.

Sitio Web | Pagemodo

Leer más

Grid System Generator

Grid System Generator es un generador de código HTML y CSS basado en diseño reticular.
Puede consultarse las grillas más populares que han sido creadas, o de otra manera; crear las propias.





Las variables que pueden utilizarse, son:

• Grid width un valor numérico comprendido entre 100 - 4000
• No. of columns desde 1 a 100 columnas
• Grid width / No. of columns cualquier valor positivo.
• No. of Columns x (Margin left + Margin right) sólo es necesario que sea menor al ancho total

Sitio Web | Grid System Generator

Leer más

+30 plantillas para newsletters

Las plantillas que están disponibles en el sitio Web de Campaign Monitor han sido puestas a prueba en los principales clientes de correo:

• Outlook


• Apple Mail


• Windows Live Mail


• Hotmail


• Lotus Notes


• Outlook Express


• Yahoo! Mail


• AOL


• Thunderbird


• Gmail

Las mismas se distribuyen en 3 categorías

• 1 columna


• 2 columnas




• barra lateral a la derecha


• barra lateral a la izquierda

Es indispensable, para el correcto funcionamiento de las plantillas, saber como adaptarlas.
Por lo que sugiero la previa lectura de:
E-mail design guidelines
Style in e-mail


Sitio Web | 30+ Free HTML email templates

Leer más

Un generador de plantillas | PageColumn

PageColumn es un generador de plantillas basado en (X)HTML y CSS. Especialmente útil para diseños fijos o líquidos.

La aplicación permite obtener los códigos necesarios para lograr diseños desde 1 hasta 5 columnas. Sean estos en px, em o en %.



Además, como valor agregado pueden generarse pestañas de navegación: superiores o inferiores.
Es una herramienta ideal para aquellos que empiezan el día con algo de pereza (dummies)

Sitio Web | PageColumn

Leer más

CSS Menu

En más de una oportunidad, he comentado aquí, los beneficios que el webmaster obtiene al utilizar un menú de navegación basado en CSS.

• Los enlaces están organizados en listas.
• La navegación no presenta barreras en la Accesibilidad Web.
• Su usabilidad es independiente del estado de JavaScript (activado o desactivado).
• Los crawlers de los motores de búsqueda pueden seguir los enlaces en forma adecuada.
• Siendo un sistema de navegación basado en (X)HTML y CSS carga rápidamente.

CSS Menu es una iniciativa del genial Stu Nicholls.



Quien ha lanzado este sitio para compartir los diseños que él mismo ha llevado a cabo.



Estos diseños sólo pueden ser utilizados en forma gratuita en proyectos personales. Dejando librada a cada uno, en lo personal, la decisión de hacer una donación.
Para sitios comerciales; esto es, trabajos que cobremos a nuestros clientes, la donación es de carácter obligatorio (no debieras enriquecerte utilizando los recursos de Stu).
Con estas consideraciones bien claras; Stu, ofrece adicionalmente, soporte para la implementación del menú.


Sitio Web | CSS Menu

Leer más

La flexibilidad de un diseño basado en un ancho de 960 px

La fortaleza de un diseño se basa en la flexibilidad del mismo y la propuesta de 960 Grid System es mostrar a las claras, todas las ventajas que tiene un diseño basado en 960px de ancho.

Todos los navegadores modernos soportan al menos la resolución de 1024 × 768px. Por lo pronto, parece ser que el 54% de los usuarios prefieren esta resolución (cf. Browser Display Statistics).
El ancho de 960 es divisible por 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480.
Más allá de la letanía, el sitio ofrece la descarga de un archivo ZIP de 180 Kb que contiene una grilla en formato PDF, plantillas para Fireworks, OmniGraffle, Photoshop y Visio y un demo en HTML con el correspondiente archivo CSS.

Vía: del.icio.us

Leer más

Definiendo accesibilidad

La accesibilidad es un subconjunto de la usabilidad.
La usabilidad es cuan fácil es para cualquiera usar algo.
Las cosas son sencillas de usar cuando las mismas son naturales o requieren una mínima cantidad de pensamiento.

Una idea comúnmente equivocada es que la accesibilidad significa si alguien con alguna discapacidad puede o no tener acceso a algo.
La accesibilidad y la usabilidad se aplican a cualquiera.

Fragmento correspondiente al wiki Creando una plantilla accesible con CSS (Creating an Accessible Template with CSS), artículo de Michael Morgan.

Leer más

Como crear un logo

Precisamente no te voy a enseñar como crear un logo, pero sí hoy no es tu día más inspirado podés recurrir a la sección de logos vectoriales gratis de bestcompanylogo.com.
A la fecha el sitio reúne poco menos de 300 logos en formato EPS.
El sitio tiene un índice que arranca con animales y aviación y termina con viajes y turismo. En el medio, para todos los gustos; un poco de cada uno.

Leer más