Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Bootstrap
Webdesign

Construyendo un simple portafolio basado en Instagram con Bootstrap

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Henry Reyes (you can also view the original English article)

En este tutorial yo voy a construir paso a paso un portafolio simple basado en Instagram tal cual lo diseñó Tomas Laurinavicius en un tutorial anterior.

Tomas ha hecho un gran trabajo al hacer este diseño simple, elegante y funcional, Así que pienso que lo justo es construirlo de la misma manera. Para hacer nuestra vida más fácil vamos a confiar en algunas herramientas y librerías, empecemos dándole un vistazo.

Herramientas para el trabajo

Hay unas cuantas cosas que necesitamos preparar antes de empezar, por ejemplo:

Primero que todo, necesitarás tener Sass en marcha en tu computadora. La forma más fácil de hacerlo es usando una de las maravillosas aplicaciones disponibles para hacer el compilado. Yo estoy usando Koala la cual es multiplataforma y es gratis, así que es una muy buena opción para ponerte en funcionamiento rápidamente. Hay varias alternativas tales como Scout, Prepros y Compass app. Todas ellas proveen prácticamente la misma funcionalidad, así que la decisión es tuya!

El siguiente paso es Bootstrap. Vamos a usar Bootstrap en un nivel muy básico, para manejar algunos de los elementos adaptables (responsive) de la página. Nosotros específicamente queremos descargar la versión Sass así que podemos incluirlo en nuestra hoja de estilos y hacer uso de las variables disponibles. A continuación descarga la última versión.

Casi listo! Ahora necesitamos conseguir una copia de Instafeed.js la cual manejará la tarea de tomar las fotos de Instagram. Vale la pena señalar que para lograr obtener fotos desde instagram de forma dinámica necesitas proveer al plugin con un ID de cliente el cual puede ser generado al entrar en una cuenta de Instagram y rellenar un formulario en la sección de desarrolladores.

Por último, debemos descargar la última versión de Modernizr así que, si es necesario, podemos seleccionar características para ciertos navegadores y algunas complementos HTML5 para navegadores más antiguos. Esto no es estrictamente necesario pero me gusta incluirlo en proyectos solo para estar seguro.

Ahora que tenemos estos archivos ya podemos empezar a desarrollar!

Archivos y estructura de carpetas

Necesitamos crear algunos archivos y carpetas para nuestro proyecto, así que a continuación crea lo siguiente en el directorio de la ruta del proyecto.

  • css/
  • images/
  • js/
  • index.html

Este es nuestro bloque de inicio. Siguiente, encuentra el archivo de Bootstrap que descargaste hace un momento y extráelo en un lugar donde lo puedas encontrar fácilmente. Dentro de la carpeta extraída deberás estar una carpeta llamada assets (activos). Abre la carpeta y verás algo similar a lo siguiente:

Copia el directorio fonts en la ruta del proyecto junto con las otras carpetas que habíamos creado. Abre la carpeta javascripts y copia el archivo bootstrap.js dentro de la carpeta js  de nuestro proyecto. Por último, abre el directorio stylesheets y copia el archivo bootstrap.scss y la carpeta bootstrap dentro de la carpeta css de nuestro proyecto. Nuestros archivos y carpetas deberían lucir así...

Buen trabajo! Ahora, encuentra los archivos instafeed.min.js y Modernizr, los cuales tu descargaste hace unos momentos y cópialos dentro de la carpeta js. Solo necesitamos arreglar unas cositas más para empezar a desarrollar nuestro diseño.

Configuración de Sass

Ahora llegó el momento de configurar nuestro proyecto en la aplicación Sass que has elegido usar. En Koala basta con arrastrar la carpeta dentro de la ventana de la aplicación. Creo que el proceso es bastante similar para las demás aplicaciones. La siguiente cosa que yo acostumbro hacer es observar las opciones para compilar en Sass, y si está disponible, selecciono usar Autoprefixer. Esta característica analizará nuestro archivo Sass y agregará los prefijos propietarios (vendor prefixes) automáticamente, así no tendremos que molestarnos en escribirlos nosotros mismos. Siéntete libre de experimentar con las características que tu aplicación Sass provee para logres la mejor configuración para ti. Me gusta mantener las cosas simples y usualmente solo habilito la opción Autoprefix, Expanded (expandido) como estilo de salida y Compressed en producción.

Agregando Archivos

Abre el proyecto en cualquier editor que uses para agregar unos cuantos archivos.

Antes que nada, dentro del directorio css agrega un archivo llamado style.scss. Entonces dentro de la carpeta js agrega un archivo llamado app.js.

Asegúrate de actualizar tu aplicación Sass para que cargue los archivos nuevos automáticamente. Algunos lo hacen automáticamente, pero es mejor chequear y actualizar manualmente sí es necesario.

Esto es todo lo que necesitamos organizar por ahora. Podemos empezar a desarrollar el portafolio!

Empezando a construir

Abre index.html e introduce (o copia y pega) la siguiente base HTML:

Ya tenemos nuestro primer bloque de código! Lo explicaré brevemente. 

La sección <head>  contiene la importante etiqueta viewport  así nuestros media queries (consulta de medios) funcionarán correctamente. Ahora, le damos un titulo a la página e incluimos una etiqueta <link> para varias fuentes de Google (Google fonts) que queremos usar. Las fuentes usadas aquí son las mismas que usó Tomas en el diseño. La línea siguiente puede parecer extraña porque aún no hemos creado un archivo style.css , pero ese archivo será generado por nuestro compilador Sass. Por último, incluimos a Modernizr.

El elemento <body> contiene cuatro otros elementos que sujetan cada una de las partes del diseño. He nombrado las <section> (o secciones) con nombres descriptivos con el fin de que se entienda claramente para que serán usadas.

En referencia a los archivos JavaScript

Agrega el siguiente fragmento de código debajo de la sección footer-bottom:

Estas etiquetas <script> apuntan a varias librerías JavaScript incluyendo jQuery desde Google's CDN (red de entrega de contenido) la cual es requerida por Bootstrap.

Estilos

Ya tenemos lista una base sólida así que ahora trabajemos un poco en nuestro archivo style.scss.

Acabamos de declarar algunas variables que pueden ser usadas luego en nuestras hojas de estilo (stylesheet). Las primeras variables son relacionadas a fuentes. Es aquí donde vienen a colación las fuentes de Google que incluimos anteriormente y damos una fuente de respaldo a cada una por si no carga la fuente predeterminada.

Luego de esas variables tenemos las correspondientes a los colores, las cuales fueron seleccionadas desde el diseño. Esta es una razón por la que amo a Sass, ya que puedo establecer los colores aquí y no preocuparme por recordarlos o copiar los valores hexadecimales cada vez que los necesite.

Por último, para nuestras variables personalizadas tenemos simples márgenes (margin) y rellenos (padding). En lo personal, me gusta agregarlos aunque no los uso siempre. Es bueno tener un valor base para trabajar puesto que nos da la habilidad de hacer cambios uniformes a los elementos que usan las variables.

La próxima sección es donde incluimos a Bootstrap, pero antes de hacerlo vamos a establecer la fuente principal de Bootstrap $font-family-sans-serif igual a la variable que creamos hace un momento $main-font. Es decir que cuando Bootstrap sea compilado usará a $main-font y no a su fuente predeterminada.

La declaración @import  no incluye .scss al final del archivo ya que no es necesario cuando incluimos otros archivos Sass. Sass es lo suficientemente inteligente para buscar y encontrar el archivo correcto. Guarda el archivo y, con suerte, tu aplicación Sass notará que has guardado un archivo Sass y compilará style.css.

Más Estilos

Vamos a continuar agregando más estilos:

Aquí usamos el selector universal * para establecer todo como position: relative  así no tendremos sorpresas cuando usemos elementos con posiciones absolutas. De igual manera, también es muy práctico establecer universalmente la propiedad box-sizing como border-box así podemos usar porcentajes como medidas de ancho y no preocuparnos porque ningún padding influya en la estructura de la página.

Luego nosotros declaramos el tamaño y el color predeterminado de la fuente para <body> y agregamos valor a la propiedad height del elemento <header>.

Eso es todo para nuestro archivo Sass por ahora. Regresemos a nuestro archivo index.html para empezar a trabajar en el <header>.

Alimentando nuestro Header

El header de este diseño no es complicado en cuanto a diseño. La estructura del código con la que trabajaremos es la siguiente:

Esto debe ir dentro de nuestras etiquetas <header>. Notarás que la etiqueta de imagen hace referencia a una imagen que aún no existe. Necesitas cortar y sacar la imagen desde el PSD. No entraré en detalles sobre como hacer eso en este tutorial, pero si necesitas ayuda con este paso entonces revisa este corto tutorial.

El resto del código del <header> comprende 3 elementos div que contienen el nombre, los títulos y enlaces a redes sociales. Yo he aplicado algunas clases a estos elementos las cuales vamos a usar próximamente en nuestro archivo Sass.

Estilos para el Header

Empecemos por agregar unas cuantas líneas de código dentro de la declaración de la variable header.

Esta declaración debe estar anidada dentro de la sección header de nuestro archivo Sass justo debajo de las declaraciones del propio header.

Fijar la imagen de fondo

Aquí notarás que hemos declarado la posición de la etiqueta img como fixed (fija). Esto significa que la imagen se quedará en la misma posición mientras el usuario se desplace hacia abajo, creando así una sensación de profundidad. La idea es que el contenido se desplace hacia arriba sobre la imagen contenida en el header.

Media Query (consulta de medios)

Entonces tenemos el primer uso de nuestras variables de tamaño de pantalla. Aquí decimos: en pantallas grandes haz que la imagen rellene el ancho completo de el navegador y lo posicione de vuelta a la esquina superior izquierda. Es importante destacar que debemos reiniciar el margen para que la imagen no sea tirada a la izquierda.

Demos un primer vistazo en el navegador a nuestro trabajo!

Vamos a continuar...

Aquí definimos la posición y estilo de fuente de los elementos name titles. Necesitamos usar un media query en el elemento titles para empujarlo un poco más abajo en las pantallas más grandes. Luego actualiza el navegador para ver los cambios.

Ya empieza a lucir mejor! Ahora organicemos un poco más los encabezados.

Lo principal para tomar en cuenta ahora es el estilo del elemento span. Estamos usando la etiqueta span  para envolver el heading (encabezado) principal. Esto nos permite apuntarlo mejor en el CSS y, como hemos hecho aquí, cambiar su estructura. En la versión móvil necesitamos que sea un elemento en bloque que se acomode debajo, pero que en pantallas grandes se muestre a lo largo de la pantalla como texto normal. Ahora luce mucho mejor...

Fuente de lujo

Ahora vamos a agregar un estilo para el nombre en la esquina superior izquierda. Coloca el siguiente código al final del archivo Sass, fuera del bloque de código de header.

Estamos aplicando fancy font a cualquier elemento que tenga esta clase. Así es como podemos reutilizarlo cuando queramos, ya que no esta limitado a ningún elemento en particular.

Iconos de Redes Sociales

Ahora pondremos nuestra atención en los iconos de sociales, en este caso, implicará hacer sprites para pantallas de resolución normal y de alta definición (Retina).

Dirígete a Iconfinder y toma cada uno de los iconos en el diseño. Es aconsejable seleccionar tamaños más grandes de los necesitamos para no tener inconvenientes cuando se muestren en pantallas de alta resolución. Yo siempre opto por el tamaño 256px.

En tu programa de edición gráfica (por ejemplo Photoshop) crea un archivo nuevo de tamaño 152px por 52px. Arrastra dentro del archivo los iconos y modifica su tamaño hasta que cada uno tenga 48px por 48px. Los iconos estan en color negro, sin embargo nosotros los necesitamos en color blanco, así que aplica un cambia su color.

Ahora necesitamos posicionarlos. Tendremos 2 pixeles de espacio entre cada icono, así que mueve el primero hacia el extremo izquierdo y luego distácialo 2 pixeles del borde. Igualmente distancíalo 2 pixeles del borde superior. Coloca los próximos iconos a 2 pixeles de distancia del icono anterior y también a 2 pixeles del borde superior. Deberías tener algo como esto:

Esta será nuestra versión Retina. Ignora el fondo negro, lo agregué solo para hacer contraste y que pudiéramos ver los iconos en la imagen.

Usando la función Save for Web o (guardar para web) de Photoshop (o el equivalente en tu aplicación, guarda esta imagen con el nombre de archivo social-sprite@2x.png. Asegúrate de colocarlo en la carpeta de imágenes de nuestro proyecto. Ahora tenemos que modificar nuestro "sprite" para que su tamaño sea de resolución estándar. Podemos hacer esto directamente en Photoshop en el cuadro de diálogo de Save for Web. Lo importante es que debemos cambiar su tamaño a 76px por 52px. Guarda el archivo nuevamente, pero con social-sprite.png  como nombre y colócalo en la carpeta de imágenes también.

Ya finalizada esta parte, ya tenemos nuestros sprites así que escribamos un poco de código para usarlos! Introduce el siguiente código dentro de la sección header justo después de los estilos para h1 h2.

Wow, eso luce complicado, aunque en realidad no lo es, lo digo en serio! Para empezar posicionamos el elemento .social en la esquina superior derecha.

Siguiente, aplicamos algunos estilos a las etiquetas <a> para establecer la altura (height) y ancho (weight) de cada uno y remover el texto de la pantalla al usar un text-indent mayor. También configuramos la opacity  (opacidad) básica a 0.8 que cambia 1.0 al hacer hover (mouseover). Esto da un efecto sutil que luce muy bien.

La próxima sección es para nuestros sprites. Necesitamos dejarle saber a las pantallas con alto DPI donde encontrar los activos o archivos de mayor resolución y luego el media query se encargará. Ahora tenemos que dar valores adecuados a la propiedad background-size para que la imagen se reduzca al tamaño "correcto". Ahora necesitamos declarar el background-position para cada icono. Guarda, Guarda, Guarda y actualiza!

Como puedes ver nuestro estilo fancy-font está funcionando en el nombre (name) y nuestros iconos lucen genial. Buen trabajo!

La próxima sección se tratará de el contenido principal donde utilizaremos a Instafeed.js para accesar la API de Instagram y tomar imágenes para mostrarlas de forma dinámica.

Instagram Feed

Empezaremos por agregar un poco de código a index.html , abre el archivo, luego copia y pega lo siguiente dentro de la etiqueta <section class="instagram-wrap">:

Aquí veras que he escrito el código de cada sección que necesitamos para las fotos provenientes de Instagram. El código para esto no será cargado desde el HTML sino desde el Javascript que escribiremos para Instafeed.js. No te preocupes por eso ahora, en este momento estamos enfocados en darle el estilo correcto a esta área.

Cuadrícula de Bootstrap

Una cosa que podrías notar, si has utilizado Bootstrap anteriormente, es que estamos usando algunas clases de Bootstrap. Hemos usado las clases col-xs-xx, col-sm-xx, col-md-xx, col-lg-xx para ajustar los elementos a los diferentes tamaños de pantallas. La forma en la que la cuadrícula de Bootstrap funciona, en pocas palabras, es a través de contenedores, filas y columnas. Cada fila  debe estar dentro de un contenedor y cada columna debe estar dentro de una fila. También debe haber un total de doce columnas en cada fila. Aquí es donde las clases como col-xs-12 vienen al caso. El tamaño de la pantalla xs debería abarcar doce columnas las cuales, visualmente en la pantalla, lucirán como una sola gran columna.

Del mismo modo, si utilizamos col-xs-12 col-sm-6 col-md-3  como clases en un elemento, este ordenaría al elemento ocupar todo las columnas en la resolución de pantalla xs , dos columnas en el tamaño sm y cuatro columnas en el tamaño de pantalla md. Es un poco confuso al principio, pero si prácticas y analizas el nombre de cada clase se volverá intuitivo y fácil de usarlas eventualmente.

you can learn more about Bootstrap in the free Tuts course Bootstrap 3 for Web Design
Aprende más sobre Bootstrap en el curso gratuito de Tuts+ Bootstrap 3 para diseño web .

Otro punto a destacar es el uso de test_img.jpg  el cual aún no existe. Esta es una imagen de relleno que creé para usar en la estructura. Siéntete libre de crear una o usar la que incluí en los archivos del tutorial, solo no olvides agregarla en la carpeta de imágenes del proyecto.

Estilos de Instagram

Ahora agreguemos algunos estilos:

Tendrás que colocar el código justo después del bloque de header en el archivo Sass principal. El aplica algunas propiedades de color de fondo y estilos para fuentes. Guarda el archivo Sass y observa los cambios en el navegador.

Esa pequeña cantidad de código ha hecho una gran diferencia. Necesitamos hacerlo aun mejor, así que volvamos al archivo Sass y también agreguemos el siguiente código:

Esto tiene que ir justo después de la declaración de h3 dentro de .instagram-content. Hagamos esto paso a paso. Demos a nuestro .photo-box  un poco de margen inferior para que cada uno este separado cómodamente. No tenemos que preocuparnos por espacio hacia la izquierda ni a la derecha porque esto es manejado por Bootstrap por defecto. Cerciórate que toda imagen en .image-wrap sea 100% de ancho para que pueda escalar con el navegador. El elemento .likes tiene que estar posicionado en la esquina inferior izquierda de la caja de la imagen y el texto debe ser blanco sobre un fondo negro semi-transparente.

Por último, los estilos para .description. Las cuatro propiedades finales permiten a la caja ocultar cualquier texto que sobresalga en una forma elegante agregándole puntos suspensivos al final. Lo bueno de hacer esto con CSS es que cuando las cajas cambian de tamaño se mostrará mayor o menor contenido, pero los puntos suspensivos harán su trabajo cuando sea necesario. El soporte del navegador también es muy completo.

Se ve genial! Pienso que el próximo paso debe ser reemplazar nuestro HTML con las imágenes provenientes de Instagram con la ayuda de Instafeed.js.

Usando Instafeed.js

La forma en que este plugin funciona lo hace bastante sencillo para cualquier persona que quiera agregar publicaciones de Instagram a su página web. Sin embargo, necesitarás un ID de cliente de Instagram para usarlo. Puedes conseguirlo accesando a una cuenta de Instagram y visitando la sección de desarrolladores para configurar tu ID de cliente.

Una vez lo consigas, ya puedes agregar el siguiente código al archivo app.js:

Te explicaré lo que está sucediendo aquí:

Primeramente, un poco de jQuery. Empieza con la función document ready (versión abreviada) para que nada se active hasta que estemos listos.

En segundo lugar, declara una variable como feed y establece que su valor sea una nueva instacia de Instafeed.

Siguiente, suple a Instafeed con algunas opciones para controlar los datos que devuelve:

  • clientIdEl ID de cliente que obtuviste en Instagram.
  • targetEl ID del elemento en la página que deseas rellenar las imágenes.
  • getEl modo en el que Instafeed opera. Usando aquí 'tagged' para que Instafeed sepa que estamos buscando por nombre de etiqueta.
  • tagNameEl nombre de la etiqueta que va ser buscado.
  • linksEnlace a la procedencia de las imágenes en Instagram
  • limit - Limite para la cantidad de fotos cargadas. Util para paginación.
  • sortByComo organizar las imágenes cargadas. Organízalas por most-recent (más recientes) en nuestro proyecto.
  • resolutionEl tamaño de las fotos cargadas.
  • templateEl HTML que usaremos para renderizar las imágenes en la página. Usaremos la estructura que creamos hace un rato. Instafeed utiliza curly braces (llaves) para indicar donde se insertan las diversas propiedades de la imagen.

Por último, corre el script!

Si guardas el archivo y actualizas el navegador deberías ver algo similar a esto:

Si tienes algunos problemas asegura que tu ID de cliente y el código estén correctos. Si utilizas lo que está provisto en los archivos del proyectos todo debería estar bien. Tu deberías ver ocho imágenes cargadas desde Instagram mostrando los Likes y las descripciones.

Poniendo las cosas en orden

Ahora necesitamos organizar un poco nuestro HTML, ya que tenemos la misma plantilla que hicimos más temprano. Cambia de nuevo al archivo index.html y encuentra el siguiente código...

Ya sea eliminar o ignorarlo. Decidí ignorarlo así puedo hacer referencia a él después si fuera necesario.

El Footer

De vuelta en index.html agrega el siguiente código dentro del elemento <footer>.

Como puedes ver, estamos usando más clases de Bootstrap aquí. Esta vez le dice al elemento que se expanda a lo largo de las 12 columnas en cualquier resolución.

Estilos para el Footer

Agreguemos también los estilos para esta sección.

Otro bloque de código que luce complicado! De nuevo, no es lo que parece. En realidad se trata de establecer algunos colores, tamaños de fuentes y espaciado entre letras. Estamos usando algunos media queries para hacer que elementos adopten diferentes posiciones para diferentes tamaños de pantalla. Notablemente, .contact-now-btn necesita dos niveles de media query para ajustar su tamaño, terminando en su forma más pequeña en las pantallas grandes. Si tu guardas los archivos y actualizas el navegador tu deberías ver algo como esto...

Terminemos con esto, hagamos la parte final la cual llamaré .footer-bottom.

Footer Bottom (parte inferior)

Agrega algún texto a esa sección en el HTML. Entonces abre el archivo Sass y agrega los siguientes estilos:

Esto puede ser colocado debajo de los estilos de footer. Estamos usando letter-spacing para dar un ligero espacio entre letras de cada palabra. Guarda el archivo y actualiza el navegador.

Hemos terminado! La página luce genial en móviles y en el computador y hemos logrado cargar fotos directamente desde Instagram usando Instafeed. Bien hecho!

Conclusión

Lo que me encanta de esta página es que la podemos adaptar a cualquier portafolio. Pudimos haber sido más aventureros con Bootstrap y Sass pero a menudo no resulta necesario si lo básico funciona sin complicaciones. Lo que tenemos aquí es una base brillante que puese ser expandida o adaptada.

Espero que hayas seguido los pasos sin problemas y hallas aprendido algo nuevo en el camino. Siéntete libre de dejar tus pensamientos, sugerencias o posibles mejoras en los comentarios. Por ejemplo, hay un extraño fallo en la forma que Safari renderiza la página si te desplazas muy rápido - sugerencias de que es lo que sucede son bienvenidas. Gracias por seguir este tutorial.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.