El equipo de Basekit junto a iStockphoto ha organizado un concurso para diseñadores web con premios muy interesantes. La competición consiste en diseñar una página web utilizando la herramienta Basekit con un paquete de 30 imágenes de iStockphoto. Como comentamos hace unos días, Basekit nos permite pasar de forma rápida y sencilla un diseño web en Photoshop a XHTML.

Para participar en el concurso, tenemos que registrarnos y rellenar un formulario que nos enviarán por e-mail. El plazo termina el 4 de mayo. El jurado estará formado por varios profesionales de ambas empresas que repartirán premios para los mejores diseños web. Éstos consisten en créditos para iStockphoto y cuentas plus de Basekit, además, también se entregarán iPads, iPods shuffle y tabletas digitales Wacom para los ganadores de la competición.

Más info | www.competicionbasekitistock.basekit.com

Basekit nace orientada a los diseñadores gráficos con la idea de eliminar la fragmentación existente en el proceso de desarrollo web, permitiéndoles a estos prestar soluciones integrales a pymes y microempresas de manera autónoma.

Basekit nos permite desarrollar cualquier página web dinámica a partir de nuestros propios diseños en Photoshop o bien elegir entre su catálogo de plantillas web, perfectamente optimizadas para buscadores utilizando técnicas de posicionamiento web. Además, no requiere descargar todo el material en nuestro equipo para trabajar con él, simplemente diseñamos nuestra web y la publicamos con un click (drag and drop). Podemos elegir alojarla en nuestro propio hosting, o bien utilizar el hospedaje que nos ofrecen. Todo se crea de manera intuitiva sin tenener que programar código.La herramienta permite modificar el HTML y CSS para poder ajustar los diseños. A través del siguiente video podemos conocer un poco mejor en qué consiste el servicio ofrecido por Basekit.

Los planes de futuro a corto plazo de Basekit nos permitirán ampliar las funcionalidades de nuestra página web a través de nuevos widgets, animaciones flash, e-commerce, harramientas de orientación de posicionamiento web SEO y SEM, etc. De momento, sólamente podemos utilizar la herramienta a través de invitación.

Más info | http://www.basekit.com

Otra de las propiedades que implementa CSS3 es text-shadow, gracias a la cual podremos aplicar un efecto de sombra a cualquier texto. Esta propiedad, que se propuso para las CSS2, no ha sido incorporada hasta ahora. La sombra del texto podrá ser difuminada (como el drop-shadow de Photoshop) o nítida, como si hubiésemos duplicado el texto y el que está detrás, un poco desplazado, sería la sombra.

Además de un bonito efecto visual, esta propiedad nos permite incluir más texto en la página web, evitando así tener que recurrir a Photoshop para editar las imágenes necesarias. Con esto logramos incluir más texto en la página y así disponer de más lugares donde incluir keywords para mejorar el posicionamiento web.

El problema de esta propiedad es que algunos navegadores no la soportan. Sólamente las últimas versiones son capaces de reconocerla. Sin embargo, existen varias alternativas cross-browsing para simular el text-shadow en navegadores antiguos. La propiedad text-shadow es soportada por Firefox 3.5+, Chrome, Internet Explorer 7+, Opera 9.5 y Safari 3+.

La sintaxis de esta propiedad es la siguiente:

text-shadow: color ejeX ejeY RadioSombra;

Ejemplo:

p.shadow {
color: #333333;
text-shadow: #1486D6 1px 1px 2px;
}

Prueba de texto con fondo difuminado

Podemos poner varias sombras a un mismo texto separadas por comas. En Firefox 3.5+ se pueden poner infinidad de ellas, en Opera están limitadas y en Safari sólo se puede poner una.

p.shadow {
color: #333333;
text-shadow: #1486D6 3px 3px 15px, red -3px -3px 15px;
}

Prueba de texto con fondo difuminado con dos colores

La alternativa para Internet Explorer 7+ no ofrece el mismo efecto, pero es lo único que hay por el momento. Desde mi punto de vista, lo mejor es no utilizar este efecto en IE, simplemente ponemos el texto en negrita u otro color.

p.shadow {
display:block;
with: 100%;
filter: dropshadow(color=#FFFFFF,offX=1,offY=1);
}

Prueba de texto con fondo difuminado sólo para Internet Explorer 7+

Font Squirrel, al igual que Dafont, es un portal donde podemos encontrar cientos de tipografías de descarga gratuita. Todas las tipografías que podemos encontrar en Font Squirrel tienen licencias creative commons que nos permiten utilizarlas en cualquier tipo de trabajo, incluso en proyectos comerciales. Disponemos de un buscador para buscar por el nombre de tipografías, aunque quizá sea más útil utilizar las categorías para encontrar el tipo de tipografía que estamos buscando: pixel, comic, caligráfica, con efectos desgastados o grunges, etc. También tenemos a nuestra disposición un listado con las fuentes más descargadas y las últimas añadidas.

Finalmente caben destacar los cientos de kits que podemos descargary que soportan la propiedad CSS3@font-face. Cada kit está compuesto por varios archivos: un .ttf, un .eot para internet explorer, una hoja de estilos de ejemplo y un texto con la licencia de uso del kit.

Más información | http://www.fontsquirrel.com

Con la llegada de la nueva CSS3 tenemos a nuestra disposición multitud de nuevas propiedades para facilitar y mejorar el acceso a nuestra información y la presentación de ésta. Una de las propiedades más interesantes es @font-face, que nos ofrece una funcionalidad similar a las técnicas sFIR, pero mucho más sencilla, limpia y menos aparatosa. Esta propiedad, que están incorporando en sus útlimas versiones todos los navegadores web, permite indicar la URL de una tipografía en la hoja de estilos, que se descargará automáticamente para que el usuario pueda verla en su máquina.

La implementación de la propiedad @font-face en nuestras páginas es muy sencilla. En primer lugar indicamos la ruta de la tipografía en nuestro servidor o una URL externa y el formato de ésta. No es necesario indicar el formato en caso de que la tipografía sea EOT (Embedded OpenType), tipografias diseñadas por Microsoft para embeberlas en páginas web. Después basta con asignar esa tipografía a la propiedad font-family de cualquier elemento de nuestra CSS.

@font-face {

font-family: “n4gash”;

src: url( /*ruta a nuestra fuente en el servidor*/n4gash.ttf) format(“truetype”);

}

h1 {

font-family: “n4gash”, sans-serif;

}

Smashing magazine es uno de los blogs de diseño y desarrollo web más importantes en el panorama internacional. En él participan numerosos profesionales del sector que escriben tutoriales, guías, tips, recursos, etc.

A finales de septiembre van a publicar The Smashing Book, libro impreso que trata sobre las mejores prácticas del diseño web actual. En el libro podemos encontrar diversas técnicas, trucos y prácticas de programación, usabilidad y optimización, y nos mostrarán cómo crear interfaces de usuario de éxito utilizando principios de marketing para aumentar el ratio de conversión. Podremos saber qué tipografías y colores debemos elegir para lograr diseñar páginas web intuitivas y efectivas.

El libro está a todo color con cerca de 300 páginas. Estará disponible para todo el mundo (gastos de envío gratis a EEUU y Alemania) y nos ofrecen una garantía de devolución del dinero de 30 días. Puedes hacer un pre-order antes de que se publique a finales de septimebre, beneficiándote de un 20% de descuento. Por aproximadamente 23€ (gastos de envío incluídos) he comprado mi ejemplar, ya os diré qué tal está.

El libro se divide en varios capítulos:

• El arte y ciencia de las CSS
• Diseño de interfaces de usuario en aplicaciones modernas
• Tipografías en la web: reglas, guías y errores comunes.
• Principios de usabilidad para webs modernas
• Guía del uso del color en diseños web y usabilidad<
• Procedimientos de optimización para páginas web
• Diseñar para vender: incrementa el ratio de conversión
• Cómo convertir una página web en una marca notable
• Aprendiendo de expertos: entrevistas y análisis
• La historia de Smashing

Más info | http://www.smashingmagazine.com