Behance è un grande hub per i creativi per condividere e mostrare il loro lavoro e progetti in corso. A differenza di Dribbble o Forrst che, come personalmente li vedo, sono prevalentemente popolati da illustratori e designer di interfacce utente, Behance comprende una gamma più ampia di campi creativi tra cui Architecture, Motion Graphics, Automotive Design e Fashion. Oltre a questo, Behance fornisce anche un set di API per ottenere l'accesso al contenuto.

Durante questa breve serie, useremo l'API Behance per costruire un sito web di portfolio personale. Tireremo efficacemente i contenuti da Behance e li visualizzeremo sulla nostra pagina web esterna. Ma prima di procedere ulteriormente con la creazione del sito web, dobbiamo prima esaminare come Behance gestisce il suo contenuto e vedere come funziona l'API.

Esplorando Behance e l'API

Behance divide il suo contenuto in moduli; vale a dire immagine, incorporamento, video, audio e testo. I dati recuperati dall'API non comprenderanno solo gli URL delle immagini, ma potrebbero anche essere video, URL audio e testo semplice. Visualizzare tutti questi tipi di contenuti nel nostro sito Web, tuttavia, complicherebbe le cose. Pertanto, in questo tutorial, ci concentreremo sulle immagini ed escluderemo il resto per semplificare il nostro codice.

Nota: Questo tutorial presuppone che tu abbia un account Adobe e un portfolio Behance con cui lavorare. Ai fini della nostra dimostrazione, useremo lo straordinario portfolio di Mike "Creativemints", che ha gentilmente accettato di lasciarci usare il suo lavoro in questo caso.

Schermata di modifica del progetto Behance.

Quando lavori sui tuoi progetti, dopo aver caricato i tuoi contenuti, Behance ti mostrerà una finestra di dialogo per caricare l'immagine di copertina. Questo è come impostare un'immagine in primo piano in WordPress. L'immagine che carichiamo qui verrà visualizzata come anteprima dell'intero progetto. Nel nostro sito web utilizzeremo anche l'immagine di copertina.

La finestra di dialogo per caricare l'immagine di copertina in Behance.

Una volta impostata l'immagine di copertina, verranno presentate le opzioni per assegnare diversi attributi come campi creatività, tag e una descrizione del contenuto. Non sovraccaricheremo il nostro sito web con troppi di questi attributi. In questo tutorial, a parte l'immagine di copertina e il titolo, mostreremo solo gli attributi del campo creativo.

Selezione dei campi creativi in ​​Behance.

Chiave API Behance

Abbiamo bisogno di una chiave API / ID client univoci per ottenere l'accesso all'API Behance. Per ottenerne uno, vai su Behance Dev, registra la tua app, compila Nome applicazione, Sito web e Descrizione. il campo UI di reindirizzamento (per OAuth) è facoltativo, a meno che non si intenda creare un'app che richiede l'autenticazione dell'utente.

Chiave API Behance.

Una volta che abbiamo la chiave API, vai a Behance API Endpoint dove troverai elencati tutti i modi per ottenere l'accesso all'API. Un API Endpoint è l'indirizzo per un servizio web, di solito solo una semplice stringa di URL HTTP.

In questo tutorial, avremo bisogno di accedere a Informazioni utente, i progetti dell'utente. Ecco gli endpoint API per richiedere queste informazioni:

Ottieni le informazioni di un utente

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

Le informazioni utente includono il numero ID utente, il nome, la posizione dell'utente, l'URL dell'avatar utente e una serie di altri dati.

Ottieni i progetti di un utente

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

Otterremo la lista dei progetti pubblicati del dato ID utente. L'elenco può essere limitato con per pagina parametro.

Ottieni il contenuto di un progetto

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

L'API restituisce le informazioni sul progetto incluso moduli del dato project_id.

Poiché l'API Behance è accessibile tramite HTTP, possiamo vedere i dati immediatamente nel browser. Se utilizzi Chrome o Firefox, ti suggerisco di installare un plug-in per il browser chiamato JSONview per vedere i dati JSON in un formato più leggibile.

Dati JSON visualizzati con JSONview

Limite API

Si prega di notare che Behance limita l'API di 150 richieste all'ora. Se ci sono troppe richieste, finiremo con risposte vuote e non otterremo nulla. Ecco come viene descritto il limite nella documentazione:

Le richieste sono limitate a 150 all'ora e sono misurate rispetto all'IP pubblico del server o del dispositivo che effettua la richiesta. Se si fanno troppe richieste, si riceverà una risposta vuota con un codice di stato 429 (Too Many Requests).

Quindi, in questo tutorial, utilizzeremo l'archiviazione offline HTML5 per archiviare i dati offline per ridurre al minimo le richieste. Invece di chiamare l'API ogni volta che cariciamo la pagina, possiamo recuperarla dallo spazio di archiviazione. Fai riferimento ai seguenti articoli per ulteriori informazioni sullo spazio di archiviazione offline HTML5:

• Suggerimento rapido: informazioni sull'archiviazione locale HTML5
• Il passato, il presente e il futuro dello storage locale per applicazioni Web

Il modello del sito web

Prima di costruire la struttura del nostro sito web, diamo un'occhiata al progetto del sito web.

Il modello del sito web

Come puoi vedere sopra, il nostro sito ha tre sezioni: Intestazione, Contenuto e Piè di pagina. L'intestazione contiene l'avatar dell'immagine dell'utente, il nome, i campi della creatività e la loro posizione. La sezione Contenuto mostra il portfolio dell'utente con il nome e i campi della creatività. Nel Footer, mostreremo il logo Behance, che illustra che il sito web è alimentato dall'API Behance.

Costruire il contenuto e la struttura del sito web

Iniziamo il nostro progetto creando una directory chiamata personal-portafoglio e un index.html con markup HTML5 di base. Nell'index.html, collegheremo alle seguenti librerie:

jQuery

In questo tutorial, useremo jQuery principalmente per due cose: manipolazione DOM e chiamata l'API Behance attraverso la sua $ GetJSON () API.

Oggi, jQuery è diviso in due versioni, 1.xe 2.x. La versione 1.x ha lo scopo di supportare i browser più vecchi, ovvero Internet Explorer 8 e versioni successive, mentre la versione 2.x si rivolge solo a browser più moderni. Assumeremo che ora viviamo nel mondo in cui tutti utilizzano i browser moderni (mi sento rischioso). Quindi, in questo tutorial, possiamo tranquillamente usare jQuery 2.x.

Handlebars.js

Handlebars è un ottimo motore di template basato su JavaScript. In questo tutorial, utilizzeremo Handlebars per creare il modello che visualizzerà i dati recuperati dall'API di Behance. Tuts + ha due screencast gratuiti che possono aiutarti a iniziare con Handlebars:

• Dì Ciao a Manubri
• Strumenti del moderno sviluppatore web - manubri

Se non hai ancora lavorato con Handlebars, ti suggeriamo di dedicare il tuo tempo a terminare questi screencast o leggere alcuni tutorial di base prima di procedere ulteriormente.

In questo tutorial, non includeremo le librerie JavaScript e CSS nella nostra directory di progetto al fine di ottenere dimensioni del file più piccole del nostro progetto. Invece li collegheremo da una fonte CDN da CDNJS.com. Apriamo il nostro index.html in un editor di codice e aggiungiamo le seguenti librerie all'interno del capo etichetta.

Si noti che se si serve index.html attraverso un server locale, è necessario aggiungere http: // in ciascuno dei collegamenti che puntano a CDNJS.com.

Dividere le sezioni del sito Web in HTML

Il codice HTML che definisce le sezioni del nostro sito Web: Intestazione, Contenuto e Piè di pagina è abbastanza semplice. Usiamo l'HTML5 intestazione elemento per l'intestazione, a div per avvolgere il contenuto e l'HTML5 footer elemento per il piè di pagina. A ciascuno di questi elementi viene assegnato un ID univoco e una classe per scopi di stile e di script. Ecco il nostro markup HTML all'interno del corpo tag in questa fase.

Creazione di modelli di manubri

In questa sezione, costruiremo i modelli di Handlebars per visualizzare il contenuto delle sezioni del nostro sito web. E inizieremo con il modello per l'intestazione, che verrà popolato con i dati degli utenti da questo endpoint dell'API www.behance.net/v2/users/user_id.

Un modello di Handlebars è avvolto con a copione tag con un tipo speciale text / x-manubrio-template e preferibilmente con un ID univoco per facilitare la selezione del modello, in questo modo.

All'interno del copione tag pubblicheremo il markup per il contenuto dell'intestazione insieme alle classi per scopi di stile. Includiamo anche la classe di Foundation Icon Fonts 3, che è inizializzata con fi-, per mostrare le icone. Infine, il segnaposto del contenuto sotto forma di un'espressione Handlebars.

 
 User.display_name
 
 
 #each user.fields 
Questo
 /ogni 
 
 
user.city, user.country
 

Ciascuno di questi segnaposto corrisponde alle chiavi JSON recuperate dall'API. Il User.display_name, per esempio, mostrerà il nome visualizzato dell'utente. Il nome da visualizzare è la chiave effettiva che contiene il valore del nome. Ma dal momento che è annidato sotto il utente oggetto, ci riferiamo ad esso come user.display_name. Lo stesso vale per gli altri segnaposti in questo modello, nonché i modelli che seguono.

Nome visualizzato dell'utente in JSON

Successivamente, costruiremo il modello per visualizzare il portfolio, e questo è l'ultimo modello di manubri che creeremo per il nostro sito web. Per iniziare, creiamo un nuovo div con un ID portafoglio all'interno della sezione Contenuto. Creiamo questo div per avvolgere il portafoglio, nel caso in cui abbiamo bisogno di aggiungere più contenuti all'interno in futuro. Quindi aggiungiamo il tag script che conterrà il modello. A questo punto la struttura HTML del nostro contenuto del portfolio dovrebbe apparire come segue:

Qui puoi vedere che i dati recuperati da www.behance.net/v2/users/user_id/projects restituisce un schieramento contenente il portafoglio dell'utente. Per visualizzare un array, dovremo scorrere in loop ogni elemento dell'array usando Handlebars ' ogni per visualizzarlo nel modello.

Una serie di progetti recuperati dall'API di Behance

Disporremo il portfolio in una lista non ordinata. Quindi aggiungiamo un ul elemento e avvolgere ciascuno  Li elemento con #each ... / each, come segue:

Quindi, stabiliremo il contenuto di ciascun elemento. Come accennato in precedenza, mostreremo la copertina dell'immagine, il nome e i campi della creatività. Li contatteremo all'interno del Li con un nuovo div con la classe, portafoglio di contenuti.

... 
 
 #if this.covers. [404]  else #qu this.covers. [230]  altro  /se se 
 
questo nome
 
 
 #each this.fields 
Questo
 /ogni 
 
 
... 

Si noti che ci sono alcuni assistenti condizionali di Handlebars, come #if this.covers. [404], in questo modello. Usiamo l'helper condizionale per aiutarci a fare riferimento alla giusta dimensione dell'immagine di copertina. L'immagine potrebbe non essere sempre a 404px (che è la dimensione più alta impostata per l'immagine di copertina), potrebbe essere disponibile solo in dimensioni inferiori. Qui puoi vedere che Behance ritaglia l'immagine in queste dimensioni: 404px, 230px, 202px e 115px.

Coprire le dimensioni dell'immagine

Il markup HTML nel Footer è davvero semplice. Aggiungeremo due tag di paragrafo: uno conterrà "Powered by" e l'ultimo conterrà un collegamento che punta a Behance. Noi aggiungiamo fi-social-Behance classe nel un tag per mostrare il logo Behance da Foundation Icon Fonts.

... 
 
Offerto da
 
Behance
 
 

In questa fase, abbiamo completato la costruzione delle strutture HTML che illustrano il contenuto del nostro sito web. Tuttavia, quando lo apriamo nel browser, non vedremo più nulla! Questo perché abbiamo bisogno di fare una richiesta all'API e quindi compilare i dati insieme al modello di Handlebars.

Chiamare API Behance e compilare il modello

Creiamo a copione tag per contenere il nostro JavaScript. Creeremo anche due variabili per contenere la chiave API Behance e l'ID utente. Come accennato in precedenza, utilizzeremo il portfolio di "Creativemints".

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

Sotto queste due variabili, aggiungiamo la seguente funzione. Questa funzione chiamerà l'API utente Behance e compilerà il modello Handlebars per l'intestazione.

(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 (risultato);; if (sessionStorage.getItem ('behanceUser')) setUserTemplate (); else $ .getJSON (behanceUserAPI, funzione (utente) var data = JSON.stringify (utente); sessionStorage.setItem ('behanceUser', data); setUserTemplate (););;) (); 

Esaminiamo questo codice in maggior dettaglio. Innanzitutto, abbiamo archiviato l'API dell'utente Behance in a behanceUserAPI variabile. Si noti che abbiamo inserito il file callback = parametro al suo interno. Questa aggiunta evita il Accesso non consentito errore causato dalla politica Same-Origin.

Una parola su sessionStorage

In precedenza in questo tutorial abbiamo menzionato che l'API di Behance è limitata a 150 richieste all'ora e quindi abbiamo deciso di utilizzare l'archiviazione offline HTML5 per archiviare i dati. In questa funzione, abbiamo usato sessionStorage. Il motivo alla base dell'uso di sessionStorage per l'archiviazione dei dati del profilo utente è che l'utente può modificare il proprio profilo in qualsiasi momento, ma non è possibile prevederlo quando. Quindi, invece di usare memoria locale che memorizzerà i dati in modo persistente, usiamo sessionStorage che rimuoverà i dati una volta che avremo abbandonato la scheda o il browser. In questo modo, una volta aperto il browser e accedendo nuovamente al sito Web, verranno estratti nuovi dati dall'API di Behance.

Il sessionStorage, tuttavia, può contenere solo stringhe o testo semplice. Quindi, come puoi vedere dalla funzione sopra, abbiamo usato JSON.stringify (); per trasformare JSON in una stringa prima di memorizzarla in sessionStorage. Quindi inseriremo i dati con JSON.parse () per formattarlo nuovamente in JSON.

Abbiamo anche creato una funzione chiamata setUserTemplate () compilare il modello di Handlebars e aggiungere il contenuto usando jQuery .html (). Eseguiamo questa funzione in questa condizione: se i dati sono in sessionStorage è disponibile, eseguiamo immediatamente la funzione, altrimenti dovremo chiamare l'API usando $ GetJSON () prima e successivamente eseguirlo.

Inoltre, puoi vedere sessionStorage sotto la scheda Risorse in Chrome DevTools e browser basato su Webkit.

sessionStorage in Chrome DevTools

 Compilare il contenuto

Quindi aggiungiamo la funzione seguente per compilare il modello di portfolio nel Contenuto. Questa funzione è molto simile alla funzione precedente per l'intestazione, ad eccezione di per pagina variabile e per_page = parametro che useremo per limitare il numero di elementi di contenuto recuperati dall'API.

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

Ora quando vediamo il browser, dovremmo già vedere il profilo utente e il portfolio. Ma non sono ancora in stile.

La prossima volta…

Nella parte successiva di questa serie, modelleremo i contenuti del nostro portfolio, dandoci una pagina di portafoglio dinamica e reattiva. Ci vediamo!