Proyectos destacados

runhabitat.es

Una web sencilla, que vende paquetes de suscripción a diferentes rutinas deportivas.

De diseño muy cuidado y óptimo rendimiento para que cada paquete se convierta en la landing de su propia campaña.

https://www.runhabitat.es/

Baricentro

Se que esta mal que lo digamos nosotros, pero: ¡nos encanta esta web!

Responsiva, autogestionable y con una versión optimizada para la navegación en teléfonos móviles.

http://www.baricentro.es/

Legalgap

100% de libertad creativa (como en las viejas épocas de Flash) y un «producto» que mola como es una banda de música. ¡Más no se puede pedir!

Por desgracia la banda se disolvió, pero guardamos una copia de la web para la posteridad.

https://www.legalgab.net/old

lafranquicia.es

Se rehizo enteramente manteniendo un diseño anterior, pero optimizando radicalmente su funcionamiento. Para hacerlo se pasó de una web hecha con con editor visual y unos 45 plugins a una nueva que depende solo de 3

https://www.lafranquicia.es/

Rampas.es

Conjunto de 4 webs (1 landing y 3 webs) responsive, con catálogo y tienda online.

Imagen corporativa y rediseño para unificar el conjunto.

http://www.rampas.es/

vi3informatica.es

Una web odiosamente grande, hecha en WordPress con un editor visual de esos de «drag and drop», que son muy fáciles, pero que cuando la desactivas «no queda nada». La optimicé en rendimiento y posicionamiento, «rescatando» el contenido para no tener que volver a hacer el data entry.

http://www.vi3informatica.es/

t4franquicias.com

Una web que depende de la franquicia.es (es un secreto) pero que tiene mucho menos presupuesto. Se optimizó para pasar el pagespeed en verde, pero luego algún capullo se ha dedicado a añadirle plugins

https://www.t4franquicias.com

Com&geinsa

Esta tan fresca tan fresca, que aun no ha salido de «banco de pruebas».
Si veis algo raro… es que la pintura no se ha secado del todo 😛

/comgeinsa/

dglobalpack.com

Preferimos no hacer web baratas sobre temas prefabricados… pero a veces toca y nunca está de más un ejemplo de lo que puede resolverse con un presupuesto MUY ajustado.

http://www.dglobalpack.com/

bgestionglobal.com

Visualmente muy sencilla, esconde complejas funciones -programadas en jQuery- para el calculo de prestamos e hipotecas.

http://www.bgestionglobal.com/

cellerscarol.com

Lo más complejo de esta web es haber modificado el carrito de la compra, para que -por cuestiones de logística- solo permita comprar un minimo de ser botellas (que se pueden escoger individualmente)

https://cellerscarol.com/

Centro canalejas

Muchas veces hacemos landings, pero suelen ser proyectos difíciles de vincular, porque por lo general tienen una duración efímera. Esta nos gustó y la subimos a bancodepruebas.

/centrocanalejas/

chichalimona.com

Un proyecto con anécdota. Produje la web para una pequeño estudio… y cuando el cliente final cambió de proveedor, fue a parar White Rabbit, que también trabaja conmigo frecuentemente!

http://www.chichalimona.com/

accordassist.es

A veces lo mejor que se puede decir de un proyecto, por complicado que sea (y este lo es, porque se trata de un diseño a medida sobre un Woocommerce utilizado como catálogo) es: «el cliente lo quería justo así..»

https://www.accordassist.es/productos/

consultordefranquicias.net

Una web optimizada para el posicionamiento y la valoración positiva de la herramienta Google Page Speed

http://www.consultordefranquicias.net/

ironglobal.es

Un cliente muy grande… que quería algo llamativo y diferente. Diseñado y producido desde cero para ser visto desde el móvil como objetivo principal.

http://www.ironglobal.es/

asho.net

Una web sencilla y muy enconómica, resuelta en un pim-pan con WordPress

http://asho.net/

whiterabbit.es

Lo mejor que puedo decir de este proyecto es: ellos lo querían justo así. Si todos los proyectos que llegan a mis manos me gustaran… no me pagarían por hacerlos

https://whiterabbit.es/

Equilibriumdfs.com

Web minimalista pero compleja de realizar, producida para el gran Quique López

http://equilibriumdfs.com/

Cinesa

Campaña de 7 emails responsivos producidos para Cinesa a través de igriega

/portfolio/cinesa/

platinumhayat.com

Se diseño partiendo de un tema complejo (el accesspress parallax) al que se le añadieron un montón de funcionalidades nuevas.

http://www.platinumhayat.com/

Nafarco.com

Proyecto desarrollado en Drupal. Rediseño, e implementación con comportamiento responsivo.

http://www.nafarco.com/

Sidelcotrading.com

Odio esta web! No quedó mal, pero dio muchisimo trabajo.
Es un catálogo online súper extenso, con muchos tipos de visualizaciones distintas según los productos.

http://www.sidelcotrading.com/

Concursos Caja Rural

Adaptación de un WordPress para que funcione como concurso de fotografía.

http://www.concursoscajarural.com/

kareyanimalflooring.com

Landing de acabado muy cuidado, diseñada por quiquelopez.net
Es responsiva y utiliza efectos de paralax

http://www.kareyanimalflooring.com

Duranhaeussler.com

Web de estética muy cuidada, diseñada por Salvador Huertas

Responsiva, con efectos de Paralax, autogestionable con WordPress

http://www.duranhaeussler.com/

Moto por moto

Mi blog particular de motos

http://www.motopormoto.com/

Reconocimientosmedicosnavarra.com

A riesgo de que un día el cliente entre aquí y lo lea, yo voy a decirlo fuerte y claro:
Un diseño «noventoso», que tuvimos la responsabilidad de maquetar y producir sin cambiar una coma, para que fuese auto-administrable utilizado WordPress

http://www.reconocimientosmedicosnavarra.com/

Williams

Un minisite para Williams diseñado por uno de los mejores: El gran Borja Lizcano (¿te acuerdas del iJam?… pues ese)

/portfolio/williams/aciegas.html

Danonea

Un truño echo para DANONE (lo pongo así… en grande, porque lo importante aquí es el cliente… y no la mierda de minisite que encargó)

/portfolio/danone/index.html

Chrysler New Voyager

Este es el primer trabajo que hice en España para una agencia grande (CP Interactive).
Esta aquí por nostalgia (aunque tampoco está tan mal… pronto pasará a ser «vintage»). No le busquéis otra explicación….

/portfolio/new-voyager/index.html

Customizador de carcazas

Una de las pocas paridas en flash, que todavía se puede usar (pero yo no me fiaría mucho de que la carcasa de iPhone 2G me vaya a llegar, porque esta gente hace tiempo que no actualiza sus modelos)

http://www.musicaskins.com/home/index.php?main_page=index&cPath=15

Banners

Me encantaba hacer banner’s! Lastima que ya no se hagan tantos….
Exprimir la creatividad (y los conocimientos técnicos) para hacer pequeñas piezas de arte en tamaño súper reducido y de solo 40k de peso, es una tarea que solo los mas Freaks del diseño web sabemos apreciar!

/portfolio/banners/index.html

Emular una web en varios dispositivos

Para comprovar como se verá una web (local o no) en varios dispositivos, el navegador Google Chrome dispone de una herramienta muy útil. Tenemos que ir a Menú > Más herrramientas > Herramientas para desarrolladores (o Ctrl + Mayús + I). Para activar el emulador utilizamos el botón con forma de dispositivo ( mobile). Aparecerá un espacio de trabajo con varias opciones. La más importante es el desplegable «Device», donde escogeremos qué dispositivo queremos simular. Importante: hay que recordar actualizar la página para que se adapte al dispositivo que hemos escogido, muchas veces no lo hace de forma automática. Hay otras opciones útiles, como rotar el dispositivo, poner una medida customizada… Además de las opciones que vemos en esta interfaz, podemos acceder a más configuraciones mediante el botón de tres puntos que tenemos a la derecha mobile3 (o entrando al inspector, presionando Esc y escogiendo la opción «Emulation» del menú). Allí podemos configurar opciones como el User Agent, la geolocalización, el acelerómetro… Una herramienta que me gusta mucho y quizás pasa un poco desapercibida es este iconito que podemos encontrar arriba a la izquierda: media. Se trata de un visualizador de las media queries. Si lo activamos nos muestra una barra con los «saltos» que hace las queries del css. Además, la barra será de un color distinto según el tipo de query que sea:

[...]

/emular-una-web-en-varios-dispositivos/

Convertir todos los “li” con “a” dentro, en botones

Es bastante habitual, cuando trabajamos con una plantilla wordpress, que un tema pinte los elementos de un menu como «LI» con etiquetas «A» dentro, por ejemplo: <li><a>mi menú</a></li>

También es habitual encontrarse que las propiedades CSS que hacen que nuestro enlace se vea como un botón, están aplicada al LI y no al A. Por tanto…. todo el LI parece un botón, pero solo el texto «mi menú» es clicable.

Esto bien puede solucionarse con estilos… pero también puede solventarse en un plis con este sencillo jQuery que hace que la etiqueta LI también sea clicable:

[...]

[...]ir-todos-los-li-con-a-dentro-en-botones/

Incrustando y personalizando Google Maps

Obtener las coordenadas de cualquier mapa en google maps:


http://www.agenciacreativa.net/coordenadas_google_maps.php

Dos ejemplos de como personalizar un mapa de google. El primero mas enfocado a «señalar puntos»

http://www.elwebmaster.com/general/insertar-y-personalizar-google-maps-en-tu-sitio-web

El segundo mas enfocado a «cambiar colores»

http://blog.programmableweb.com/2010/05/20/make-your-google-map-stand-out-with-styles/

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

[...]

/767/

Responsive Image Maps

Los imágenes en html se pueden «Mapear», es decir… asignarle a una misma imagen distintas áreas clickables.
Dreamweaver permite hacerlo de forma muy sencilla mediante un editor visual, pero cuando la imagen no tiene un tamaño fijo, la cosa se complica.
Para solucionarlo existe:

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

 

/clase-8-responsive-image-maps/

Javascript, que es y que permite hacer.

Javascript, que es y que permite hacer.
Usos mas comunes:

  • Desarrollo de utilidades en Dreamweaver (como el acordeón)
  • Generar consultas a bases de datos que no necesiten recargar la pagina (ajax).
  • Desarrollar aplicaciones web complejas que funcionen dentro del navegador (gmail, google doc’s etc).
  • Integración con canvas para la generación de animación, generada a través de programas con interfase gráfica (como las que generan flash y processing).
  • Papel determinante en las paginas web de diseño responsivo.
  • Librerías open source de recursos destinados a aumentar la funcionalidad de la web como Jquery y otras, basadas en esa como las galería de imágenes, etc.
  • Creación de widgets y apps para distintos dispositivos.
[...]

/javascript-que-es-y-que-permite-hacer/

HTML5Rubik: cómo programar un cubo de Rubik en CSS3/JavaScript

Básicamente es una explicación paso-a-paso de cómo construir un cubo de Rubik interactivo empleando únicamente CSS3 y JavaScript. Funciona en cualquier «navegador web moderno» y también en iPhone/iPad y dispositivos Android.
HTML5Rubik.
Vía. microsiervos.com

[...]amar-un-cubo-de-rubik-en-css3javascript/