Tutoriales de Desarrollo y Diseño Web | Web.Ontuts

6 razones por las que quiero una invitación para Dribbble

Javier López — Mon, 06 Sep 2010 11:30:05 +0000

El poder de Dribbble

La primera vez que visité Dribbble, tras us vistazo, pensé que era una web más del estilo de WebCreme. Es decir, un repositorio de diseños. Estas webs pueden resultar muy útiles, sobre todo si la persona que las lleva tiene buen criterio. En estas recopilaciones va quedando un listado de webs para inspirarse a los que suelo echar mano antes de empezar un diseño. Así que la añadí a mis marcadores y seguí navegando un poco por ella.

Pronto me dí cuenta de que era bastante más que un repositorio, que en realidad era toda una comunidad de diseñadores en torno a una simple pregunta: “What are you working on?”.

La calidad de los diseños era muy alta, más de lo que se puede esperar en una comunidad de diseñadores como puede ser DeviantArt, que aunque tenga cosas muy buenas, también tiene trabajos muy malos. En Dribbble, mientras navegaba, parecía que un proceso de selección misterioso había cribado a todos los diseñadores mediocres dejando sólo a los mejores.

El misterio quedó dilucidado cuando finalmente me decidí a registrarme y me tope con el detonante final que disparó mi interés por Dribbble: los registros eran únicamente por invitación.

Y desde hace un mes, lo confieso, estoy obsesionado con entrar en Dribbble. Y estas son las 6 razones que tengo para ello:

1. Exclusividad

De la misma manera que cuánto más privado y exclusivo es un club en Harvard, más quieren los alumnos ingresar en él, en Internet se puede conseguir algo muy parecido, y no es nada nuevo. Lo conocemos por Tuenti, BuyVip y otras: en ocasiones, no permitir el registro, hace que se consiga lo contrario de lo que podría esperarse, es decir, que hayan más registros.

Esto no es aplicable a todas las comunidades y redes sociales, pero en Dribbble funciona muy bien. En Dribbble es la forma ideal para conseguir, al menos de momento, de que sólo estén dentro los mejores diseñadores.

Las invitaciones las dan con cuenta gotas, y desde Dribbble animan a que sólo invites a aquellos diseñadores que te gustaría que estuvieran en tu equipo.

“Antes de invitar a alguien, piensa en un proyecto que te gustaría realizar… ¿estaría esta persona dentro? Sino es así, no la invites”.

Esta exclusividad hace que el mero hecho de entrar ya sea un reto. Si pudiera registrarse cualquier persona no tendría ni la mitad de gracia ni el servicio sería útil.

Y esto repercute, por supuesto, de manera muy positiva para Dribbble y el proyecto. Y a todos los niveles, incluida la publicidad y el boca a boca, llegando a casos como el de Please Invite Me To Dribbble, en el que un diseñador compra un dominio y crea un diseño web simplemente para que le inviten a Dribbble, dando de esa manera a conocer aún más el proyecto. De hecho yo conocí Dribbble gracias a esa página. Y tu estás leyendo este artículo gracias a ello… toda una reacción en cadena.

2. Superación Personal

En Dribble, todo, desde el mero hecho de lograr entrar “en el club”, hasta ser reconocido una vez que estás dentro, complace directamente la necesidad del ser humano de autorrealizarse.

En la sociedad que vivimos, por suerte, tenemos la mayoría de las capas de la Pirámide de Maslow satisfechas. Pero el Reconocimiento y la Autorrealización son dos monstruitos egoistas que siempre piden más galletas.

En Dribbble, cada vez que alguien sube una captura del trabajo que está realizando, otros miembros pueden decir si les gusta (Like) o seguir a esta persona (Follow). Con esto se consiguen unos ránkings muy interesantes, tanto de usuarios como de trabajos.

Nada revolucionario, nada que no exista ya en Facebook o Twitter… pero eso da igual. Si eres miembro de Twitter o de Menéame conocerás esa satisfacción que da el hecho de que una nueva persona “te siga” o “te menee” una noticia. En Dribbble se consigue exactamente lo mismo sin inventar nada nuevo.

3. Feedback

Dribbble no es sólo útil para reafirmar tu ego.

Para cada trabajo que subas, puedes recibir comentarios y apreciaciones que te ayuden a mejorarlo. Estarás entre los mejores, y casi seguro que muchos de estos consejos te serán de gran utilidad.

4. Inspiración

Aunque no seas miembro de Dribbble, siempre puedes utilizarlo como medio de inspiración, mirando las galerías de trabajos populares, de todos los trabajos y de debutantes.

A mi me ha resultado tremendamente útil y se ha convertido en mi fuente principal de inspiración para diseño web.

5. Portfolio

Una cuenta en Dribbble es un portfolio ideal. Muestra de forma clara y concisa lo que eres capaz de hacer.

Nada de CVs, ni texto descriptivo, etc… en un diseñador lo que priman son sus trabajos realizados. Dribbble es una excelente herramienta para mostrarlos de forma sencilla y elegante.

6. Contactos y Trabajo

Dicen que en ciertos masters y sobre todo en ciertas universidades (Harvard, Cambridge), son mucho más importantes los contactos que realizas que la calidad de la enseñanza que recibes.

Si consigues entrar en Dribbble tus oportunidades de conseguir buenos contactos serán mayores, y puede que por tanto tus oportunidades profesionales al conocer a más gente del sector se multipliquen.

Reflexión Final

Todo se reduce a una frase: “Entrar en Dribbble mola“.

Por otro lado… ¿existe un Dribbble de habla hispana? La respuesta es: no que yo sepa. Así que si eres emprendedor puede que tengas delante una oportunidad de negocio… o puede que ya llegues tarde y que los usuarios de habla hispana prefieran entrar en el Dribbble original a uno nuevo.

Y desde aquí… cómo no… lanzo una llamada: ¡Por favor, invítame a Dribbble!

See you in another life!

¡Felicidades Google Chrome! Dos años entre nosotros

Adrián Mato — Fri, 03 Sep 2010 08:52:37 +0000

Echando la vista atrás… un agosto de 2008

Si algo tiene de interesante este segundo aniversario de Google Chrome es todo lo que ha cambiado en este corto (pero intenso) periodo de tiempo. En Agosto de 2008 el código javascript se interpretaba 10 veces más lento, HTML 5 sonaba a chino en la mayoría de navegadores web y no existía el multi-proceso en los navegadores salvo como un pequeño proyecto bajo investigación, entre otras cosas.

Todos los navegadores web modernos han recorrido un largo camino, mejorando el renderizado, la velocidad de carga… en definitiva, han ido a más y en la mayoría de los casos a mejor, permitiéndonos disfrutar de una web más divertida y usable que nunca.

Ilustración de Mike Lemanski

El camino se hace pasito a pasito

Desde que lanzaron la primera beta para Windows, han ido desarrollándose versiones para Mac y Linux, teniendo como premisa principal la velocidad, haciendo al navegador más y más rápido, simple y seguro en todas las plataformas.

Además han ido introduciendo un montón de características, incluyendo una mayor customización de la “New Tab page” (nueva pestaña), buscador de themes, administrador de contraseñas, mejoras en los controles de privacidad, Adobe Flash Player de serie, autorellenado, traducción automática, características HTML5 y sincronización con algunas opciones como los bookmars (favoritos), themes, extensiones y opciones de configuración del navegador — por nombrar algunas.

Imagen de la primera beta de Chrome

Un dato aplastante: se han desarrollado más de 6.000 extensiones en la galería de Google Chrome con las que mejorar y agrandar la experiencia de navegación / desarrollo web.

Trabajo sucio: lo que no vemos pero SÍ importa

Detrás del escenario, el equipo de desarrollo de Google Chrome continúa extendiendo las funcionalidades de seguridad ayudando a navegar de una forma más segura. Esto incluye la tecnología “Chrome’s Safe Browsing”, la cual funciona como un sistema de alerta que notifica de posibles sitios maliciosos sospechosos de phishing o malware en sitios que estemos visitando.

Otro de los grandes aciertos de Chrome es su sistema de actualización automático de forma que todos los usuarios naveguen con el mismo navegador, con la misma versión. De esta forma además de poder disfrutar siempre de las últimas funcionalidades, estaremos protegidos automáticamente con las últimas novedades en seguridad.

El sistema de actualizaciones automático garantiza que todos los usuarios naveguen siempre con la última versión, facilitando la vida a desarrolladores.

Nosé cuándo, pero navegadores como Internet Explorer o Mozilla Firefox deberían implementarlo cuanto antes, las numerosas versiones de cada navegador sólo hacen que el usuario no disfrute de todas las nuevas funcionalidades… y que los desarrolladores web estemos siempre hasta arriba de pruebas y problemas a corregir.

Una nueva versión para celebrarlo

Ayer día 2 de agosto de 2010 anunciaban una nueva versión estable de Chrome que como siempre aseguran es más rápida y segura que nunca.

Concretamente el navegador es tres veces más rápido en rendimiento javascript que hace dos años en su primera versión. También comentan que han estado simplificando el aspecto e interfaz. Han apostado por una interfaz minimalista, permitiendo más espacio para el renderizado de la web.

Entre otras cosas han combinado los dos menús de Chrome en uno sólo, revisado la colocación de los botones, limpiado el tratamiendo de la URL y del Omnibox, ajustado la paleta de colores del navegador… etc.

Aspecto de la nueva versión

Desde el equipo comentan también que está tratando de mejorar el rendimiento gráfico y la aceleración via hardware. Además la Chrome Web Store pretende facilitar la búsqueda de aplicaciones en la web.

¿A qué esperas para probarlo?

Si todavía no te has decidido a probar Chrome, desde Ontuts te animamos a que le eches un vistazo, le des una oportunidad y pruebes la nueva versión en google.com/chrome.

Si bien puede no ser tu navegador preferido para uso personal, lo necesitarás para la comprobación de tus próximos desarrollos, ya que entre otras cosas Chrome ha pasado por encima a competidores como Opera o Safari, y va camino de ampliar su cuota de mercado día tras día.

Esperemos que esta competencia se traduzca en una mejora de la experiencia web tanto para desarrolladores como para usuarios finales,

¡Nos vemos en el próximo artículo!

7 Themes WordPress para Fotógrafos Gratis

Adrián Mato — Tue, 31 Aug 2010 10:00:56 +0000

Esta vez sólo para fotógrafos

En muchas ocasiones se publican distintos artículos de recopilación de themes para WordPress, resaltando aquellos relacionados con blogs de noticias, tutoriales, etc.

En esta ocasión os presentamos 7 themes gratuítos que creemos son realmente interesantes para todos aquellos fotógrafos que simplemente quieren mostrar su trabajo acompañado de una pequeña descripción sobre sí mismos y sobre lo que capturan.

Dejo de enrrollarme, aquí va la colección .

AutoFocus+

Basado en un grid de 8 columnas y con un máximo de 800 pixels de ancho este theme realzará todas tus fotografías, toda la atención recaerá sobre ellas.

Descarga: Descargar theme
Demostración: Ver demostración online

Shaken & Stirred

Shaken Grid está especialmente diseñado para aquellos que necesitan una galería/portfolio. Se nos presenta con una grid líquida que aprovecha todo el ancho vertical y horizontal gracias al potente plugin jQuery Masonry.

Descarga: Descargar theme
Demostración: Ver demostración online

Mansion

En su descripción este theme se autoproclama como un theme para “photobloggers”. Una vez más otro diseño flexible en horizontal que aprovechará todo el espacio posible para mostrar nuestras imágenes.

Descarga: Descargar theme
Demostración: Ver demostración online

Monokrome

Monokrome muestra también de forma fluída las imágenes, aprovechando todo el ancho de nuestro navegador pero al contrario que el resto de recomendaciones, las entradas de texto cobran un poco más de importancia, la justa.

Descarga: Descargar theme
Demostración: Ver demostración online

FolioGrid

Descarga: Descargar theme
Demostración: Ver demostración online

Fotofolio Landscape

En tonos grises se nos presenta Fotofolio Landscape, un theme de ancho fijo (960 pixels) que nos permite introducir una pequeña bio acerca de nosotros a modo de “about me” y un splash de las últimas imágenes añadidas a nuestra galería.

Descarga: Descargar theme
Demostración: Ver demostración online

Fullscreen

Descarga: Descargar theme
Demostración: Ver demostración online

Y como siempre… ¡Nos vemos en la próxima publicación!

7 Elementos de Diseño Web que Arrasan

Javier López — Sat, 28 Aug 2010 11:29:49 +0000

Acerca de esta recopilación

En diseño web, como todo, va por modas. De vez en cuando un elemento, por el motivo que sea, comienza a usarse por varios diseñadores y se propaga como la pólvora. Estoy seguro de que sabéis a lo que me refiero… sobre todo si conocéis las webs de Envato veréis como muchos de sus múltiples seguidores les imitan sin parar.

Os voy a mostrar 7 elementos que arrasan hoy en día. Es decisión vuestra incluirlos o no en vuestros diseños web. Y es vuestro deber como diseñadores juzgarlos, diseccionarlos y utilizarlos o no según consideréis oportuno.

¡Ojo! La inclusión de estos elementos en una web no tienen porque dar como resultado una web rompedora. Dependerá de tu propio bien hacer, tu destreza en la maquetación, en el diseño de la portada y de lo inspirado que estés en el momento. En resumen, de tu experiencia.

Os presento a los 7 fantásticos… 7 sencillos elementos de diseño que arrasan:

1. Sombra Sutil Especial

Están de moda las sobras no uniformes. Fíjate bien en la sombra que arroja esa tarjeta. Si miras bien verás que no es una simple “sombra arrojada” de Photoshop. Se abre hacia los lados partiendo desde el centro.

Con esto puedes conseguir el efecto de que la tarjeta esta ligeramente doblada, como la de la punta inferior derecha de la tarjeta de arriba, como si la punta estuviera más altas sobre el plano. Pero en realidad el rectángulo es totalmente recto. Es una sombra que crea un efecto sutil y elegante.

2. El Color Magenta y sus Amigos

Quizás peque de exagerado, pero el Magenta es algo así como el color de los diseñadores. Si existe una paleta de colores 2.0, el magenta es el rey. Pero no viene sólo…

Si además lo juntas con uno de sus mejores amigos, el Cyan, el resultado puede ser francamente espectacular. Echadle un vistazo.

3. Rótulo Saliente

Es curioso como a una simple caja rectangular puede mejorar añadiéndole dos triangulitos de un color ligeramente más oscuro. El efecto de “cinta doblada” o “rótulo saliente” que se consigue con algo tan simple es muy resultón.

Por cierto, esta imagen reune 4 de los 7 elementos que estamos examinando en esta artículo… ¿sabes cuáles? Deja un comentario a ver si aciertas.

Otra variedad un poco más elaborada puede utilizarse en las esquinas de las cajas.

Por cierta, lo de “beta” también estuvo muy de moda… hace un par de años era más “cool” tener una etiqueta “beta” en tu web que tener la versión final de la misma.

4. Gradient Radial / Glow Sutil

Utilizando un glow, brillo en inglés, puedes hacer que de manera casi imperceptible, un elemento o parte de la página se muestre de manera más precisa a ojos del visitante. En este ejemplo vemos que el glow irradia desde el centro, desde la parte inferior del logo.

Bajo el logo de Nettuts también se puede observar este efecto.

¿No lo ves? Quizás lo veas mejor si pongo sólo el fondo.

Es un efecto que suele quedar bien en la zona del logo, para realzarlo. En Ontuts también lo utilizamos, de manera un poco más agresiva, en nuestro logo en la cabecera.

5. Superficies Rugosas o con Ruido

Los colores planos siguen llevándose, eso está claro, pero comienza a verse cierta tendencia, sobre todo en algunos de los mejores diseñadores, a utilizar superficies rugosas como la de la imagen en sus diseños.

En esta segunda imagen se puede ver de forma menos clara que en la primera, pero si te fijas bien verás que el degradado tiene un poco de ruido.

Mi consejo es que si utilizas superficies rugosas o ruido, ten mucho cuidado para que no resalten demasiado con respecto a otros elementos.

6. Thumbnails con Imágenes Giradas

Ideal para entradillas de posts… girar la imagen no falla casi nunca, suele quedar muy bien. Fácil y efectivo.

7. Hendidura de Separación

Imagina un Header a dos colores. ¿Es lo ideal para separlos una única línea de un color? Puede… pero lo que está de moda es crear un efecto “hendidura”. Veamoslo más de cerca:

Y es muy fácil de crear, tan sólo necesitas dibujar dos líneas, la de arriba de un color ligeramente más oscuro que la región superior y la de abajo ligeramente más clara que la región inferior.

Reflexión final

Si eres un diseñador novel te animo a que copies sin parar. ¡Copia, copia, copia! El estilo propio es algo que llegará con el tiempo. Mientras tanto copia, moldea y adapta a tus necesidades a partir de otros diseñadores mientras aprendes y desarrollas tu propia forma de hacer las cosas.

Sea como sea, si utilizáis alguno o varios de estos elementos, estoy seguro de que la impresión general de vuestro diseño puede llegar a mejorar… simplemente porque la verdad, no sólo están de moda, sino que también son bastante bonitos.

¿Conoces algún otro elemento de moda? Puedes contárnoslo dejando un comentario.

See you in another life!

contentEditable: Contenido editable en HTML5

Adrián Mato — Fri, 20 Aug 2010 10:14:38 +0000

¿Qué es contentEditable?

Para ser exactos existen dos elementos similares envueltos: designMode y contentEditable, similares pero con distintos objetivos.

El atributo designMode está enfocado en la edición de todo el documento, por tanto podríamos decir que es un editor HTML al uso con el que editar todo un documento.

Por otra parte contentEditable sólo permite editar los elementos que tengan este atributo asignado dentro de un documento, además de los elementos “hijo” contenidos dentro del “padre”.

Los atributos designMode y contentEditable se emplean para activar el modo edición en documentos enteros o elementos concretos respectivamente.

Si bien actualmente existen multitud de editores “WYSIWYG” (What You See Is What You Get / lo que ves es lo que obtienes), es de esperar que con el avance y estandarización de HTML5, estos vayan quedando en un segundo plano en pro de la integración nativa con los navegadores y su modo de edición.

Aprendiendo a utilizar contentEditable en HTML5

Como hemos mencionado en la introducción, estamos tratando con un atributo asignable a distintas etiquetas HTML, por lo que el uso es realmente trivial como podemos ver en el siguiente ejemplo:




	
	contentEditable: Contenido editable en HTML5
	


	
		
			Contenido Editable con HTML5
		

		
			
				Mediante el atributo "contentEditable" podremos convertir nuestros elementos en contenido editable, al más puro estilo richtextbox.
				Haz click para editar.
			
		

		
			Tareas a realizar la próxima semana:
			
				Redactar nuevos tutoriales para Ontuts.
				Dominar el mundo con Erasmusu.com.
				Sacar a pasear a Coki.
				Introduce siguiente tarea aquí...

Basta con asignar el atributo editableContent=”true” a la lista ordenada para poder editar los elementos actuales e incluso introducir más elementos a la misma.

El código CSS

Como curiosidad he querido resaltar algún que otro selector que a más de uno puede resultarle confuso o nuevo:

[contenteditable]{
	border: 1px dotted transparent;
}
[contenteditable]:hover{
	background: #fff7c3;
	border: 1px dotted #f0df6c;
}
section > *{
	margin: 1em;
}

Empleamos [contenteditable] y [contenteditable]:hover para asignarle estilo a los elementos que tengan activo el modo edición, tanto para su estado normal como para cuando el usuario pasa el cursor por encima de los mismos. No es espetacular pero ayuda a orientar al usuario:

Para los más inexpertos en HTML5 simplemente comentarles que las etiquetas

son nuevas y simplemente se emplean para separar dentro de un artículo

con cabecera y secciones del mismo.

¿Qué navegadores lo soportan?

Como ocurre con la mayoría de novedades de HTML 5, los navegadores más recientes las soportan “sin problemas”:

Firefox 3.
Google Chrome.
Internet Explorer (desde la 5.5).
Opera 9.
Safari 3.

Y como más de uno habrá podido deducir con las comillas anteriores “sin problemas”… el demonio está en los detalles, por lo que os aconsejo esta demo online con la que probar los distintos navegadores.

Como curiosidad acerca de sus orígenes…

Sorprendentemente estos dos atributos (designMode y contentEditable) fueron originalmente diseñados e implementados por Microsoft con la versión Internet Explorer 5.5, aunque estaban explicados con una buena documentación en la realidad carecían de una buena funcionalidad, eran bastante engorrosos.

Conclusión final

Nada más conocer esta nueva característica me he parado a pensar en las horas que hemos perdido muchos desarrolladores en tratar de generar una “rich text box” en condiciones y todas las trabas e incompatibilidades que nos hemos encontrado a lo largo del proceso… ojalá que por fin estos atributos nos ayuden y faciliten un poco la vida, tanto a nosotros como al propio usuario final.

Me viene a la cabeza Erasmusu… en su día implementáramos nuestro propio rich text box con emoticonos, negrita, cursiva, etc, para los comentarios y foros y la verdad es que fue un dolor de cabeza contínuo. Al final optamos por el texto plano enriquecido de toda la vida .

¡Nos vemos en la próxima publicación!

No related posts.

10 Características para diseñar una Portada Web Rompedora

Javier López — Wed, 18 Aug 2010 14:35:59 +0000

Acerca de esta recopilación

La portada de una página web es en la mayoría de los casos la sección más importante. En esta recopilación he seleccionado 10 portadas webs, que por un motivo u otro, me han parecido muy buenas, cada una de ellas debido a una característica concreta. La idea es que os sirvan de inspiración para vuestros propios proyectos.

Pero antes de poder diseñar una buena portada, hay que entender qué hace que una portada sea mala. Una mala portada es aquella cuyo índice de rebote es muy alto, es decir, aquella en la que la mayoría de los usuarios que la ven la abandonan sin navegar por el resto de la web.

Una mala portada es por tanto aquella que no transmite nada al visitante, aquella en la que se pierde y no encuentra la información que busca. Una mala portada será la mayoría de las veces visualmente poco atractiva. Una mala portada es también aquella cuya estructura caótica impide al usuario centrarse en los elementos más importantes.

Para mí, las 10 características más importantes para diseñar una Portada Web rompedora son:

1. El Eslogan: Squared Eye

“Make waves” define muy bien lo que quiere transmitir Squared Eye en su portada. El eslogán es un elemento vital para toda campaña de marketing y puede tener cabida en la portada de la web para realzar la idea principal que se quiere transmitir.

2. Diseño Interesante: Carol Rivello

Este es un ejemplo de portada que destila buen diseño a raudales. Podrá gustar más o menos, pero un toque original siempre será apreciado por los visitantes aunque sea a nivel subliminal.

3. Gancho: Wake Somebody Up

El “gancho” es aquel elemento, ya sea el logo, una imagen, etc… que da un toque de humor a la portada. El gallo de “Wake Somebody Up” es un buen ejemplo.

4. Estructura: Foxtie

La estructura de la portada es primordial a la hora de permitir al usuario orientarse y ver de un vistazo el servicio o producto que ofrece la web. En el caso de Foxtie vemos de una forma clara y concisa los 4 servicios que ofrecen, acompañados cada uno de un icono visual, y por encima de ello una serie de explicaciones visuales que bien pueden ser trabajos realizados o cualquier otra idea que se quiera transmitir.

5. No te cortes en hacer scroll: Studio 7 Designs

Existe cierta tendencia a intentar evitar el scroll en las portadas, por lo que muchas de ellas tienden a miniaturizarse. Personalmente me parece un error. Si es necesario explicar más elementos de la web, siempre que la estructura sea buena, no te cortes en ampliarla verticalmente. Otro buen ejemplo de esto lo tenemos en las portada de 37signals o Erasmusu.

6. Si tienes un servicio muy concreto, ponlo en grande: Foundation Six

El producto o servicio debe estar presente en la portada. Si por ejemplo ofreces diseño web… ponlo bien grande, ¡que se enteren todos!

7. Utiliza colores, fondos y tamaños distintos según la importancia del texto: Enviramedia

Y para ello las combinaciones son infinitas. Usualmente los tonos cercanos a los colores cálidos como el rojo destacarán más que los tonos frios como los azules o verdes. Pero todo depende de los elementos, tamaños y fondos que utilices.

8. Contenido dinámico: Veerle Duoh

Uno de los grandes aciertos que tuvimos con Erasmusu fue migrar la portada original de tipo estático a una portada con contenido dinámico proveniente de los usuarios. La indexación en Google se disparó, y en gran parte debido al nuevo motor de indexado de Google: Caffeine. Una portada cuyos contenidos cambien, aunque sea mediante las últimas entradas en el blog como en Veerle Duoh, será una portada ya no solo más atractiva para los usuarios, sino también para los motores de búsqueda.

9. Se conciso: Puzzle Tree Music

Se conciso, sobre todo si tienes servicios muy distintos unos de otros. Explícalos de manera resumida y acompáñalos de iconos visuales. Y como ya hemos comentado cuando hablamos de la estructura, colócalos en un sitio visible. Los 3 iconos + descripción de la parte superior de Puzzle Tree Music resumen bien esta idea.

10. Se original: Sofasurfer

Incluso para anunciar un cambio de página o de marca, se puede ser original… y si no me crees mira la rompedora portada de Sofasurfer en la que comunica su cambio de página.

Reflexión final

Espero que esta colección os haya inspirado y realmente os sirva para diseñar portadas rompedoras. Si no estas de acuerdo con alguna de las 10 características o si se te ocurre alguna más puedes dejar un comentario.

See you in another life!

Fuentes de Letra Gratis y de Calidad Volumen #8

Adrián Mato — Fri, 13 Aug 2010 10:26:48 +0000

La importancia de las fuentes de letra

Seleccionar la fuente de letra adecuada para comunicar nuestro mensaje es muy importante, pero mucha gente lo olvida. Una buena tipografía puede ser usada para crear grandes logos, para crear un gran encabezado, para captar la atención del lector… No se trata sólo de diseño web, se trata de que tu contenido tiene que ser fácil de leer tanto en la pantalla como en un trozo de papel.

Es más que un diseño bonito, una fuente de letra ha de ser capaz de leerse fácilmente en una pantalla o en un trozo de papel y captar la atención del lector desde el primer instante. Debe comunicar nuestro mensaje con claridad.

Es nuestro trabajo como diseñadores entender estos problemas y tratar de seleccionar la fuente de letra correcta para cada proyecto. Espero que estas 4 fuentes de letra destacadas os sirvan de ayuda en vuestro proceso de selección y diseño.

Fuentes de letra en este volumen

Nos Inspira… A Fervenza do Toxa en Galicia

Adrián Mato — Wed, 11 Aug 2010 08:00:33 +0000

Introducción a esta colección

A lo largo de nuestros artículos de inspiración hemos reseñado paisajes urbanos, diseños digitales, tendencias en diseño web… pero en esta ocasión hemos querido ir más allá y aprovechando mi visita a la Fervenza do Toxa he querido compartir con vosotros esta maravilla de la naturaleza que tengo el privilegio de poder visitar aquí en mi tierra, Galicia.

El Río Toxa se encuentra rodeado de un paisaje idílico lleno de vegetación y frescura, un bosque autóctono. En su largo recorrido nos encontramos con el salto de agua más grande de Galicia: 30 metros de altura en los que el agua cae con fuerza produciendo un magnífico y relajante sonido.

El río avanza corriente abajo creando zonas de agua estancada ideales para pegarse un chapuzón y refrescarse, creando pequeños saltitos de agua que vuelven a generar ese ruído relajante del que os hablaba y que refresca con sólo sentarse cerca de las grandes piedras a modo de plataforma.

Dejo de enrrollarme y os dejo con las fotos .

Disfruta de la colección…

Fervenza do Toxa

El salto de agua es el más grande de Galicia, la fuerza con la que cae el agua es bastante importante, pero aún así mucha gente aprovecha para pegarse un chapuzón e incluso meter la cabeza y espalda debajo de la cascada.

Posteriormente a las cataratas el Río Toxa avanza alternando zonas de calma y fuerza, produciendo pequeños saltos muy bonitos y relajantes.

Monasterio de Carboeiro

A escasos 6 kilómetros de las cataratas también podemos visitar el Monasterio de Carboeiro, restaurado hace no mucho tiempo y del cual he tomado estas otras fotos. No hemos podido pasar, pero también tiene visita guiada por dentro.

Nos gusta

Que todavía la mano del hombre no haya destrozado paisajes como este. La sensación de estar dentro de un entorno virgen, alejado del ruído de la ciudad, el respirar un aire tan fresco y verde es impagable.

Si alguna vez tenéis ocasión de visitar Galicia, intentad hacer un huevo en vuestra agenta porque os aseguro que no os defraudará el lugar. Espero que os haya gustado el artículo y como siempre…

¡Nos vemos en la próxima publicación!

Drag & Drop en HTML 5

Iván Guardado — Tue, 10 Aug 2010 08:31:26 +0000

Introducción

Una característica bastante utilizada en aplicaciones con una interfaz de usuario enriquezida es la de poder arrastrar los elementos. Ejemplos típicos son el de reorganizar los elementos de una web para personalizarla o mover un elemento a una determinada categoría.

Hasta ahora la forma más fácil de hacer esto era usar una librería de Javascript que nos facilitase el trabajo. La jQuery UI, que es la que más me conozco, estaba muy avanzada en este tema. Sin embargo, al ser una implementación totalmente basada en Javascript, tenía bastantes inconvenientes como:

Si mueves demasiado rápido los elementos, el elemento arrastrado se suele quedar atrás y se pierde en “dragging”.
Solo puedes mover elementos dentro de la misma web, no puedes arrastrar elementos de una ventana a otra ni aceptar elementos que no sean DOM.
Menos eficiencia al requerir más código.

Novedades en HTML 5

Los creadores del estándar HTML5, parece que han visto que esta característica es importante y que necesita ser mucho más exprimida para dar mucho más juego a las aplicaciones webs. A continuación os cito las principales novedades del estándard en este tema:

Nuevos eventos en el DOM: dragstart, drag, dragenter, dragover, dragleave, drop, dragend.
Nuevo atributo para los elementos DOM para hacerlo arrastrable: draggable=”true”.
Se permite adicionar información en el elemento arrastrable para que el contenedor pueda recibirla.
Posibilidad de establecer la imagen “ghost” mostrada mientras se arrastra.
Posibilidad de añadir efectos del estilo: copiar, mover, vínculo, etc…

Además, esta característica va más allá de la propia web, dándonos la posiblidad de arrastrar elementos entre distintas webs e incluso aceptar elementos de otras aplicaciones como arrastrar un texto de un procesador de texto o un fichero del sistema.

Los nuevos eventos

Vamos a listar los nuevos eventos que nos trae HTML5 para drag & drop y luego veremos un ejemplo de implementación para que veáis lo fácil y rápido que se implementa.

dragstart

Comienza el arrastrado. El “target” del evento será el elemento que está siendo arrastrado.

drag

El elemento ha sido movido. El “target” del evento será el elemento arrastrado.

dragenter

Se dispara cuando un elemento que está siendo arrastrado entra en un contenedor. El “target” del evento será el elemento contenedor.

dragover

El elemento ha sido movido dentro del contenedor. El “target” del evento será el elemento contenedor. Como el comportamiento por defecto es denegar el “drop”, la función debe retornar el valor “false” o llamar a “preventDefault” para que indicar que se puede el soltar elemento.

dragleave

El elemento arrastrado ha salido del contenedor. El “target” del evento será el elemento contenedor.

drop

El elemento arrastrado has sido éxitosamente soltado en el elemento contenedor. El “target” del evento será el elemento contenedor.

dragend

Se ha dejado de arrastrar el elemento, con éxito o no. El “target” del evento será el elemento arrastrado.
Vamos a ver un ejemplo de como hacer un elemento arrastable usando jQuery.

$('#mydrag')
    .attr('draggable', 'true')
    .bind('dragstart', function(ev) {
        var dt = ev.originalEvent.dataTransfer;
        dt.setData("Text", "Información adicional");
        return true;
    })
    .bind('dragend', function(ev) {
        return false;
    });

Y ahora la otra parte, creamos un contenedor que esté a la espera de elementos arrastrables.

$('#mycontainer')
    .bind('dragenter', function(ev) {
        //Cambiamos color del contenedor para mostrar que acepta al elemento
        $(ev.target).css('background','#F00');
        return false;
    })
    .bind('dragleave', function(ev) {
       //Reestablecemos el color del contenedor
        $(ev.target).css('background','#FFF');
        return false;
    })
    .bind('dragover', function(ev) {
        //Importante como hemos dicho para que acepte al elemento,
        //por defecto cancela el drop
        return false;
    })
    .bind('drop', function(ev) {
        var dt = ev.originalEvent.dataTransfer;
        alert(dt.getData('Text'));
        return false;
    });
});

Creo que el código no require de mucha explicación pues simplemente establece las funciones para cada evento, aunque creo que es importante reseñar que gracias al objeto dataTransfer se puede compartir información entre el elemento arrastrado y el contenedor, lo veremos a fondo a continuación.

Transfiriendo información con dataTransfer

Como ya hemos dicho, una de las características más importantes de esta nueva implementación, es la posibilidad de cargar información en el elemento arrastrado para que el contenedor pueda recibirla. Pero, lo que todavía está mucho mejor, es que un contenedor pueda recibir los datos desde elementos arrastrados desde otros navegadores o aplicaciones.

Como ya he mostrado en el ejemplo anterior, esto se hace a través de los métodos setData y getData del objeto dateTransfer expuesto en el objecto del evento (Event Object).

La información se debe de almacenar usando los tipos recomendados para un uso estándard y adecuado. A continuación unos ejemplos:

var dt = ev.originalEvent.dataTransfer;
dt.setData('text/plain', 'Hola mundo');
dt.setData('text/html', 'Hola mundo');
dt.setData('text/uri-list', 'http://web.ontuts.com');

Un ejemplo de uso de los tipos recomendados es seleccionar un texto en el navegador, arrastralo a un contenedor y esperar encontrar algo en en text/html, o arrastrar texto desde un procesador de texto y esperar encontrar algo en text/plain.

Uso de imágenes fantasma

Esta es una nueva característica que nos permite establecer lo que el usuario verá como imagen semitransparente mientras arrastra el elemento. Tenemos tres posibilidades:

Establecer un elemento del DOM.
Establecer una imagen (aunque se base en el punto anterior).
Establecer un elemento canvas.

Esto se hace a través del método setDragImage, incluído una vez más, en la propiedad dataTransfer. A continuación un ejemplo de los tres tipos:

var dt = ev.originalEvent.dataTransfer;
 //Elemento DOM
dt.setDragImage( $('h2')[0], 0, 0);
 //Imagen (elemento DOM)
dt.setDragImage( $('#image')[0], 32, 32); 

var canvas = document.createElement("canvas");
canvas.width = canvas.height = 50;
var ctx = canvas.getContext("2d");
ctx.lineWidth = 8;
ctx.moveTo(25,0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.lineTo(25, 0);
ctx.stroke();
//Canvas
dt.setDragImage(canvas, 25, 25);

El método setDragImage acepta como primer parámetro el elemento que se desea mostrar como imagen. Los dos siguientes parámetros son el “offset” que se desea dar a la imagen respecto a la posición por defecto.

Usando efectos de arrastrado / tirado

El drag & drop del nuevo estándar ha sido creado para sobre todo para soportar acciones como copiar, mover y vincular. Por ello se han añadido los efectos de tirado para mostrar la acción que se va a ejecutar. Para que te hagas una idea, son los iconcitos pequeños que aparecen cuando arrastras un icono en el S.O. (una flechita, un signo más, etc…).

Estes efectos pueden establecerse a nivel del elemento arrastrado o a nivel del contenedor. Si se vinculan al contenedor, el efecto solamente aparece cuando se producen los eventos dragenter y dragover.

Para usar esta funcionalidad se establecen las propiedades effectAllowed y dropEffect para los elementos arrastrados y contenedores respectivamente. Como es de esperar, estas propiedades están incluídas en el objeto dataTransfer. A continuación un ejemplo de como añadir el efecto al elemento arrastrado:

var dt = ev.originalEvent.dataTransfer;
dt.effectAllowed = 'copy';

Los valores permitidos para esta propiedad son:

none: ninguna operación permitida
copy: solo copiar
move: solo mover
link: solo vínculo
copyMove: copiar o mover
copyLink: copiar o vincular
linkMove: vincular o mover
all: copiar, mover o vincular

Por otro lado, puedes especificar el efecto para el propio contenedor, para indicar la acción que se va a llevar a cabo al soltar el elemento:

var dt = ev.originalEvent.dataTransfer;
dt.dropEffect = 'none';

Conclusión

Hasta aquí el tutorial sobre el Drag & Drop en HTML 5, si has tenido la paciencia de leerlo todo, te habrás dado cuenta que tiene muchas novedades y mejoras que despilegan un nuevo abanico de posiblidades, además de mejorar el rendimiento.

Espero que os haya resultado útil la información y no dudéis en dejar un comentario para preguntar, criticar o valorar.

¡Nos vemos en el próximo!

No related posts.

10 Diseños Web Originales y llenos de Color

Javier López — Mon, 09 Aug 2010 20:48:21 +0000

Acerca de esta recopilación

Estrenamos las recopilaciones de diseños web. Comenzamos esta serie con 10 páginas cuyos diseños nos han gustado especialmente. A la hora de comenzar un nuevo diseño, nunca está de más echar un vistazo antes a lo que circula por la red para sacar algunas ideas. Recordad que todo gran artista ha sido primero un gran “copión”. Antes de desarrollar un estilo y diseño propios, conviene aprender de los mejores.

Espero que las páginas de esta recopilación te sirvan como inspiración para tus propios diseños, o como mínimo, para pasar un buen rato viendo un trabajo imaginativo y de calidad.

Please Invite me To Dribbble

Kitschensink

Books Alistapart

Pieoneers

Haveamint

The Combine

Made By Rocket

Greenzoner

La Fraise

Huxleyprairiefest

Reflexión final

Espero que esta colección os haya inspirado y realmente haga volar vuestra imaginación… Recordad que aceptamos sugerencias de cualquier tipo y que podréis hacérnoslas llegar desde nuestro twitter, sección de contacto o página facebook.

See you in another life!