Freepik es un proyecto hispano cuya objetivo es convertirse en un buscador de fotos y vectores gratuitos libres de derechos. Si bien en la red ya existen alternativas, como Iconfinder (buscador de vectores) o Photl (buscador de fotografías), Freepik destaca por aunar bajo el mismo portal, la búsqueda de imágenes y vectores conjuntamente.

Freepik resulta muy sencillo de utilizar. Tenemos a nuestra disposición un buscador por palabra clave o por gama cromática, pudiendo seleccionar que busque sólo fotos, o sólo vectores, o en todo el repositorio. Para controlar las imágenes que ya hemos descargado o las que nos han gustado, podemos utilizar las herramientas Mis descargas y Favoritos (comportamiento similar al Lightbox de portales de pago). Gracias a varios robots que trabajan internamente, el contenido de Freepik se actualiza con gran asiduidad, rastreando la web por fotografías, vectores, imágenes o ilustraciones libres de derechos para utilizar en cualquier proyecto de diseño gráfico.

Los resultados aparecen paginados con una imagen en miniatura de cada creatividad. La primera fila de resultados se corresponde con imágenes y fotografías patrocinadas de Shutterstock, las cuales sí son de pago y en caso de querer descargarlas, tendremos que pagar una suscripción económica. En definitiva, un nuevo proyecto hispano que ofrece recursos gratuitos para cualquier diseñador o creativo garantizando una buena calidad y un repositorio enorme donde podemos encontrar imágenes de cualquier temática.

Más info | http://www.freepik.es

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

Freepik buscador de fotografías y vectores gratuitos para proyectos de diseño gráfico

Fieldset y Legend

Estas etiquetas nos permiten crear un área visible dentro del formulario agrupando varios controles que estén relacionados facilitando al usuario su comprensión y usabilidad, ya que permite desplazarse de un control a otro a través de la tecla TAB. La etiqueta Fieldset crea el recuadro que agrupa a los controles, mientras que Legend nos permite implementar el título del área.

<fieldset>

<legend>Datos personales:</legend>

Nombre: <input size=”20″ type=”text” />

Dirección: <input size=”20″ type=”text” />

Teléfono: <input size=”20″ type=”text” />

</fieldset>

Label

Aunque no es una etiqueta desconocida, puede que el uso que se la da no sea el apropiado o simplemente que no es explota todo su potencial. Esta etiqueta permite definir un título a un control del formulario. Cada etiqueta label sólo puede estar asignada a un control, y digo asignada porque aquí es donde está el verdadero uso de esta etiqueta. Mediante el atributo for (propio de la etiqueta label) podemos especificar el id del control de formulario al que queremos asignar el label, de esta forma el usuario podrá hacer click sobre el control o sobre el label al realizar las operaciones con el formulario. Donde realmente podemos ver su efecto es en controles radiobutton ó checkbox, ya que para seleccionarlos o chequearlos podremos hacer click sobre el label o sobre los propios controles. De esta forma se mejora considerablemente la usabilidad del formulario. Cabe mencionar que dentro de la etiqueta label podemos incluir tanto texto como imágenes.

Selecciona tu vehículo

<input id=”bmw” name=”coche” type=”radio” />

<label for=”bmw”>BMW

<input id=”audi” name=”coche” type=”radio” />

<label for=”audi”><img src=”"/> Audi

Selecciona tu vehículo:

BMW

Audi

Optgroup

Esta etiqueta nos permite crear grupos dentro de desplegables select. Los grupos están definidos por un título que aparecerá en negrita y cursiva, y que no será seleccionable.

La utilidad de optgroup reside en facilitar al usuario la lectura y comprensión de la lista desplegable.

<select name=”Modelo”>

<option selected=”selected” value=”none”>Seleccione…</option>

<optgroup label=”BMW”>

<option value=”bmw120d”>BMW 116d

<option value=”bmw118d”>BMW 118d

<option value=”bmw120d”>BMW 120d

<option value=”bmw318d”>BMW 318d

<option value=”bmw320d”>BMW 320d

</optgroup>

<optgroup label=”AUDI”>

<option value=”A1″>A1

<option value=”A2″>A2

<option value=”A3″>A3

<option value=”A4″>A5

</optgroup>

</select>

Más info | http://www.eslomas.com/campos-fieldset-legend-label-optgroup

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

Mejora la usabilidad y accesibilidad de los formularios en HTML 4.0

Adobe Flash Builder, antes conocido como Macromedia FLEX, es la evolución oficial de las aplicaciones Flash programadas con ActionScript en forma de nueva tecnología apadrinada por Macromedia en su día, y por Adobe en la actualidad. Adobe Flash Builder es un entorno de desarrollo creado para correr sobre la plataforma Eclipse con el que podemos desarrollar RIAs (Rich Internet Applications) y, desde la incorporación de Adobe AIR en esta tecnología, también podremos desarrollar aplicaciones de escritorio multiplataforma.

Ahora puedes descargar de forma gratuita, y lo más importante, legal, Adobe Flash Builder 4. Para ello, debes cumplir alguno de estos requisitos:

• Ser estudiante o desempeñar alguna función dentro de una institución educativa (profesores)
• Desarrolladores de software que estén acusando gravemente la crisis y actualmente se encuentren en condición de desempleo.
• En caso de participar en algún evento podrías recibir un código de activación especial.

Para poder tener acceso a nuestra copia gratuita tendremos que rellenar un formulario en el que debemos indicar nuestros datos personales, condiciones laborables, institución educativa en la que estamos matriculados si se diese el caso, y además, escanear cualquier documento que nos acredite en alguna de las tres opciones antes comentadas. Por ejemplo, si somos estudiantes, podríamos escanear la factura de la matrícula, o la nota de alguna asignatura con la fecha incluida; en caso de estar desempleados, podríamos escanear la cartilla del INEM (en España, Instituto Nacional de Empleo). Una vez enviado, podremos proceder a la descarga de Adobe Flash Builder 4.

Si estás interesado en aprender algo más sobre esta nueva tecnología, puedes echar un vistazo a los siguientes manuales:

• ActionScript 3 Tutorials
• Adobe Flash Builder 4 Tutorials

Muy buena iniciativa por parte de Adobe, que se suma al carro de otras grandes empresas, como Microsoft, ofreciendo sus suites de desarrollo a usuarios en proceso de aprendizaje para que conozcan y se acostumbren a crear aplicaciones utilizando sus tecnologías, promoviendo y extendiendo de esta forma su uso en el futuro.

Más info | www.adobe.com/devnet-archive/flex/free/

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

Descarga Adobe Flash Builder 4 (FLEX 4) gratis

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