Behance är ett utmärkt knutpunkt för kreativitet att dela och visa upp sitt arbete och pågående projekt. Till skillnad från Dribbble eller Forrst som - som jag personligen ser dem - domineras av illustratörer och UI-designers, omfattar Behance ett brett utbud av kreativa fält, inklusive Arkitektur, Motion Graphics, Automotive Design och Fashion. Utöver detta tillhandahåller Behance också en uppsättning API för att få tillgång till innehållet.
Under denna korta serie kommer vi att använda Behance API för att skapa en personlig portföljwebbplats. Vi tar effektivt innehåll från Behance och visar det på vår egen externa webbsida. Men innan vi fortsätter vidare med att bygga webbplatsen måste vi först undersöka hur Behance hanterar innehållet och se hur API fungerar.
Exploring Behance och API
Behance delar upp innehållet i moduler; nämligen bild, inbädda, video, ljud och text. Data som hämtas från API: n kommer inte bara att innehålla bildadresser utan kan också vara video, ljudadresser och vanlig text. Visar alla dessa typer av innehåll på vår hemsida, men skulle komplicera saker. Därför kommer vi i denna handledning att fokusera på bilder och utesluta resten för att hålla vår kod enklare.
Notera: Dessa handledning förutsätter att du har ett Adobe-konto och en Behance-portfölj att arbeta med. I samband med vår demonstration använder vi den fantastiska portföljen av Mike "Creativemints", som vänligt gick med på att låta oss använda sitt arbete i det här fallet.
Behance projektredigeringsskärmen.
När du arbetar med egna projekt, efter att ha laddat upp ditt innehåll, visar Behance dig ett dialogfönster för att ladda upp omslagsbilden. Det här är som att skapa en utrustad bild i WordPress. Den bild som vi laddar upp här kommer att visas som en förhandsgranskning av hela projektet. På vår hemsida kommer vi också att använda omslagsbilden på samma sätt.
Dialogrutan för att ladda upp bild i Behance.
När vi har satt omslagsbilden kommer vi att presenteras med alternativ för att tilldela flera attribut som kreativa fält, taggar och en beskrivning av innehållet. Vi kommer inte att överväldiga vår hemsida med för många av dessa attribut. I denna handledning, förutom från omslagsbilden och titeln, kommer vi bara att visa de kreativa fältattributen.
Urval av kreativa fält i Behance.
Behance API-nyckel
Vi behöver en unik API-nyckel / klient-ID för att få tillgång till Behance API. För att få en, gå till Behance Dev, registrera din app, fyll ut programmets namn, hemsida och beskrivning. Fältet Omdirigera URI (för OAuth) är valfritt, om du inte vill skapa en app som kräver användarautentisering.
Behance API-nyckel.
När vi har API-nyckeln, gå till Behance API-ändpunkter där du hittar alla sätt att få tillgång till API: n. En API Endpoint är adressen för en webbtjänst, vanligtvis bara en enkel HTTP-URL-sträng.
I denna handledning behöver vi få tillgång till Användar information, Användarens Projekt. Här är API-slutpunkterna för att begära denna information:
API: n returnerar projektinformationen inklusive moduler av det givna project_id.
Eftersom Behance API kan nås via HTTP, kan vi se data omedelbart i webbläsaren. Om du använder Chrome eller Firefox, föreslår jag att du installerar ett webbläsarplugin som heter JSONview för att se JSON-data i ett mer läsbart format.
JSON-data som ses med JSONview
API-gränsen
Var vänlig medveten om att Behance begränsar API: n med 150 förfrågningar per timme. Om det finns för många förfrågningar kommer vi att sluta med tomma svar och vi får ingenting. Så här beskrivs gränsen i dokumentationen:
Begäran är begränsad till 150 per timme och mäts mot den offentliga ser IP-adressen på servern eller enheten som gör begäran. Om du gör för många förfrågningar får du ett tomt svar med en statuskod för 429 (för många begäranden).
Så, i den här handledningen använder vi HTML5 Offline Storage för att lagra data offline för att minimera förfrågningarna. Istället för att ringa API varje gång vi laddar sidan kan vi hämta det från lagret. Mer information om HTML5 offline lagring finns i följande artiklar:
Snabbtips: Lär dig om HTML5 lokal lagring
Det förflutna, nuvarande och framtiden för lokal lagring för webbapplikationer
Webbplatsen
Innan vi bygger vår webbplatsstruktur, låt oss ta en titt på webbplatsens ritning.
Webbplatsen
Som du kan se ovan har vår hemsida tre avsnitt: Header, Content och Footer. Rubriken innehåller användarens bildavbildare, namn, deras kreativa fält och deras plats. Innehållet avsnittet visar användarens portfölj med namnet och annonsmaterialfälten. I Footer visar vi Behance-logotypen, vilket visar att webbplatsen drivs av Behance API.
Bygga upp innehållet och strukturen på webbplatsen
Låt oss starta vårt projekt genom att skapa en katalog som heter personlig-portfölj och ett index.html med grundläggande HTML5-markup. I index.html länkar vi till följande bibliotek:
jQuery
I den här handledningen använder vi jQuery främst för två saker: DOM-manipulation och anropande av Behance API via dess $ .GetJSON () API.
Idag delas jQuery i två versioner, 1.x och 2.x. Version 1.x syftar till att stödja äldre webbläsare, nämligen Internet Explorer 8 och nedan, medan version 2.x endast tillgodoser modernare webbläsare. Vi antar att vi nu lever i världen där alla använder moderna webbläsare (jag känner mig riskabel). Så, i den här handledningen kan vi säkert använda jQuery 2.x.
Handlebars.js
Handlebars är en bra JavaScript-baserad templerande motor. I den här handledningen använder vi hanteringsrader för att bygga mallen som visar data som hämtas från Behance API. Tuts + har två fria screencasts som kan hjälpa dig att komma igång med Handlebars:
Säg Hello to Handlebars
Verktyg av den moderna webbutvecklaren - handtag
Om du inte har arbetat med Handlebars tidigare, föreslår vi att du tar dig tid att avsluta dessa screencasts eller läsa några grundläggande handledning innan du går längre.
I den här handledningen kommer vi inte att inkludera JavaScript och CSS-biblioteken i vår projektkatalog för att uppnå mindre filstorlek för vårt projekt. Istället kommer vi länka dem från en CDN-källa av CDNJS.com. Låt oss öppna vårt index.html i en kodredigerare och lägg till följande bibliotek inom huvud märka.
Observera att om du serverar index.html via en lokal server måste du lägga till http: // i var och en av länkarna som pekar på CDNJS.com.
Dela upp webbsidor i HTML
HTML-markupen som definierar våra webbsajter - Header, Content och Footer - är ganska enkelt. Vi använder HTML5 rubrik element för rubriken, a div att paketera innehållet och HTML5 sidfot element för Footer. Var och en av dessa element är tilldelade med ett unikt ID och en klass för styling och scripting. Här är vår HTML-märkning inom kropp taggar på detta stadium.
Skapa handtagsmallar
I det här avsnittet kommer vi att bygga mallarna för hanteringsrader för att visa innehållet i våra hemsidor. Och vi börjar med mallen för rubriken, som kommer att fyllas med användardata från denna API-ändpunkt www.behance.net/v2/users/user_id.
En Handbars-mall är insvept med a manus tagg med en speciell typ text / x-styret-mall och helst med ett unikt ID för att lättare välja mallen, som så.
Inom manus tagg kommer vi att lägga ut markeringen för rubrikens innehåll tillsammans med klasserna för styling ändamål. Vi inkluderar också klassen från Foundation Icon Fonts 3, som initialiseras med fi-, för att visa ikonerna. Slutligen, innehållsplatshållaren i form av ett Handlebars-uttryck.
User.display_name
#each user.fields
detta
/varje
user.city, user.country
Var och en av dessa platshållare motsvarar de JSON-nycklar som hämtas från API: n. De User.display_name, till exempel visar användarens visningsnamn. De DISPLAY_NAME är den faktiska nyckeln som innehåller namnet. Men eftersom den är kapslad under användare objekt som vi hänvisar till har det som user.display_name. Detsamma gäller för de andra platsinnehavarna i denna mall samt de mallar som följer.
Användarnamn i JSON
Därefter bygger vi mallen för att visa portfölj, och det här är den sista hanteringsmallens mall som vi kommer att skapa för vår hemsida. Till att börja med skapar vi en ny div med ett ID portfölj inom avsnittet Innehåll. Vi skapar detta div att paketera portföljen, bara om vi behöver lägga till mer innehåll inom framtiden. Sedan lägger vi till skriptet som innehåller mallen. Vid denna tidpunkt bör HTML-strukturen för vårt portföljinnehåll visas enligt följande:
Här kan du se att de data som hämtats från www.behance.net/v2/users/user_id/projects returnerar en array innehållande användarens portfölj. För att visa en matris måste vi slingra igenom varje objekt i matrisen med hjälp av Handlebars ' varje för att visa det i mallen.
En rad projekt som hämtats från Behance API
Vi lägger ut portföljen i en oorderad lista. Så låt oss lägga till en ul element och linda varje li element med #each ... / each, som följer:
Då ska vi lägga ut innehållet i varje objekt. Som vi nämnde tidigare kommer vi att visa bildomslaget, namnet och de kreativa fälten. Vi kommer att innehålla dem inuti li med en ny div med klassen, portfölj innehåll.
...
#if this.covers. [404] else #if this.covers. [230] annan /om om
detta namnet
#seach this.fields
detta
/varje
...
Observera att det finns några av Handlebars villkorade hjälpare, som #if this.covers. [404], i den här mallen. Vi använder den villkorliga hjälpen för att hjälpa oss att hänvisa till rätt bildskärmstorlek. Bilden kanske inte alltid ligger vid 404px (som är den högsta storleken som är inställd på omslagsbilden), den kan bara vara tillgänglig i lägre storlek. Här ser du att Behance beskurna bilden i följande storlekar: 404px, 230px, 202px och 115px.
Täck bildstorlekarna
HTML-markeringen i Footer är verkligen enkel. Vi lägger till två stycken taggar: en kommer att innehålla "Drivs av", och den sista kommer att innehålla en länk som pekar mot Behance. Vi lägger till fi-social-Behance klass i en tagg för att visa Behance-logotypen från Foundation Icon Fonts.
...
Drivs av
Behance
Vid detta tillfälle har vi slutfört byggandet av HTML-strukturerna som beskriver webbplatsens innehåll. Men när vi öppnar den i webbläsaren ser vi ingenting ännu! Detta beror på att vi måste göra en förfrågan till API: n och sedan sammanställa data tillsammans med mallar för hantering.
Calling Behance API och Kompilering av mallen
Låt oss skapa en manus tagg för att innehålla vår JavaScript. Vi kommer också skapa två variabler för att innehålla Behance API-nyckel och användar-ID. Som tidigare nämnts använder vi portföljen av "Creativemints".
var apiKey = 'ZLBxK9rEfHwJf9K0rmseNr2fS2gS2HJW'; var userID = 'creativemints';
Nedanför dessa två variabler lägger vi till följande funktion. Den här funktionen kommer att ringa till Behance User API och kompilera hanteringsmallen för rubriken.
(funktion ) var behanceUserAPI = 'http://www.behance.net/v2/users/'+ userID +'? callback =? & api_key = '+ apiKey; funktion setUserTemplate () var userData = JSON.parse ( sessionStorage.getItem ('behanceUser')), getTemplate = $ ('# profilmall'). html (), mall = Handlebars.compile (getTemplate), result = mall (userData); $ ('# header'). html (result);; if (sessionStorage.getItem ('behanceUser')) setUserTemplate (); annat $ .getJSON (behanceUserAPI, funktion (användare) var data = JSON.stringify (användare); sessionStorage.setItem ('behanceUser', data); setUserTemplate (););;) ();
Låt oss undersöka denna kod mer detaljerat. Först lagrade vi Behance User API i en behanceUserAPI variabel. Observera att vi har lagt in callback = parametern inom den. Detta tillägg undviker Tillåtet åtkomst fel som orsakats av samma ursprungspolicy.
Ett ord på sessionStorage
Tidigare i denna handledning nämnde vi att Behance API är begränsat till 150 förfrågningar per timme, och därför bestämde vi oss för att använda HTML5 Offline Storage för att lagra data. I den här funktionen har vi använt sessionStorage. Anledningen till användningen av sessionStorage för att lagra användarprofildata är att användaren kan ändra sin profil när som helst, men vi kan inte förutsäga det när. Så istället för att använda lokalt utrymme som lagrar data permanent, vi använder sessionStorage som tar bort data när vi har avslutat fliken eller webbläsaren. På det sättet, när vi öppnar webbläsaren och öppnar webbplatsen igen, kommer den att dra nya data från Behance API.
SessionStorage kan emellertid bara innehålla sträng eller vanlig text. Så som vi kan se från ovanstående funktion har vi använt JSON.stringify (); att göra JSON till en sträng innan vi lagrar den i sessionStorage. Då tar vi data med JSON.parse () att formatera det tillbaka till JSON.
Vi har också skapat en funktion som heter setUserTemplate () att kompilera mallarna och lägga till innehållet med jQuery .html(). Vi kör denna funktion under detta villkor: om uppgifterna i sessionStorage är tillgänglig, utför vi genast funktionen, annars måste vi ringa API med $ .GetJSON () först och sedan utföra det.
Dessutom kan du se sessionStorage under fliken Resurs i Chrome DevTools och Webkit-baserad webbläsare.
sessionStorage i Chrome DevTools
Komponera innehållet
Vi lägger sedan till funktionen nedan för att sammanställa portföljen i innehållet. Denna funktion är mycket lika med ovanstående funktion för rubriken, förutom för per sida variabel och per_page = parameter som vi kommer att använda för att begränsa antalet innehållsposter som hämtas från API: n.
(funktion () var perPage = 12; var behanceProjectAPI = 'http://www.behance.net/v2/users/'+ userID +' / projects? callback =? & api_key = '+ apiKey +' & per_page = '+ perPage; funktion setPortfolioTemplate () var projectData = JSON.parse (sessionStorage.getItem ('behanceProject')), getTemplate = $ ('# portföljmall'). html (), mall = Handlebars.compile (getTemplate), resultat = mall (projectData); $ ('# portfölj'). html (resultat);; om (sessionStorage.getItem ('behanceProject')) setPortfolioTemplate (); annat $ .getJSON (behanceProjectAPI, funktion var data = JSON.stringify (project); sessionStorage.setItem ('behanceProject', data); setPortfolioTemplate (););;) ();
Nu när vi ser webbläsaren, borde vi redan se användarprofilen liksom portföljen. Men de är ännu inte stylade.
Nästa gång…
I följande del av denna serie kommer vi att stile in vårt portföljinnehåll, vilket ger oss en dynamisk och responsiv portföljsida. Vi ses då!
Share
Behance projektredigeringsskärmen. 
Dialogrutan för att ladda upp bild i Behance. 
Urval av kreativa fält i Behance. 
Behance API-nyckel. 
JSON-data som ses med JSONview 
Webbplatsen 
Användarnamn i JSON 
En rad projekt som hämtats från Behance API else #if this.covers. [230]
annan
/om om
Täck bildstorlekarna 
Accentsconagua
else #if this.covers. [230] 
annan 
/om om 
sessionStorage i Chrome DevTools
