Behance is een geweldige hub voor creatieven om hun werk en lopende projecten te delen en te laten zien. In tegenstelling tot Dribbble of Forrst die - zoals ik ze zelf zie - voornamelijk worden bevolkt door illustratoren en UI-ontwerpers, omvat Behance een breder scala aan creatieve gebieden, waaronder architectuur, motion graphics, automotive design en mode. Daarnaast biedt Behance ook een reeks API's om toegang te krijgen tot de inhoud.

Tijdens deze korte reeks gaan we de Behance API gebruiken om een ​​persoonlijke portfoliowebsite te bouwen. We zullen effectief inhoud van Behance halen en weergeven op onze eigen externe webpagina. Maar voordat we verder gaan met het bouwen van de website, moeten we eerst onderzoeken hoe Behance de inhoud beheert en zien hoe de API werkt.

Verkennen van Behance en de API

Behance verdeelt zijn inhoud in modules; namelijk beeld, embed, video, audio en tekst. Gegevens die worden opgehaald uit de API bevatten niet alleen afbeeldings-URL's, maar kunnen ook video-, audio-URL's en platte tekst zijn. Het weergeven van al deze soorten inhoud op onze website zou echter dingen compliceren. Daarom zullen we in deze zelfstudie focussen op afbeeldingen en de rest uitsluiten om onze code eenvoudiger te houden.

Notitie: Deze tutorials gaan ervan uit dat je een Adobe-account en een Behance-portfolio hebt om mee te werken. Voor de doeleinden van onze demonstratie gebruiken we de verbluffende portfolio van Mike "Creativemints", die zo vriendelijk is om ons zijn werk in dit geval te laten gebruiken.

Behance projectbewerkingsscherm.

Wanneer u aan uw eigen projecten werkt, toont Behance na het uploaden van uw inhoud een dialoogvenster om de omslagafbeelding te uploaden. Dit is net als het instellen van een uitgelichte afbeelding in WordPress. De afbeelding die we hier uploaden, wordt weergegeven als een voorbeeld van het hele project. Op onze website zullen we ook de omslagafbeelding gebruiken.

Het dialoogvenster om de omslagafbeelding te uploaden in Behance.

Nadat we de omslagafbeelding hebben ingesteld, krijgen we de mogelijkheid om verschillende kenmerken toe te wijzen, zoals creatieve velden, tags en een beschrijving van de inhoud. We zullen onze website niet overstelpen met te veel van deze attributen. In deze zelfstudie laten we, behalve de omslagafbeelding en de titel, alleen de kenmerken van het creatieve veld zien.

Selectie van creatieve velden in Behance.

Behance API Key

We hebben een unieke API-sleutel / Client-ID nodig om toegang te krijgen tot de Behance-API. Om er een te krijgen, ga je naar Behance Dev, registreer je je app, vul je de Application Name, Website en Description in. het URI-omleidingsveld (voor OAuth) is optioneel, tenzij u een app gaat maken die gebruikersverificatie vereist.

Behance API-sleutel.

Zodra we de API-sleutel hebben, gaat u naar Behance API-eindpunten, waar u alle manieren ziet om toegang te krijgen tot de API. Een API Endpoint is het adres voor een webservice, meestal slechts een eenvoudige HTTP-URL-tekenreeks.

In deze zelfstudie moeten we toegang krijgen tot Gebruikers informatie, de projecten van de gebruiker. Hier zijn de API-eindpunten om deze informatie aan te vragen:

Krijg informatie van een gebruiker

http://www.behance.net/v2/users/user_id?api_key=the_api_key

De gebruikersinformatie omvat het gebruikers-ID-nummer, de naam, de locatie van de gebruiker, de URL van de gebruikersavatar en een heleboel andere gegevens.

Krijg de projecten van een gebruiker

http://www.behance.net/v2/users/user_id/projects?api_key=the_api_key

We zullen de lijst met gepubliceerde projecten van het gegeven krijgen gebruikersnaam. De lijst kan worden beperkt met per pagina parameter.

Verkrijg de inhoud van een project

http://www.behance.net/v2/projects/project_id?api_key=the_api_key

De API retourneert de projectinformatie inclusief modules van het gegeven project_id.

Omdat de Behance-API toegankelijk is via HTTP, kunnen we de gegevens onmiddellijk in de browser zien. Als u Chrome of Firefox gebruikt, zou ik u aanraden een browserplug-in genaamd JSONview te installeren om de JSON-gegevens in een beter leesbaar formaat te bekijken.

JSON-gegevens bekeken met JSONview

API-limiet

Houd er rekening mee dat Behance de API beperkt door 150 verzoeken per uur. Als er te veel verzoeken zijn, zullen we eindigen met lege antwoorden en zullen we niets krijgen. Hier is hoe de limiet wordt beschreven in de documentatie:

Verzoeken zijn beperkt tot 150 per uur en worden gemeten aan de publieke IP-adressen van de server of het apparaat dat de aanvraag doet. Als u te veel verzoeken indient, ontvangt u een leeg antwoord met een 429 (te veel verzoeken) statuscode.

In deze zelfstudie gebruiken we HTML5 offline opslag om de gegevens offline op te slaan om de aanvragen te minimaliseren. In plaats van de API te bellen telkens wanneer we de pagina laden, kunnen we deze ophalen uit de opslag. Raadpleeg de volgende artikelen voor meer informatie over HTML5 offline opslag:

• Snelle tip: leren over HTML5 lokale opslag
• Het verleden, het heden en de toekomst van lokale opslag voor webapplicaties

De Blueprint van de website

Voordat we onze websitestructuur gaan bouwen, nemen we een kijkje in de blauwdruk van de website.

De Blueprint van de website

Zoals u hierboven kunt zien, heeft onze website drie secties: koptekst, inhoud en voettekst. De kop bevat de avatar, naam, het creatieve veld en de locatie van de gebruiker. Het gedeelte Inhoud toont het portfolio van de gebruiker met de naam en de creatieve velden. In de voettekst zullen we het Behance-logo laten zien, waarmee wordt geïllustreerd dat de website wordt aangedreven door de Behance-API.

Inhoud en structuur van de website opbouwen

Laten we ons project starten door een map genaamd te maken personal-portfolio en een index.html met standaard HTML5-markeringen. In de index.html zullen we linken naar de volgende bibliotheken:

jQuery

In deze zelfstudie gebruiken we jQuery voornamelijk voor twee dingen: DOM-manipulatie en het aanroepen van de Behance-API via de $ .GetJSON () API.

Tegenwoordig is jQuery opgesplitst in twee versies, 1.x en 2.x. Versie 1.x is bedoeld om oudere browsers te ondersteunen, namelijk Internet Explorer 8 en lager, terwijl versie 2.x alleen geschikt is voor modernere browsers. We gaan ervan uit dat we nu leven in de wereld waar iedereen moderne browsers gebruikt (ik voel me riskant). In deze tutorial kunnen we dus veilig jQuery 2.x gebruiken.

Handlebars.js

Handlebars is een geweldige JavaScript-gebaseerde templating-engine. In deze zelfstudie gebruiken we Stuur om de sjabloon te maken die de gegevens weergeeft die zijn opgehaald uit de Behance-API. Tuts + heeft twee gratis screencasts die je kunnen helpen aan de slag te gaan met Handlebars:

• Zeg hallo tegen het stuur
• Tools van de moderne webontwikkelaar - sturen

Als je nog niet eerder met Handlebars hebt gewerkt, raden we je aan de tijd te nemen om deze screencasts af te maken of een paar basiscursus te volgen voordat je verder gaat.

In deze zelfstudie nemen we de JavaScript- en CSS-bibliotheken niet op in onze projectdirectory omwille van het bereiken van een kleinere bestandsgrootte van ons project. In plaats daarvan zullen we ze koppelen van een CDN-bron door CDNJS.com. Laten we onze index.html openen in een code-editor en de volgende bibliotheken toevoegen binnen de hoofd label.

Houd er rekening mee dat als u index.html serveert via een lokale server, u deze moet toevoegen http: // in elk van de links die naar CDNJS.com verwijzen.

Websitesecties in HTML verdelen

De HTML-markering die onze secties van de website definieert - koptekst, inhoud en voettekst - is vrij eenvoudig. We gebruiken de HTML5 hoofd element voor de koptekst, a div om de inhoud en de HTML5 in te pakken footer element voor de voettekst. Elk van deze elementen krijgt een unieke ID en een klasse voor stijl- en scriptingdoeleinden. Dit is onze HTML-markering in de lichaam tag in dit stadium.

Stuursjablonen maken

In dit gedeelte gaan we de Handlebars-sjablonen maken om de inhoud van onze secties van de website weer te geven. En we beginnen met de sjabloon voor de koptekst, die wordt gevuld met de gebruikersgegevens van dit API-eindpunt www.behance.net/v2/users/user_id.

Een stuursjabloon is omwikkeld met een script tag met een speciaal type text / x-stuur-template en bij voorkeur met een unieke ID om gemakkelijker de sjabloon te selecteren, zoals zo.

Binnen de script tag zullen we de opmaak voor de inhoud van de kop samen met de klassen voor stylingdoeleinden opmaken. We nemen ook de klasse op van Foundation Icon Fonts 3, die is geïnitialiseerd met fi-, om de pictogrammen te tonen. Ten slotte, de tijdelijke aanduiding voor inhoud in de vorm van een expressie Stuur.

 
 User.display_name
 
 
 #each user.fields 
deze
 /elk 
 
 
user.city, user.country
 

Elk van deze tijdelijke aanduidingen komt overeen met de JSON-sleutels die zijn opgehaald uit de API. De User.display_name, toont bijvoorbeeld de weergavenaam van de gebruiker. De Weergavenaam is de eigenlijke sleutel die de waarde van de naam bevat. Maar omdat het genest is onder de gebruiker object, we verwijzen ernaar als user.display_name. Hetzelfde geldt voor de andere tijdelijke aanduidingen in deze sjabloon, evenals de sjablonen die volgen.

Weergavenaam gebruiker in JSON

Vervolgens zullen we de sjabloon voor het weergeven van portfolio samenstellen, en dit is de laatste Handlebars-sjabloon die we voor onze website zullen maken. Om te beginnen, creëren we een nieuwe div met een ID portefeuille in het gedeelte Inhoud. Wij creëren dit div om de portfolio in te pakken, voor het geval we in de toekomst meer inhoud moeten toevoegen. Vervolgens voegen we de scripttag toe die de sjabloon bevat. Op dit punt zou de HTML-structuur van onze portfolio-inhoud als volgt moeten verschijnen:

Hier kunt u zien dat de gegevens worden opgehaald www.behance.net/v2/users/user_id/projects retourneert een rangschikking de portfolio van de gebruiker bevatten. Om een ​​array weer te geven, moeten we elk item in de array doorlopen met behulp van Handlebars ' elk om het in de sjabloon weer te geven.

Een reeks projecten opgehaald uit Behance API

We zullen het portfolio in een ongeordende lijst neerleggen. Dus laten we er een toevoegen ul element en wikkel elk  li element met #each ... / each, als volgt:

Vervolgens geven we de inhoud van elk item weer. Zoals we eerder al hebben vermeld, geven we de afbeelding, de naam en de advertentievelden weer. We zullen ze binnen de li met een nieuwe div met de klas, portfolio-inhoud.

... 
 
 #in dit geval.covers. [404]  else #if this.covers. [230]  anders  /als als 
 
deze naam
 
 
 #each this.fields 
deze
 /elk 
 
 
... 

Merk op dat er enkele voorwaardelijke helpers van Handle zijn, zoals #in dit geval.covers. [404], in deze sjabloon. We gebruiken de voorwaardelijke helper om ons te helpen de juiste afbeeldingsgrootte van de omslag te raadplegen. De afbeelding staat mogelijk niet altijd op 404 px (het hoogste formaat dat is ingesteld voor de omslagafbeelding), maar is mogelijk alleen in een kleiner formaat beschikbaar. Hier kun je zien dat Behance de afbeelding heeft bijgesneden in de volgende formaten: 404px, 230px, 202px en 115px.

Omslagafmetingen

De HTML-markering in de voettekst is heel eenvoudig. We zullen twee paragraaftags toevoegen: één bevat 'Powered by' en de laatste bevat een link die verwijst naar Behance. We voegen toe fi-sociaal-Behance klasse in de een tag om het Behance-logo te laten zien van Foundation Icon Fonts.

... 
 
Aangedreven door
 
Behance
 
 

In deze fase zijn we klaar met het bouwen van de HTML-structuren die de inhoud van onze website bepalen. Wanneer we het echter in de browser openen, zien we nog niets verschijnen! Dit komt omdat we een verzoek moeten indienen bij de API en vervolgens de gegevens samen met de stuurbalanssjabloon moeten compileren.

Bellen van Behance API en compileren van de sjabloon

Laten we een maken script tag om onze JavaScript te bevatten. We zullen ook twee variabelen maken om de Behance API Key en de User-ID te bevatten. Zoals eerder vermeld, gebruiken we het portfolio van "Creativemints".

var apiKey = 'ZLBxK9rEfHwJf9K0rmseNr2fS2gS2HJW'; var userID = 'creativemints'; 

Onder deze twee variabelen voegen we de volgende functie toe. Deze functie roept de Behance User API aan en compileert de Handlebars-sjabloon voor de koptekst.

(function () var behanceUserAPI = 'http://www.behance.net/v2/users/'+ userID +'? callback =? & api_key = '+ apiKey; function setUserTemplate () var userData = JSON.parse ( sessionStorage.getItem ('behanceUser')), getTemplate = $ ('# profile-template'). html (), template = Handlebars.compile (getTemplate), result = template (userData); $ ('# header'). html (resultaat);; if (sessionStorage.getItem ('behanceUser')) setUserTemplate (); else $ .getJSON (behanceUserAPI, function (user) var data = JSON.stringify (user); sessionStorage.setItem ('behanceUser', data); setUserTemplate (););;) (); 

Laten we deze code in meer detail bekijken. Ten eerste hebben we de Behance User API opgeslagen in a behanceUserAPI variabel. Merk op dat we de. Hebben ingevoegd callback = parameter erin. Deze toevoeging vermijdt de Niet Toegestane Toegang fout veroorzaakt door het Beleid met dezelfde herkomst.

Een woord over sessionStorage

Eerder in deze zelfstudie hebben we vermeld dat de Behance-API beperkt is tot 150 verzoeken per uur, en daarom hebben we besloten HTML5 offline opslag te gebruiken om de gegevens op te slaan. In deze functie hebben we gebruikt sessionStorage. De reden achter het gebruik van sessionStorage voor het opslaan van de gebruikersprofielgegevens is dat de gebruiker zijn / haar profiel op elk gewenst moment kan wijzigen, maar we kunnen het niet voorspellen wanneer. Dus in plaats van gebruiken lokale opslag die de gegevens persistent opslaat, gebruiken we sessionStorage die de gegevens zal verwijderen zodra we het tabblad of de browser sluiten. Op die manier zal het, zodra we de browser openen en weer toegang krijgen tot de website, nieuwe gegevens van de Behance-API ophalen.

De sessionStorage kan echter alleen string of platte tekst bevatten. Dus, zoals je kunt zien aan de bovenstaande functie, hebben we gebruikt JSON.stringify (); om JSON in een tekenreeks in te stellen voordat we deze opslaan in sessionStorage. Dan zullen we de gegevens eruit halen JSON.parse () om het opnieuw te formatteren naar JSON.

We hebben ook een functie gemaakt met de naam setUserTemplate () om de Handlebars-sjabloon samen te stellen en de inhoud toe te voegen met jQuery .html (). We voeren deze functie uit onder deze voorwaarde: als de gegevens in sessionStorage is beschikbaar, we voeren de functie onmiddellijk uit, anders zullen we de API moeten bellen met $ .GetJSON () eerst en vervolgens uitvoeren.

Bovendien kunt u zien sessionStorage op het tabblad Resource in Chrome DevTools en op Webkit gebaseerde browser.

sessionStorage in Chrome DevTools

 Compileren van de inhoud

Vervolgens voegen we de onderstaande functie toe om de portfoliosjabloon samen te stellen in de inhoud. Deze functie lijkt erg op de bovenstaande functie voor de kop, behalve de per pagina variabel en per_page = parameter die we gebruiken om het aantal contentitems dat is opgehaald uit de API te beperken.

(function () var perPage = 12; var behanceProjectAPI = 'http://www.behance.net/v2/users/'+ userID +' / projects? callback =? & api_key = '+ apiKey +' & per_page = '+ perPage; function setPortfolioTemplate () var projectData = JSON.parse (sessionStorage.getItem ('behanceProject')), getTemplate = $ ('# portfolio-template'). html (), template = Handlebars.compile (getTemplate), resultaat = template (projectData); $ ('# portfolio'). html (result);; if (sessionStorage.getItem ('behanceProject')) setPortfolioTemplate (); else $ .getJSON (behanceProjectAPI, functie (project) var data = JSON.stringify (project); sessionStorage.setItem ('behanceProject', data); setPortfolioTemplate (););;) (); 

Als we nu de browser zien, zouden we het gebruikersprofiel en de portfolio al moeten zien. Maar ze zijn nog niet gestyled.

De volgende keer…

In het volgende deel van deze serie zullen we onze portfolio-inhoud stylen, waardoor we een dynamische en responsieve portfolio-pagina krijgen. Zie je dan!