Categories
FrontEnd Design Portfolio UI/UX

Tienda en PrestaShop

Desarrollo del ecommerce Easy Baby Kit (easybabykit.eu)
Diseño e integración de un custom theme para PrestaShop. Motaje y configuración del ecommerce con TPV, modulo de transportista y modulo CRM.

Categories
FrontEnd Design Portfolio Social Media UI/UX

Buscador de hoteles social

El mundo del turismo (viajes, hoteles, etc.) es uno de los mas utilizados en internet. Solemos buscar y estudiar nuestro destino y contratar el transporte y el alojamiento desde infinidad de herramientas y servicios que nos ofrece la red.

Tralopia es un proyecto salido recientemente en su fase beta, es un buscador de hoteles social, nos ayuda a encontrar nuestro hotel ideal segun nuestras preferencias (ocio y de negocios) y utiliza medios sociales como Facebook y Twitter para definir nuestros gustos.

En él he realizado tanto el diseño de identidad de marca como el interface de usuario (UI), y, en este caso, también he maquetado el prototipo (DHTML, PHP, JQuery)

http://www.tralopia.com

 

Categories
FrontEnd Design UI/UX

CSS orientado a objetos (OOCSS)

WEBCAT

Ayer asistí al webcat de Septiembre, un evento mensual en Barcelona dirigido a diseñadores y programadores web dónde ellos  mismos proponen un tema durante el mes y lo exponen ese día ante toda la concurrencia, con la única premisa que la exposición no exceda de loa 10 minutos. 10 minutos son pocos, pero conden mucho ya que las presentaciones suelen ser muy preparadas y dinámicas, y luego de ellas hay un turno de preguntas que enriquezen mucho mas lo expuesto.

OOCSS

OOCSS

Entre otros temas muy interesante (distribuciones de Drupal, desarrollo agil, tipografia y css, …) Harold Dennison nos hizo una interesante introducción sobre el OOCSS (Object Oriented CSS), el CSS orientado a objetos.

Nicole Sullivan es la promotora de esta “filosofia” que en principio esta pensada para optimizar código y ahorrar miles de líneas y por tanto Kb y tiempos de carga y respuesta a grandes webs al estilo de Yahoo o Amazon.

En definitiva la pràctica se trata de optimizar el código CSS y reutilizarlo. Normalmente tendemos a focalizar esta optimización en el código HTML, nos gusta sencillo, limpio y con las menos lineas posibles y esto suele generar un CSS mas complejo y generalmente lo que ganamos, en cuanto Kb, en el HTML lo perdemos en el CSS.

Reutilizar

Solemos crear el CSS siguiendo la semántica HTML del sitio, y creamos estilos asociados a los diversos tags HTML. OOCSS propone separar la estructura (HTML) del skin (CSS) y utilizar y reutilizar al máximo las clases. Por ejemplo en vez de definir h2 {font-size:2em;} utilizar una clase .big{font-size:2em;} y alplicarla <h2 class=”big”>. En principio puede parecer más código, pero si reutilizamos esta clase en otras partes de nuestro site nos podemos ahorrar líneas.

Puede uqe para sitios muy sencillos no ganemos mucho, o incluso compliquemos el HTML un poco, pero creo que es una técnica que nos ayudará a estructurar mejor nuestros diseños.

Para mas información podeis visitar la web de Nicole, http://www.stubbornella.org, dónde encontrareis consejos, tips y presentaciones como esta:

 

 ¿Creéis que es una buena metodología?

Categories
FrontEnd Design Portfolio

Vallado de piscinas

Vallado de piscinas es  una web de producto: Vallado de todo tipo de piscinas, en toda España

Una web sencilla hecha principalmente para posicionar un producto específico en los buscadores, en este caso vallas de seguridad para piscinas.

Al principio pensé hacerla bajo un gestor de contenidos (WordPress) pero al final opté por montarla con php, ayudandome del .htaccess para hacer las urls amigables. Con esto he podido trabajar el SEO con mas flexibilidad y hacer que valide tanto el CSS como el HTML en W3C.

El prosupuesto no era mucho, además  el vallado de piscinas no es un tema muy creativo. Al final esto es lo que ha salido:

www.vallado-piscinas.es