Category Archives: design

Vota por Pooplitics, la camiseta para lucir el próximo 22 de mayo

Ayer se me ocurrió que en las próximas elecciones iba a ir a votar  con una camiseta que expresara lo que siento de el 99% de los políticos y sus partidos, así que cree este diseño: Pooplitics (política = caca). Lo he presentado en mangacorta.com , y me lo han aceptado a concurso, y la verdad es que me haría mucha ilusión que pasara la fase de votación y lo pasaran a la tienda.

Así que si te mola, me puedes dar un voto y así, si tiene suficientes, pasaría a la tienda online :)

pooplitics

Vótala aquí.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Mi hijo vale mucho

Hoy he descubierto “mi hijo vale mucho” una web viral interactiva muy divertida y con acento malagueño, que desde el exilio se agradece. Detrás de esta está la empresa malagueña Doctor Jeckyll, y sin duda me parece una forma muy divertida de autopromocionarse. Además han ganado el III premio Sur a la mejor campaña publicitaria, bastante merecido en mi opinión.

mininovalemucho

Me ha recordado a “La vin que piso más bonico

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Riu Plaza Hotels en cssmanía

riuplazacomEs de justicia, en Css Manía han seleccionado Riu Plaza Hotels, un bonito diseño efectivo y elegante de Desink. El que aquí comenta, que trabaja con David Pareja (Director de arte y de proyectos de Desink) desde hace ya unos 3 ó 4 años, es el responsable de darle vida a su diseño, y hacer la maqueta y la programación de este sitio web multiidioma para reservar e informar sobre los Hoteles Riu Plaza.
Enhorabuena David.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Nueva web de MySofa.es

Ya está en producción el nuevo diseño de Mysofa.es con nuevas funcionalidades y mejor experiencia de usuario: recomendador, estados de los usuarios, mayor protagonismo de las novedades literarias, cine o musicales, fichas completas de películas, discos, autores, etc, 

El trabajo ha sido duro (bueno no tanto ;-)   y lo mejor sin duda está por llegar. Estoy contento de haber conocido y trabajado con un gran equipo de profesionales en MySofa, sólo por esto mudarme 5 meses 900km al norte ha merecido la pena.

¿Y tú a que esperas para hacerte usuario de la comunidad de ocio y cultura  lider en internet?

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

CSS Orientado a Objetos (Object Oriented CSS)

Hoy he descubierto la presentación de Nicole Sullivan-Hass: OO CSS.
La verdad es que nunca se me ocurrió hablar de Objetos cuando hablo de maquetación modular, que igual tampoco es un adjetivo muy acertado, pero muestra algo que llevo mucho tiempo haciendo, y que me ha valido más de una discusión con algún paleto con aires de grandeza.
Los CSS orientados a objetos se basan en dos pincipios básicos:
1. separar la estructura de la presentación,
y 2. separar contenedor de contenido.

A la práctica esto no quiere decir otra cosa que definamos módulos u objetos como contenedores, atendiendo a su forma, no a su presentación (colores, tipo, backgrounds, etc), son los que Nicole llama Legos, las piezas del puzzle que estammos montado (web). A su vez estos módulos deberían ser dependientes de la estructura general del sitio, a la que también definimos por su forma y no por su contenido (A loos que usais clearfix en vez de darle overflow:hidden a la capa flotante, ¿os va sonando la cosa?).

Sullivan habla de 10 buenas prácticas:

  1. Crear una librería básica con elementos comunes. Yo por ejemplo, en las reset.css también icluyo clearfix, el grid system y f-l, f-r, t-r, para floats y text aligns.
  2. Nombra semánticamente a tus estilos.
  3. Diseña módulos transparentes, o lo que es lo mismo, que la presentación (colores, imágenes de background, etc estén definidos en otra clase)
  4. Que nuestras capas sean flexibles y puedan usarse en cualquier parte de la web
  5. Usa retícula. Los diseñadores que no maquetan, por favor usad retícula.
  6. No uses selectores en tus css. NO pongas nunca: span.small {} pon simplemente .small{}
  7. Separa estructura de presentación
  8. Separa contenedor de contenido
  9. No tengas miedo de usar varias clases dentro de un elemento, una para la estructura principal, otra para presentaciones determinadas, para eso están.
  10. Usa reset css (ella dice que use las de la YUI).

Veamos un ejemplo:

[...]

En este caso definimos un módulo, block, con ciertos elementos estructurales comunes, tales como el margen, relleno, etc.

Su tamaño va a ser heredado de un módulo padre que funciona como elemento de la estructura, grid6, que define el número de columnas que tiene la capa main_content dentro de la retícula, en este caso 6 columnas.

De esta forma vemos que block es un elemento puramente modular, ya que se comporta igual esté en el sidebar o en el main_content, ya que su tamaño lo hereda, no lolleva implícito, y además su presentación está completamente separada de su forma, ya que tanto el hecho de que tenga los bordes redondeados (roundedCorners) y tenga un diseño especial más destacado (patrocinado) es dado por objetos diferenciados

[...]

En este caso definimos un módulo, block, con ciertos elementos estructurales comunes, tales como el margen, relleno, etc.
Su tamaño va a ser heredado de un módulo padre que funciona como elemento de la estructura, grid6, que define el número de columnas que tiene la capa main_content dentro de la retícula, en este caso 6 columnas.
De esta forma vemos que block es un elemento puramente modular, ya que se comporta igual esté en el sidebar o en el main_content, ya que su tamaño lo hereda, no lolleva implícito, y además su presentación está completamente separada de su forma, ya que tanto el hecho de que tenga los bordes redondeados (roundedCorners) y tenga un diseño especial más destacado (patrocinado) es dado por objetos diferenciados.

¿Qué conseguimos con esto? crear una maquetación perfectamente escalable para sitios vivos, como pueden ser las web 2.0 o comunidades web. Este es el principio que se sigue en la maquetación del próximo diseño de MySofa.es, con ello lograremos que nuevas secciones no definidas en un principio y que todavía puede que ni imaginemos (es un sitio vivo), crezcan de manera natural, no reduplicando estilos, ya que con unas piezas mínimas o legos debe construirse todo el sitio, y como mucho, se extenderán capas que definan la presentación, por las nuevos artes que puedan surgir.
Otra consecuencia importantísima de esta forma de maquetar es la de facilitar a los desarrolladores de lado de servidor (o back end) la creación de nuevas funcionalidades sin la necesidad de crear ellos html o css, sin la necesidad de pedir maquetas previas (ya luego entran los front end para darle la capa de chapa y pintura) y sobre todo sin romper la estructura y tener que pegar sus famosos gritos de auxilio al maquetador cuando todo se descoloca y el footer se pone en la cabecera y otros gajes del oficio.

Otra cosa importantísima, es en cuanto al diseño.
Para mi existen dos tipos de diseñadores web: los que saben (aunque sea poco) de html/css y los que no. Y son estos últimos los que más retrasan y más trabas ponen a una buena maquetación escalable. En principio todo buen diseñador web debería pensar en el contenido y tratar de adaptar las imágenes, la longitud de los textos, etc, a la realidad. además deberían tratar de no multiplicar los entes y aplicar la navaja de Ockham, aplicar una retícula, etc

Ya sin más enrolle os dejo la presentación de Nicole (en inglés):

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Trabajo a cambio de un logo. Will work for logo

David Walsh me ha dado una idea.
Necesito un logo, una identidad de marca o como quieras llamarle, para mi web, tarjetas de visita, etc

Si te dedicas al diseño y sabes de logos, pero tu fuerte no es el desarrollo front end / maquetación web, interacción o necesitas un sitio autogestionable con PHP y no eres programador, podemos hacer un intercambio: tu me diseñas un logo, yo te desarrollo tu página. O algo así.
Si te hace, ya sabes dóde encontrarme. Espero noticias tuyas pronto.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter