Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Cómo utilizar la API de Behance para crear una página web de cartera personalizada

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build Your Own Behance-Powered Portfolio.
Styling Our Behance Portfolio Website Using LESS

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Behance es un gran centro para que los creativos compartan y muestren su trabajo y proyectos en curso. A diferencia de Dribbble o Forrst, que, como los veo personalmente, están poblados predominantemente por ilustradores y diseñadores de interfaces de usuario, Behance abarca una amplia gama de campos creativos que incluyen Arquitectura, Motion Graphics, Diseño Automotriz y Moda. Además de esto, Behance también proporciona un conjunto de API para obtener acceso al contenido.

Durante esta breve serie, utilizaremos la API de Behance para crear un sitio web de cartera personal. Obtendremos efectivamente el contenido de Behance y lo mostraremos en nuestra propia página web externa. Pero antes de continuar con la construcción del sitio web, primero debemos investigar cómo Behance gestiona su contenido y ver cómo funciona la API.

Explorando Behance y la API

Behance divide su contenido en módulos; a saber, imagen, incrustar, video, audio y texto. Los datos recuperados de la API no solo incluirán URL de imágenes, sino que también podrán ser videos, URL de audio y texto sin formato. Mostrar todos estos tipos de contenido en nuestro sitio web, sin embargo, complicaría las cosas. Por lo tanto, en este tutorial, nos centraremos en las imágenes y excluiremos el resto para que nuestro código sea más simple.

Nota: en estos tutoriales se supone que tiene una cuenta de Adobe y una cartera de Behance para trabajar. Para los fines de nuestra demostración, usaremos el impresionante portafolio de Mike "Creativemints", quien amablemente aceptó dejarnos usar su trabajo en este caso.

Pantalla de edición de proyectos Behance.

Al trabajar en sus propios proyectos, después de cargar su contenido, Behance le mostrará una ventana de diálogo para cargar la imagen de portada. Esto es como configurar una imagen destacada en WordPress. La imagen que subimos aquí se mostrará como una vista previa de todo el proyecto. En nuestro sitio web utilizaremos la imagen de portada de la misma manera.

La ventana de diálogo para cargar la imagen de portada en Behance.

Una vez que hayamos establecido la imagen de la portada, se nos presentarán opciones para asignar varios atributos, como campos creativos, etiquetas y una descripción del contenido. No abrumaremos nuestro sitio web con demasiados de estos atributos. En este tutorial, además de la imagen de portada y el título, solo mostraremos los atributos del campo creativo.

Selección de campos creativos en Behance.

Clave API de Behance

Necesitamos una clave de API / ID de cliente única para obtener acceso a la API de Behance. Para obtener uno, vaya a Behance Dev, registre su aplicación, complete el nombre de la aplicación, el sitio web y la descripción. El campo Redirigir URI (para OAuth) es opcional, a menos que vaya a crear una aplicación que requiera la autenticación del usuario.

Clave de la API de Behance.

Una vez que tengamos la clave de la API, vaya a los puntos finales de la API de Behance, donde encontrará una lista de todas las formas de acceso a la API. Un punto final de API es la dirección de un servicio web, generalmente solo una simple cadena de URL de HTTP.

En este tutorial, necesitaremos acceder a la información del usuario, los proyectos del usuario. Aquí están los puntos finales de la API para solicitar esta información:

Obtener información de un usuario

La información del usuario incluye el número de ID de usuario, el nombre, la ubicación del usuario, la URL del avatar del usuario y un montón de otros datos.

Obtener proyectos de un usuario

Obtendremos la lista de proyectos publicados del user_id dado. La lista se puede limitar con el parámetro per_page.

Obtener el contenido de un proyecto.

La API devuelve la información del proyecto, incluidos los módulos del project_id dado.

Dado que se puede acceder a la API de Behance a través de HTTP, podemos ver los datos inmediatamente en el navegador. Si está utilizando Chrome o Firefox, le sugiero que instale un complemento del navegador llamado JSONview para ver los datos JSON en un formato más legible.

Datos JSON vistos con JSONview

Límite de API

Tenga en cuenta que Behance limita la API en 150 solicitudes por hora. Si hay demasiadas solicitudes, terminaremos con respuestas vacías y no obtendremos nada. Aquí es cómo se describe el límite en la documentación:

Las solicitudes se limitan a 150 por hora y se comparan con la IP pública del servidor o dispositivo que realiza la solicitud. Si realiza demasiadas solicitudes, recibirá una respuesta vacía con un código de estado 429 (Demasiadas solicitudes).

Por lo tanto, en este tutorial, utilizaremos el almacenamiento sin conexión HTML5 para almacenar los datos sin conexión para minimizar las solicitudes. En lugar de llamar a la API cada vez que cargamos la página, podemos recuperarla del almacenamiento. Consulte los siguientes artículos para obtener más información sobre el almacenamiento sin conexión HTML5:

El plano del sitio web

Antes de construir la estructura de nuestro sitio web, echemos un vistazo al plano del sitio web.

El plano del sitio web

Como puede ver arriba, nuestro sitio web tiene tres secciones: Encabezado, Contenido y Pie de página. El encabezado contiene el avatar de la imagen del usuario, su nombre, sus campos creativos y su ubicación. La sección Contenido muestra el portafolio del usuario con el nombre y los campos creativos. En el pie de página, mostraremos el logotipo de Behance, que ilustra que el sitio web está impulsado por la API de Behance.

Construyendo el contenido y estructura del sitio web

Comencemos nuestro proyecto creando un directorio llamado personal-portfolio y un index.html con marcado HTML5 básico. En el index.html, enlazaremos a las siguientes bibliotecas:

jQuery

En este tutorial, usaremos jQuery principalmente para dos cosas: manipulación de DOM y llamar a la API de Behance a través de su API $.getJSON().

Hoy en día, jQuery se divide en dos versiones, 1.xy 2.x. La versión 1.x tiene como objetivo admitir navegadores más antiguos, es decir, Internet Explorer 8 y versiones anteriores, mientras que la versión 2.x solo se aplica a navegadores más modernos. Asumiremos que ahora vivimos en el mundo donde todos usan navegadores modernos (me siento arriesgado). Entonces, en este tutorial, podemos usar con seguridad jQuery 2.x.

Handlebars.js

Handlebars es un gran motor de plantillas basado en JavaScript. En este tutorial, usaremos los manubrios para crear la plantilla que mostrará los datos recuperados de la API de Behance. Tuts+ tiene dos screencasts gratuitos que pueden ayudarte a comenzar a utilizar Handlebars:

Si no ha trabajado con Handlebars anteriormente, le sugerimos que se tome su tiempo para terminar estos screencasts o leer algunos tutoriales básicos antes de seguir adelante.

En este tutorial, no incluiremos las bibliotecas de JavaScript y CSS en nuestro directorio de proyectos para lograr un tamaño de archivo más pequeño de nuestro proyecto. En su lugar, los vincularemos desde una fuente CDN de CDNJS.com. Abramos nuestro index.html en un editor de código y agreguemos las siguientes bibliotecas dentro de la etiqueta head.

Tenga en cuenta que si sirve index.html a través de un servidor local, debe agregar http:// en cada uno de los enlaces que apuntan a CDNJS.com.

División de las secciones del sitio web en HTML

El formato HTML que define las secciones de nuestro sitio web (Encabezado, Contenido y Pie de página) es bastante simple. Usamos el elemento header HTML5 para el encabezado, un div para envolver el contenido y el elemento footer de HTML5 para el pie de página. A cada uno de estos elementos se les asigna un ID único y una clase para fines de estilo y secuencias de comandos. Aquí está nuestra marca HTML dentro de la etiqueta body en esta etapa.

Creación de plantillas de Handlebars

En esta sección, vamos a construir las plantillas de Handlebars para mostrar el contenido de las secciones de nuestro sitio web. Y comenzaremos con la plantilla para el encabezado, que se rellenará con los datos de los usuarios de este punto final de API www.behance.net/v2/users/{user_id}.

Una plantilla de Handlebars se envuelve con una etiqueta script con un tipo especial text/x-handlebars-template y preferiblemente con una ID única para seleccionar más fácilmente la plantilla, como así.

Dentro de la etiqueta script, estableceremos el marcado para el contenido del encabezado junto con las clases para propósitos de estilo. También incluimos la clase de Foundation Icon Fonts 3, que se inicializa con fi-, para mostrar los iconos. Por último, el marcador de posición de contenido en forma de una expresión de Handlebars.

Cada uno de estos marcadores de posición corresponde a las claves JSON recuperadas de la API. El {{user.display_name}}, por ejemplo, mostrará el nombre para mostrar del usuario. El display_name es la clave real que contiene el valor del nombre. Pero como está anidado bajo el objeto user, nos referimos a él como user.display_name. Lo mismo se aplica a los otros marcadores de posición en esta plantilla, así como a las plantillas que siguen.

Nombre para mostrar del usuario en JSON

A continuación, crearemos la plantilla para mostrar el portafolio, y esta es la última plantilla de Handlebars que crearemos para nuestro sitio web. Para comenzar, creamos un nuevo div con una ID portfolio dentro de la sección de Contenido. Creamos div para envolver el portfolio, en caso de que necesitemos agregar más contenido en el futuro. Luego agregamos la etiqueta de script que contendrá la plantilla. En este punto, la estructura HTML de nuestro contenido de cartera debe aparecer como sigue:

Aquí puede ver que los datos recuperados de www.behance.net/v2/users/{user_id}/projects devuelven una matriz que contiene la cartera del usuario. Para mostrar una matriz, tendremos que recorrer cada elemento de la matriz usando los {{each}} de Handlebars para mostrarla en la plantilla.

Una serie de proyectos recuperados de la API de Behance

Pondremos la cartera en una lista desordenada. Entonces, agreguemos un elemento ul y envolvamos cada elemento li con {{#each}}...{{/each}}, de la siguiente manera:

A continuación, vamos a exponer el contenido de cada elemento. Como mencionamos anteriormente, mostraremos la portada de la imagen, el nombre y los campos creativos. Los incluiremos dentro del li con un nuevo div con la clase, portfolio-content.

Tenga en cuenta que hay algunos ayudantes condicionales de Handlebars, como {{#if this.covers.[404]}}, en esta plantilla. Usamos el asistente condicional para ayudarnos a referirnos al tamaño de imagen de portada correcto. Es posible que la imagen no siempre esté a 404 px (que es el tamaño más alto establecido para la imagen de portada), solo puede estar disponible en un tamaño más bajo. Aquí puede ver que Behance recortó la imagen en estos tamaños: 404px, 230px, 202px y 115px.

Tamaño de la imagen

El formato HTML en el pie de página es realmente simple. Agregaremos dos etiquetas de párrafo: una contendrá "Powered by" y la última contendrá un enlace que apunta a Behance. Añadimos la clase fi-social-behance en la etiqueta a para mostrar el logotipo de Behance de Foundation Icon Fonts.

En esta etapa, hemos completado la construcción de estructuras HTML que configuran el contenido de nuestro sitio web. Sin embargo, cuando lo abrimos en el navegador no veremos nada todavía. Esto se debe a que debemos realizar una solicitud a la API y luego compilar los datos junto con la plantilla Handlebars.

Llamando a la API de Behance y compilando la plantilla

Vamos a crear una etiqueta script para contener nuestro JavaScript. También crearemos dos variables para contener la clave de la API de Behance y la ID de usuario. Como se mencionó anteriormente, usaremos la cartera de "Creativemints".

Debajo de estas dos variables, agregamos la siguiente función. Esta función llamará a la API de usuario de Behance y compilará la plantilla de Handlebars para el encabezado.

Vamos a examinar este código con más detalle. Primero, almacenamos la API de usuario de Behance en una variable de behanceUserAPI. Observe que hemos insertado el parámetro callback= dentro de él. Esta adición evita el error Not Allowed Access causado por la política del mismo origen.

Una palabra en sessionStorage

Anteriormente en este tutorial mencionamos que la API de Behance está limitada a 150 solicitudes por hora, y por lo tanto decidimos usar el almacenamiento sin conexión HTML5 para almacenar los datos. En esta función, hemos utilizado sessionStorage. La razón detrás del uso de sessionStorage para almacenar los datos del perfil de usuario es que el usuario puede cambiar su perfil en cualquier momento, sin embargo, no podemos predecir cuándo. Entonces, en lugar de usar localStorage que almacenará los datos de forma persistente, usaremos sessionStorage que eliminará los datos una vez que hayamos salido de la pestaña o del navegador. De esa manera, una vez que abramos el navegador y volvamos a acceder al sitio web, extraerá datos nuevos de la API de Behance.

El sessionStorage, sin embargo, solo puede contener cadenas o texto plano. Entonces, como puede ver en la función anterior, hemos usado JSON.stringify(); para convertir JSON en una cadena antes de almacenarla en sessionStorage. Luego, extraeremos los datos con JSON.parse() para formatearlos de nuevo a JSON.

También hemos creado una función llamada setUserTemplate() para compilar la plantilla de Handlebars y agregar el contenido mediante jQuery .html(). Ejecutamos esta función bajo esta condición: si los datos en sessionStorage están disponibles, inmediatamente ejecutamos la función, de lo contrario tendremos que llamar a la API usando $.getJSON() primero y luego ejecutarla.

Además, puede ver sessionStorage en la pestaña Recursos en Chrome DevTools y en el navegador basado en Webkit.

sessionStorage en Chrome DevTools

Compilando el contenido

Luego, agregamos la siguiente función para compilar la plantilla de cartera en el Contenido. Esta función es muy parecida a la función anterior para el Encabezado, excepto por la variable perPage y el parámetro per_page= que usaremos para limitar la cantidad de elementos de contenido recuperados de la API.

Ahora, cuando veamos el navegador, ya deberíamos ver el perfil de usuario así como la cartera. Pero aún no están diseñados.

La próxima vez..

En la siguiente parte de esta serie, diseñaremos el contenido de nuestro portafolio, brindándonos una página de portafolio dinámica y receptiva. ¡Hasta entonces!

Advertisement
Advertisement
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.