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.
Más info
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.
Más info
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.
Más info
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
Más info
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.
Más info
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.
Más info
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
Más info
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 😛
Más info
/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.
Más info
http://www.dglobalpack.com/
bgestionglobal.com
Visualmente muy sencilla, esconde complejas funciones -programadas en jQuery- para el calculo de prestamos e hipotecas.
Más info
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)
Más info
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.
Más info
/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!
Más info
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í..»
Más info
https://www.accordassist.es/productos/
consultordefranquicias.net
Una web optimizada para el posicionamiento y la valoración positiva de la herramienta Google Page Speed
Más info
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.
Más info
http://www.ironglobal.es/
asho.net
Una web sencilla y muy enconómica, resuelta en un pim-pan con WordPress
Más info
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
Más info
https://whiterabbit.es/
Equilibriumdfs.com
Web minimalista pero compleja de realizar, producida para el gran Quique López
Más info
http://equilibriumdfs.com/
Cinesa
Campaña de 7 emails responsivos producidos para Cinesa a través de igriega
Más info
/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.
Más info
http://www.platinumhayat.com/
Nafarco.com
Proyecto desarrollado en Drupal. Rediseño, e implementación con comportamiento responsivo.
Más info
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.
Más info
http://www.sidelcotrading.com/
Concursos Caja Rural
Adaptación de un WordPress para que funcione como concurso de fotografía.
Más info
http://www.concursoscajarural.com/
kareyanimalflooring.com
Landing de acabado muy cuidado, diseñada por quiquelopez.net
Es responsiva y utiliza efectos de paralax
Más info
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
Más info
http://www.duranhaeussler.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
Más info
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)
Más info
/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ó)
Más info
/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….
Más info
/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)
Más info
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!
Más info
/portfolio/banners/index.html
Generadores de CSS
Aquí dejo una pequeña recopilación de generadores de CSS, para tenerlos más a mano en el uso diario.
CSS3 Generator (border radius, sombra de caja, sombra de texto, rgba, font face, columnas múltiples, box resize, box sizing, outline, transición, transformación, flexbox, degradado): http://css3generator.com/
Escala de grises: http://labs.voronianski.com/css3-grayscale/
Degradados: http://www.colorzilla.com/gradient-editor/
Border Radius: http://border-radius.com/
Formas:
https://coveloping.com/tools/css-shapes-generator
http://www.samuelrossille.com/css-shape/#1142AAy21z-17z-17z11z0
Más info
/generadores-de-css/
Problemas con Internet Explorer
Muchas veces tenemos problemas para visualizar correctamente nuestra página web en Explorer, o en sus versiones antiguas. Aquí tenemos unos cuantos recursos que nos ayudarán a corregir los problemas de visualización que hayamos detectado:
Si no lee etiquetas HTML5:
<!-- [if lt IE 9]> <script type="text/javascript"> document.createElement("nav"); document.createElement("header"); document.createElement("main"); document.createElement("footer"); document.createElement("section"); document.createElement("article"); document.createElement("aside"); </script> <![endif]-->[...]
Más info
[...]de-compatibilidad-con-internet-explorer/
CSS para Internet Explorer
Muchas veces nuestra página web se ve perfecta hasta que PAM! la abres en Explorer y te quieres morir. Para arreglar esas cosas que sólo se «desmontan» en nuestro querido IE podemos fácilmente asignar a nuestra página un css que únicamente se aplique en el caso de que el explorador sea Internet Explorer de X versión (los Explorer más nuevos cada vex se comportan mejor, pero no se puede descartar, por ejemplo, una versión 9).
Por ejemplo, yo quiero afectar a la versión 9 de IE y anteriores:
[...]Más info
/css-para-internet-explorer/
Curso de HTML y CSS
Anatomía de una etiqueta
Dando por entendido que html es un lenguaje de marcado, en el que el contenido que ha de ser modificado visualmente ha de estar encerrado en una etiqueta, lo siguiente es hacer una «disección» de la etiqueta, a través de la cual podremos ver las distintas maneras que tenemos de apuntar a ella para darle formato.
Este es un texto de ejemplo en el que solamente <div id=»destacado» class=»botón destacado»>esta parte está encerrada en una etiqueta</div> y el resto no.
[...]Más info
/curso-de-html-y-css/
Inspector de elementos
Los inspectores de elementos nos permiten señalar las etiquetas que estructuran nuestro contenido directamente en la ventana del navegador, mostrándonos qué parte del css es la responsable de dar formato a dicho contenido, y modificar (añadir, quitar y modificar propiedades, o «reglas» completas) para cambiar su visualización a tiempo real (sin tener que ir al editor de código a modificar nuestro css, y luego recargar la página para ver cambios).
Firefox trae un depurador propio integrado, y puede incluir Firebug, solo con descargarlo del enlace getfirebug.com
[...]Más info
/inspector-de-elementos/
Nociones básicas de HTML
Un ejemplo (abstracto y ficticio) seria el siguiente:
«Este es un párrafo ordinario, solo esto se ve <rojo>rojo.</rojo>El resto… se ve normal.»
Más info
/nociones-basicas/
CSS, flotación a la derecha
Los contenedores de la web, se representan de distinta manera en función del tipo de etiqueta utilizada para estructurar contenido.
Por defecto, la mayoría de contenedores no «obedecen» las ordenes de ancho, alto y posición.
Una forma sencilla de «setear» el comportamiento de todas las etiquetas de la pagina para hacer que todas se adapten al tamaño de lo que tienen dentro o representen correctamente un ancho y un alto es hacer que «floten» unas al lado de las otras (siempre que quepan).
También podemos decirles a todas que salten de linea, los que nos ayudará a acomodar de una manera mas sencilla el contenido de la web.
Más info
/css-flotacion-a-la-derecha/
Ver una web como si fuese una app
Una vez desarrollada la demo de nuestra app en Html, Muse o Dreamweaver, intentaremos simular el comportamiento de un app nativa. Para esto, subiremos la web a un servidor (que bien puede ser dropbox) y luego haremos lo siguiente: Ocultaremos la barra de direcciones y los botones de navegación de safari en un iphone/ipad/android. Para hacerlo, añadiremos un javascript siguiendo las instruciones de esta página: https://gist.github.com/nateps/1172490 Una vez incluido el javascrip, añadiremos una linea extra al html de nuestra página, para definir el icono con el que queremos que nuestra web-app se inicie. El código es el siguiente: <link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="150x150" />
Luego accederemos a la web desde safari, y le daremos a «añadir a pantalla de inicio» (o Add to Home Screen) El resultado final, debería ser un icono en el escritorio, que abra nuestra web a fullscreen.
Más info
/ver-una-web-como-si-fuese-una-app/
Ver nuestra web local en un teléfono u otro dispositivo
1. Buscar la dirección IP de nuestro ordenador.
– En PC: Centro de Redes>Conexión de red inalámbrica
– En Mac: ir a Aplicaciones>Utilidades>Utilidad de Red
2. En el WordPress, ir a Ajustes > Generales > Dirección de WordPress (URL) y Dirección del sitio (URL).
Substituir “localhost” por nuestra IP (dejando el :8888). Por ejemplo:
http://localhost:8888/verdi –> http://192.168.254.189:8888/verdi
3. En qualquier dispositivo (móvil, tablet o ordenador) en el que pongamos esta dirección vamos a ver nuestra web.
Más info
[...]local-en-un-telefono-u-otro-dispositivo/
Integración de animaciones generadas en EDGE con Muse
Editar la configuración de publicación, Activar el «paquete de implementación de Animate», y luego (en Muse) darle a «colocar»
Más info
[...]-animaciones-generadas-en-edge-con-muse/