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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Concurso para diseñadores web by Basekit & iStockphoto

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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Basekit, de photoshop a XHTML en un solo click

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+

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Texto con sombra en tu web con CSS: text-shadow

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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Font Squirrel, descarga gratis cientos de tipografías y kits @font-face

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;

}

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

@font-face utiliza tipografías no estándar en páginas web con CSS3

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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

The Smashing Book, libro de diseño gráfico, desarrollo y marketing web

Utilizar tipografías no estándar en una página web a día de hoy requiere la utilización de tecnologías sIFR, mediante javascript, flash o imágenes. Todo esto cambiará con el atributo @font-face de CSS3, pero hasta que podamos utilizarlo, tenemos que recurrir a otros recursos.

En Wwwhatsnew hablan de TypeKit, un proyecto todavía en beta cerrada (se puede solicitar acceso o que te envíen un email cuando sea público) que nos ofrece varios packs de fuentes que podemos instalar fácilmente en nuestra página web importando un javascript e insertando varios códigos. A través de un panel podemos ir eligiendo qué fuentes queremos incorporar a nuestro paquete.

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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Typekit, utiliza tipografías no estándar en tu página web

Ember es un portal cuyo objetivo es ofrecer a los diseñadores compartir sus obras con otros usuarios, a la vez que éstos pueden tomar como inspiración el trabajo de otros creativos. Ember ha sido construído por un grupo de diseñadores que buscan crear un gran catálogo de diseños online.

Lo que caracteriza a Ember de otros proyectos similares es que no sólo dispone en su catálogo de diseños de páginas web o diseño gráfico, también incluye varias categorías de Diseño de Interfaces de Usuario. Los diseños están organizados por categorías: formularios de registro o login, wallpapers, iPhone Icons, Web Apps, claros u oscuros, logos, etc.

Podemos registrarnos y subir una imagen de nuestra obra, que podrá ser comentada o  ser añadida como favorita por otros usuarios, en plan socialmedia. Lo cierto es que el panel de visualización de las obras es muy similar a Flickr, con los datos del autor, propiedades de la imagen (stats, copyright, etc.), tags, etc.

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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Inspírate con diseños de otros y comparte los tuyos

GuerraCreativa es un nuevo proyecto cuyo objetivo es la busqueda de todo creativo que posea habilidades en diseño gráfico, tanto web como flash, animación 3D, 3D modeling, motion graphic, etc. A través de concursos y competiciones tendremos accesos a premios y oportunidades laborales. El proyecto lo está gestionando Connaxis S.A., empresa argentina dedicada al diseño gráfico y desarrollo web.

De momento está en fase Alpha y sólamente podemos suscribirnos para recibir una notificación cuando haya algúna competición disponible. Lo cierto es que no ofrecen mucha información sobre el proyecto, aunque se puede deducir por el contenido de la página, que además de poder conseguir excelentes premios, también tendremos acceso a una importante cartera de clientes y propuestas laborales, interesante ¿no?. Si te registras entrarás en el sorteo de 100 portátiles y tabletas digitales, teniendo más oportuniades de ganar si invitas a amigos o conocidos que estén interesados en participar en las competiciones.

Actualizado 05/08/2009

Guerra Creativa se encuentra en su fase Alpha, donde se han invitado solo a 100 personas entre las 3000 inscritas hasta el primero de agosto, para hacer la primera experiencia del sitio en cuanto a la funcionalidad de la plataforma, dejándola abierta al público a fines de agosto del 2009.

En guerra creativa, como primer concurso, se solicitará que los 100 diseñadores seleccionados realicen el diseño del LOGO del sitio, el ganador se llevará una laptop Asus Eee PC1000 y una tableta digitalizadora Genius.Una vez abierto al público el sitio ofrecerá la oportunidad de tener un porfolio online para cada diseñador que podrá ser compartido con sus amigos, al igual que un sistema de red social entre usuarios del sitio.

Más info | http://es.guerra-creativa.com

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Concursos y proyectos freelance de diseño gráfico y desarrollo web

La nueva versión de HTML (HTML5) es un paso más en pro de la web semántica. El nuevo HTML5 (“Hypertext Markup Language”) incorpora nuevas etiquetas para estructurar y especificar el contenido de las páginas web. Si bien se mantienen los tags clásicos, los nuevos nos permitirán indicar notas (aside), conversaciones entre personas (dialog), ficheros de audio o video, detalles (details), etc.

La gente de Smashing Magazine ha publicado recientemente una tabla de referencia rápida (Cheat Sheet) de HTML5 para consultar de forma más sencilla las nuevas etiquetas.

Más info | http://www.smashingmagazine.com/html-5-cheat-sheet-pdf

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Hoja de Referencia rápida de HTML5