Behance ist eine großartige Drehscheibe für Kreative, die ihre Arbeit und laufenden Projekte zeigen und zeigen können. Im Gegensatz zu Dribbble oder Forrst, die - wie ich persönlich sie sehe - überwiegend von Illustratoren und UI-Designern bevölkert sind, umfasst Behance eine breitere Palette kreativer Bereiche, darunter Architektur, Motion Graphics, Automotive Design und Mode. Darüber hinaus stellt Behance eine Reihe von APIs bereit, um auf den Inhalt zuzugreifen.

In dieser kurzen Serie werden wir mit der Behance-API eine persönliche Portfolio-Website erstellen. Wir werden effektiv Inhalte aus Behance ziehen und auf unserer eigenen externen Webseite anzeigen. Bevor wir jedoch mit dem Erstellen der Website fortfahren, müssen wir zunächst untersuchen, wie Behance seinen Inhalt verwaltet, und sehen, wie die API funktioniert.

Erkundung von Behance und der API

Behance teilt seinen Inhalt in Module auf; nämlich Bild, Einbettung, Video, Audio und Text. Von der API abgerufene Daten umfassen nicht nur Bild-URLs, sondern können auch Video-, Audio-URLs sowie Nur-Text-Informationen sein. Die Darstellung all dieser Arten von Inhalten auf unserer Website würde jedoch die Dinge komplizieren. Daher konzentrieren wir uns in diesem Lernprogramm auf Bilder und schließen den Rest aus, um unseren Code einfacher zu halten.

Hinweis: In diesen Lernprogrammen wird davon ausgegangen, dass Sie über ein Adobe-Konto und ein Behance-Portfolio verfügen, mit dem Sie arbeiten können. Für unsere Demonstration verwenden wir das beeindruckende Portfolio von Mike "Creativemints", das sich bereit erklärt, uns in diesem Fall seine Arbeit zu erlauben.

Projekt-Bearbeitungsbildschirm.

Wenn Sie an Ihren eigenen Projekten arbeiten, zeigt Behance nach dem Hochladen Ihres Inhalts ein Dialogfenster zum Hochladen des Titelbilds. Dies ist wie das Einrichten eines vorgestellten Bildes in WordPress. Das Bild, das wir hier hochladen, wird als Vorschau des gesamten Projekts angezeigt. In unserer Website verwenden wir das Titelbild ebenfalls.

Das Dialogfenster zum Hochladen des Titelbildes in Behance.

Nachdem wir das Titelbild festgelegt haben, werden Optionen zum Zuweisen verschiedener Attribute angezeigt, z. B. Motivfelder, Tags und eine Beschreibung des Inhalts. Wir werden unsere Website nicht mit zu vielen dieser Eigenschaften überfordern. In diesem Lernprogramm werden neben dem Titelbild und dem Titel nur die Attributfeld-Attribute angezeigt.

Auswahl der Creative-Felder in Behance.

Behance-API-Schlüssel

Wir benötigen einen eindeutigen API-Schlüssel / eine eindeutige Client-ID, um auf die Behance-API zuzugreifen. Um einen zu erhalten, gehen Sie zu Behance Dev, registrieren Sie Ihre App und geben Sie den Anwendungsnamen, die Website und die Beschreibung ein. Das Feld Redirect URI (for OAuth) ist optional, es sei denn, Sie erstellen eine App, die eine Benutzerauthentifizierung erfordert.

Behance-API-Schlüssel.

Sobald wir den API-Schlüssel haben, gehen Sie zu den Behance-API-Endpunkten. Dort finden Sie alle Möglichkeiten, um auf die API zuzugreifen. Ein API-Endpunkt ist die Adresse für einen Webdienst, normalerweise nur eine einfache HTTP-URL-Zeichenfolge.

In diesem Tutorial benötigen wir Zugriff auf Nutzerinformation, die Projekte des Benutzers. Hier sind die API-Endpunkte, um diese Informationen anzufordern:

Informationen eines Benutzers abrufen

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

Die Benutzerinformationen umfassen die Benutzer-ID-Nummer, den Namen, den Standort des Benutzers, die Benutzeravatar-URL und eine Reihe anderer Daten.

Holen Sie sich die Projekte eines Benutzers

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

Wir erhalten die Liste der veröffentlichten Projekte des gegebenen Benutzeridentifikation. Die Liste kann mit eingeschränkt werden pro Seite Parameter.

Holen Sie sich den Inhalt eines Projekts

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

Die API gibt die Projektinformationen einschließlich zurück Module des Gegebenen project_id.

Da auf die Behance-API über HTTP zugegriffen werden kann, können wir die Daten sofort im Browser sehen. Wenn Sie Chrome oder Firefox verwenden, würde ich vorschlagen, dass Sie ein Browser-Plugin namens JSONview installieren, um die JSON-Daten in einem besser lesbaren Format anzuzeigen.

JSON-Daten, die mit JSONview angezeigt werden

API-Limit

Bitte beachten Sie, dass Behance die API auf 150 Anfragen pro Stunde begrenzt. Wenn es zu viele Anfragen gibt, werden wir mit leeren Antworten enden und nichts bekommen. So wird das Limit in der Dokumentation beschrieben:

Anfragen sind auf 150 pro Stunde beschränkt und werden anhand der öffentlich zugänglichen IP-Adresse des Servers oder Geräts gemessen, das die Anfrage stellt. Wenn Sie zu viele Anfragen machen, erhalten Sie eine leere Antwort mit dem Statuscode 429 (Too Many Requests).

In diesem Lernprogramm verwenden wir HTML5-Offline-Speicher, um die Daten offline zu speichern, um die Anforderungen zu minimieren. Anstatt die API jedes Mal aufzurufen, wenn wir die Seite laden, können wir sie aus dem Speicher abrufen. Weitere Informationen zum HTML5-Offline-Speicher finden Sie in den folgenden Artikeln:

• Schneller Tipp: Informationen zum lokalen HTML5-Speicher
• Vergangenheit, Gegenwart und Zukunft des lokalen Speichers für Webanwendungen

Der Website-Blueprint

Bevor wir unsere Website-Struktur aufbauen, werfen wir einen Blick auf den Website-Blueprint.

Der Website-Blueprint

Wie Sie oben sehen können, hat unsere Website drei Bereiche: Kopfzeile, Inhalt und Fußzeile. Die Kopfzeile enthält den Avatar, den Namen, die kreativen Felder und den Speicherort des Benutzers. Der Abschnitt "Inhalt" zeigt das Portfolio des Benutzers mit dem Namen und den Creative-Feldern. In der Fußzeile zeigen wir das Behance-Logo, das veranschaulicht, dass die Website von der Behance-API betrieben wird.

Aufbau des Inhalts und der Struktur der Website

Beginnen wir unser Projekt mit dem Erstellen eines Verzeichnisses mit dem Namen persönliches Portfolio und eine index.html mit grundlegendem HTML5-Markup. In der index.html werden wir auf folgende Bibliotheken verlinken:

jQuery

In diesem Lernprogramm werden wir jQuery hauptsächlich für zwei Dinge verwenden: DOM-Manipulation und Aufrufen der Behance-API über ihre $ .getJSON () API.

Heute ist jQuery in zwei Versionen unterteilt: 1.x und 2.x. Version 1.x soll ältere Browser unterstützen, insbesondere Internet Explorer 8 und niedriger, während Version 2.x nur für modernere Browser geeignet ist. Wir werden davon ausgehen, dass wir jetzt in der Welt leben, in der jeder moderne Browser verwendet (ich fühle mich riskant). In diesem Tutorial können wir also jQuery 2.x sicher verwenden.

Lenkers.js

Lenker ist eine großartige JavaScript-basierte Template-Engine. In diesem Lernprogramm verwenden wir Handlebars, um die Vorlage zu erstellen, die die von der Behance-API abgerufenen Daten anzeigt. Tuts + bietet zwei kostenlose Screencasts, die Ihnen beim Einstieg in Handlebars helfen können:

• Sag Hallo zu Lenkstangen
• Tools des modernen Webentwicklers - Lenker

Wenn Sie zuvor noch nicht mit Handlebars gearbeitet haben, empfehlen wir Ihnen, dass Sie sich die Zeit nehmen, diese Screencasts zu beenden oder einige grundlegende Tutorials zu lesen, bevor Sie fortfahren.

In diesem Lernprogramm werden die JavaScript- und CSS-Bibliotheken nicht in unser Projektverzeichnis aufgenommen, um eine kleinere Dateigröße unseres Projekts zu erreichen. Stattdessen werden wir sie von CDNJS.com aus einer CDN-Quelle verlinken. Öffnen wir unsere index.html in einem Code-Editor und fügen Sie die folgenden Bibliotheken in die Kopf Etikett.

Wenn Sie index.html über einen lokalen Server bereitstellen, müssen Sie Folgendes hinzufügen http: // in jedem der Links auf CDNJS.com.

Teilen von Website-Abschnitten in HTML

Das HTML-Markup, das unsere Website-Abschnitte definiert - Kopfzeile, Inhalt und Fußzeile - ist recht einfach. Wir verwenden das HTML5 Header Element für die Kopfzeile, a div um den Inhalt und den HTML5 zu verpacken Fußzeile Element für die Fußzeile. Jedem dieser Elemente wird eine eindeutige ID und eine Klasse zum Gestalten und Skripting zugewiesen. Hier ist unser HTML-Markup im Karosserie Tag in diesem Stadium.

Lenker-Vorlagen erstellen

In diesem Abschnitt erstellen wir die Handlebars-Vorlagen, um den Inhalt unserer Website-Abschnitte anzuzeigen. Wir beginnen mit der Vorlage für den Header, die mit den Benutzerdaten dieses API-Endpunkts gefüllt wird www.behance.net/v2/users/user_id.

Eine Handlebars-Vorlage wird mit einem Skript tag mit einem speziellen typ Text / X-Lenker-Vorlage und vorzugsweise mit einer eindeutigen ID, um die Vorlage einfacher auswählen zu können.

Innerhalb des Skript Mit dem Tag legen wir die Markierungen für den Inhalt der Kopfzeile zusammen mit den Klassen für das Design fest. Wir schließen auch die Klasse von Foundation Icon Fonts 3 ein, die mit initialisiert wird fi-, um die Symbole anzuzeigen. Zuletzt der Inhaltsplatzhalter in Form eines Handlebars-Ausdrucks.

 
user.display_name
 
 
 #eacher.benutzerfelder 
diese
 /jeder 
 
 
user.city, user.country
 

Jeder dieser Platzhalter entspricht den aus der API abgerufenen JSON-Schlüsseln. Das user.display_name, Zum Beispiel wird der Anzeigename des Benutzers angezeigt. Das Anzeigename ist der eigentliche Schlüssel, der den Wert des Namens enthält. Aber da ist es unter dem verschachtelt Nutzer Objekt, wir beziehen uns darauf user.display_name. Gleiches gilt für die anderen Platzhalter in dieser Vorlage sowie für die folgenden Vorlagen.

Benutzeranzeigename in JSON

Als Nächstes erstellen wir die Vorlage, um das Portfolio anzuzeigen. Dies ist die letzte Vorlage für Handlebars, die wir für unsere Website erstellen werden. Zu Beginn erstellen wir ein neues div mit einer ID Portfolio innerhalb des Inhaltsbereichs. Wir schaffen das div Um das Portfolio zu verpacken, für den Fall, dass wir in der Zukunft weitere Inhalte hinzufügen müssen. Dann fügen wir das Skript-Tag hinzu, das die Vorlage enthält. An dieser Stelle sollte die HTML-Struktur unseres Portfolio-Inhalts wie folgt aussehen:

Hier können Sie sehen, dass die Daten abgerufen wurden www.behance.net/v2/users/user_id/projects gibt ein zurück Array enthält das Portfolio des Benutzers. Um ein Array anzuzeigen, müssen wir jedes Element des Arrays mithilfe von Handlebars 'durchlaufen. jeder um es in der Vorlage anzuzeigen.

Ein Array von Projekten, die von der Behance-API abgerufen werden

Wir werden das Portfolio in einer ungeordneten Liste auslegen. Fügen wir also ein ul Element und wickeln Sie jeweils  li Element mit #each… each each, wie folgt:

Anschließend legen wir den Inhalt jedes Elements fest. Wie bereits erwähnt, werden das Bild-Cover, der Name und die Creative-Felder angezeigt. Wir werden sie in der enthalten li mit einem neuen div mit der Klasse, Portfolio-Inhalt.

… 
 
 #if this.covers. [404]  else #wenn dies.umfasst. [230]  sonst  /wenn wenn 
 
dieser Name
 
 
 # #dieses.Feld 
diese
 /jeder 
 
 
… 

Beachten Sie, dass es einige bedingte Helfer von Handlebars gibt, wie z #if this.covers. [404], in dieser Vorlage. Wir verwenden den bedingten Helfer, um die richtige Größe des Coverbildes zu bestimmen. Das Bild ist möglicherweise nicht immer auf 404px (die höchste für das Titelbild festgelegte Größe) eingestellt. Es ist möglicherweise nur in einer geringeren Größe verfügbar. Hier sehen Sie, dass Behance das Bild in diesen Größen beschnitten hat: 404px, 230px, 202px und 115px.

Bildgrößen abdecken

Das HTML-Markup in der Fußzeile ist sehr einfach. Wir fügen zwei Absatz-Tags hinzu: eines enthält "Powered by" und das letzte wird einen Link enthalten, der auf Behance verweist. Wir fügen hinzu fi-soziales Verhalten Klasse in der ein Tag, um das Behance-Logo von Foundation Icon Fonts anzuzeigen.

… 
 
Unterstützt von
 
Behance
 
 

Zu diesem Zeitpunkt haben wir die HTML-Strukturen fertiggestellt, die den Inhalt unserer Website darstellen. Wenn Sie es jedoch im Browser öffnen, wird noch nichts angezeigt! Dies liegt daran, dass wir eine Anforderung an die API stellen und dann die Daten zusammen mit der Handlebars-Vorlage kompilieren müssen.

Aufruf der Behance-API und Kompilieren der Vorlage

Lass uns einen erstellen Skript Tag, um unser JavaScript zu enthalten. Wir erstellen außerdem zwei Variablen, die den Behance-API-Schlüssel und die Benutzer-ID enthalten. Wie bereits erwähnt, werden wir das Portfolio von "Creativemints" verwenden..

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

Unter diesen beiden Variablen fügen wir die folgende Funktion hinzu. Diese Funktion ruft die Behance-Benutzer-API auf und kompiliert die Handlebars-Vorlage für den Header.

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

Lassen Sie uns diesen Code genauer untersuchen. Zuerst haben wir die Behance-Benutzer-API in a gespeichert behanceUserAPI Variable. Beachten Sie, dass wir das eingefügt haben callback = Parameter darin. Dieser Zusatz vermeidet das Zugriff nicht erlaubt Fehler, der durch die Same-Origin-Richtlinie verursacht wird.

Ein Wort zu sessionStorage

In diesem Tutorial haben wir bereits erwähnt, dass die Behance-API auf 150 Anfragen pro Stunde beschränkt ist. Daher haben wir uns dazu entschieden, HTML5-Offline-Speicher zum Speichern der Daten zu verwenden. In dieser Funktion haben wir verwendet sessionStorage. Der Grund für die Verwendung von sessionStorage zum Speichern der Benutzerprofildaten ist, dass der Benutzer sein Profil jederzeit ändern kann, wir können es jedoch nicht vorhersagen wann. Also anstatt zu verwenden lokaler Speicher Dadurch werden die Daten dauerhaft gespeichert. Wir verwenden sessionStorage, um die Daten zu entfernen, sobald wir die Registerkarte oder den Browser verlassen. Auf diese Weise werden nach dem Öffnen des Browsers und dem erneuten Zugriff auf die Website neue Daten aus der Behance-API abgerufen.

SessionStorage kann jedoch nur Zeichenfolge oder Nur-Text enthalten. Wie Sie anhand der obigen Funktion sehen können, haben wir verwendet JSON.stringify (); um JSON in einen String umzuwandeln, bevor wir ihn in sessionStorage speichern. Dann ziehen wir die Daten mit JSON.parse () um es wieder in JSON zu formatieren.

Wir haben auch eine Funktion namens erstellt setUserTemplate () um die Handlebars-Vorlage zu kompilieren und den Inhalt mit jQuery anzufügen .html (). Wir führen diese Funktion unter dieser Bedingung aus: wenn die Daten in sessionStorage ist verfügbar, führen wir die Funktion sofort aus, ansonsten müssen wir die API mit aufrufen $ .getJSON () zuerst und dann ausführen.

Außerdem kannst du sehen sessionStorage unter der Registerkarte "Ressourcen" in Chrome DevTools und dem Webkit-basierten Browser.

sessionStorage in Chrome DevTools

 Inhalt zusammenstellen

Wir fügen dann die Funktion unten hinzu, um die Portfolio-Vorlage in den Inhalt zu kompilieren. Diese Funktion ist mit der oben genannten Funktion für die Kopfzeile sehr ähnlich, mit Ausnahme der pro Seite variabel und per_page = Parameter, mit dem wir die Anzahl der aus der API abgerufenen Inhaltselemente begrenzen.

(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), result = template (projectData); $ ('# portfolio'). html (Ergebnis);; if (sessionStorage.getItem ('behanceProject')) setPortfolioTemplate (); else $ .getJSON (behanceProjectAPI, Funktion (Projekt) var data = JSON.stringify (Projekt); sessionStorage.setItem ('behanceProject', data); setPortfolioTemplate (););;) (); 

Wenn wir jetzt den Browser sehen, sollten wir bereits das Benutzerprofil sowie das Portfolio sehen. Sie sind aber noch nicht gestaltet.

Nächstes Mal…

Im folgenden Teil dieser Serie werden wir den Inhalt unseres Portfolios so gestalten, dass wir eine dynamische und ansprechende Portfolio-Seite erhalten. Bis dann!