Dribbble es un popular sitio web dedicado para las diseñadores, donde podrán compartir el portafolio de diseño en los proyectos WIP, diseños, maquetas, e incluso los freebies. A cambio obtendrás comentarios y críticas por parte de otros diseñadores, lo cual es bueno para impulsar su carrera de diseñador hasta el siguiente nivel.
Si deseas personalizar la forma en exhibir tu portafolio, puedes mostrar tus trabajos bajo tu propio dominio. Para ayudarte con esto, puedes probar Dribbbox.
Dribbbox es una librería que nos facilita el mostrar nuestro portafolio en dribbble bajo nuestro propio dominio, lo cual hará sin ningún problema. A continuación veras cómo se puede realizar la configuración de Dribbbox para mostrar todo tu trabajo de diseño.
Como Instalar Dribbbox
Asumiendo que cuentas con tu propio dominio y una cuenta de servidor; como mínimo contar con un hosting compartido. De lo contrario, puedes ejecutar un servidor local si no cuentas con un servidor en la web.
Descarga el paquete zip, y cargue el contenido en el servidor. Incluya el index.html, los config.js, y las carpetas necesarias, a continuación veras la estructura de los archivos.
Abra el archivo config.js y especifique el nombre de usuario que usas en Dribbble, y así poder usar tu portafolio almacenado en el servicio. La configuración debería ser algo como lo siguiente:
1 2 3 4 5 | dribbbox.config = { dribbble_username : "tu_nombre_de_usuario", short_description : "Una descripción", email_address : "Tu correo electrónico" } |
dribbbox.config = { dribbble_username : "tu_nombre_de_usuario", short_description : "Una descripción", email_address : "Tu correo electrónico" }
Una vez guardado los cambios, debes de refrescar tu pagina, veras que el portafolio almacenado en Dribbbox ha sido cargado en tu servidor.
Tu Portafolio En Dribbbox
La configuración es simple. Cuentas con tres columnas. Tus datos de contacto se encuentran en el extremo izquierdo en un barra estática. Tus muestras de dribbble están en la columna desplazable del medio, y a la derecha, es donde los visitantes pueden ver tus proyectos, uno a la vez. La configuración es perfecta, aunque no conseguirás los comentarios y me gusta que usualmente podrías recibir en la plataforma de Dribbbox, tampoco podrán compartir tus trabajos :S
Dribbbox ha sido optimizado para verse perfectamente en los dispositivos móviles. Cuando el sitio web se ve en el móvil, el diseño, así como el código HTML del árbol DOM serán reconstruidos a través de mobile.js. Especifique el ancho de la ventana gráfica de los cuales mobile.js debe tener lugar en el index.html.
1 2 3 4 5 | (function() { var s = document.createElement("script") s.src = "assets/js/" + (matchMedia("(max-width: 414px)").matches ? "mobile" : "desktop") + ".js" document.head.appendChild(s) })() |
(function() { var s = document.createElement("script") s.src = "assets/js/" + (matchMedia("(max-width: 414px)").matches ? "mobile" : "desktop") + ".js" document.head.appendChild(s) })()
Finalmente
Dribbbox es una librería bastante útil para mostrar tus trabajos alojados en dribbble, desde tu propio nombre de dominio. Es muy intuitivo para trabajar, incluso si no sabes JavaScript; sólo tiene que añadir tu nombre de usuario y (opcionalmente) tu dirección de correo electrónico, y ya está todo. Si no te gusta la presentación por defecto, puedes personalizarla aún más a través del CSS.