Behance este un centru excelent pentru reclame pentru a împărtăși și pentru a-și prezenta munca și proiectele în curs. Spre deosebire de Dribbble sau Forrst care - așa cum le văd personal - sunt predominant populate de ilustctori și designeri de interfață, Behance cuprinde o gamă mai largă de domenii creative, inclusiv arhitectura, grafica mișcării, design auto și modă. În plus, Behance oferă și un set de API-uri pentru a avea acces la conținut.

În această serie scurtă, vom folosi API-ul Behance pentru a construi un site web de portofoliu personal. Vom extrage efectiv conținutul de la Behance și îl vom afișa pe propria noastră pagină web externă. Dar, înainte de a continua să construim site-ul web, trebuie mai întâi să investigăm modul în care Behance își gestionează conținutul și să vadă cum funcționează API.

Explorând Behance și API

Behance împarte conținutul său în module; și anume imagine, încorporare, video, audio și text. Datele obținute de la API nu cuprind numai adrese URL ale imaginilor, dar ar putea fi și adrese URL video, audio, precum și text simplu. Afișarea tuturor acestor tipuri de conținut pe site-ul nostru, cu toate acestea, ar complica lucrurile. Prin urmare, în acest tutorial, ne vom concentra pe imagini și vom exclude restul pentru a ne menține codul mai simplu.

Notă: Aceste tutoriale presupun că aveți un cont Adobe și un portofoliu Behance cu care să lucrați. În scopul demonstrației noastre, vom folosi portofoliul uimitor de Mike "Creativemints", care a fost de acord să ne lase să ne folosim în acest caz.

Ecranul de editare a proiectului Behance.

Când lucrați la propriile dvs. proiecte, după încărcarea conținutului dvs., Behance vă va afișa o fereastră de dialog pentru a încărca imaginea de pe copertă. Este vorba de crearea unei imagini prezentate în WordPress. Imaginea pe care o încărcăm aici va fi afișată ca o previzualizare a întregului proiect. În site-ul nostru vom folosi și imaginea de pe copertă.

Fereastra de dialog pentru încărcarea imaginii de acoperire în Behance.

După ce am setat imaginea de pe copertă, vom fi prezentați opțiuni pentru atribuirea mai multor atribute, cum ar fi câmpurile de creatie, etichete și o descriere a conținutului. Nu vom copleși site-ul nostru cu prea multe dintre aceste atribute. În acest tutorial, în afară de imaginea de pe copertă și de titlu, vom afișa doar atributele câmpului creativ.

Câmpuri de selecție în Behance.

Cheia API-ului Behance

Avem nevoie de o cheie API / Client ID unic pentru a avea acces la API-ul Behance. Pentru a obține unul, vizitați Behance Dev, înregistrați-vă aplicația, completați numele aplicației, site-ul și descrierea. câmpul Redirecționare URI (pentru OAuth) este opțional, cu excepția cazului în care intenționați să creați o aplicație care va necesita autentificarea utilizatorului.

Cheia API-ului Behance.

Odată ce avem cheia API, accesați punctele finale API Behance, unde veți găsi toate modalitățile de accesare a API-ului. Un API-ul Endpoint este adresa pentru un serviciu web, de obicei doar un simplu șir de URL HTTP.

În acest tutorial, va trebui să avem acces la Informații utilizator, proiectele utilizatorului. Iată punctele finale API pentru a solicita aceste informații:

Obțineți informațiile utilizatorului

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

Informațiile despre utilizator includ numărul de identificare al utilizatorului, numele, adresa utilizatorului, adresa URL a utilizatorului și o grămadă de alte date.

Obțineți proiectele unui utilizator

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

Vom primi lista de proiecte publicate numele de utilizator. Lista poate fi limitată cu per pagină parametru.

Obțineți conținutul unui proiect

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

API returnează informațiile despre proiect, inclusiv module a dat PROJECT_ID.

Deoarece API-ul Behance poate fi accesat prin HTTP, putem vedea datele imediat în browser. Dacă utilizați Chrome sau Firefox, vă sugerăm să instalați un plugin de browser numit JSONview pentru a vedea datele JSON într-un format mai ușor de citit.

Date JSON vizualizate cu JSONview

Limita API

Rețineți că Behance limitează API-ul cu 150 de solicitări pe oră. Dacă există prea multe cereri, vom ajunge cu răspunsuri goale și nu vom obține nimic. Iată cum este descrisă limita în documentație:

Solicitările sunt limitate la 150 pe oră și sunt măsurate în raport cu IP-ul cu care se confruntă publicul serverului sau dispozitivului care face cererea. Dacă faceți prea multe solicitări, veți primi un răspuns gol cu ​​un cod de stare 429 (prea multe solicitări).

Deci, în acest tutorial, vom utiliza HTML5 Offline Storage pentru a stoca datele offline pentru a minimiza solicitările. În loc să sunăm API de fiecare dată când încărăm pagina, îl putem extrage din spațiul de stocare. Consultați următoarele articole pentru mai multe despre stocarea offline HTML5:

• Sfat rapid: învățare despre stocarea locală HTML5
• Prezentarea, prezentarea și viitorul stocării locale pentru aplicații web

Site-ul Blueprint

Înainte de a construi structura site-ului nostru, să aruncăm o privire la planul site-ului web.

Site-ul Blueprint

După cum puteți vedea mai sus, site-ul nostru are trei secțiuni: Antet, Conținut și Subsol. Antetul contine numele de avatar al utilizatorului, numele, campurile de creatie si locatia acestora. Secțiunea Conținut afișează portofoliul utilizatorului cu numele și câmpurile de creatie. În subsolul paginii, vom arăta sigla Behance, ilustrând că site-ul web este alimentat de API-ul Behance.

Construirea conținutului și structurii site-ului

Să începem proiectul prin crearea unui director numit personal-portofoliu și un index.html cu marcaj HTML5 de bază. În index.html, vom face legătura cu următoarele biblioteci:

jQuery

În acest tutorial, vom folosi jQuery în primul rând pentru două lucruri: manipularea DOM și apelarea API-ului Behance prin intermediul lui $ .GetJSON () API-ul.

Astăzi, jQuery este împărțită în două versiuni, 1.x și 2.x. Versiunea 1.x își propune să sprijine browserele mai vechi, și anume Internet Explorer 8 și versiuni ulterioare, în timp ce versiunea 2.x se adresează numai celor mai moderne browsere. Vom presupune că acum trăim în lumea în care toată lumea utilizează browsere moderne (mă simt riscantă). Deci, în acest tutorial, putem folosi în siguranță jQuery 2.x.

Handlebars.js

Handlebars este un excelent motor templating bazat pe JavaScript. În acest tutorial, vom folosi Handlebars pentru a construi șablonul care va afișa datele preluate din API-ul Behance. Tuts + are două programe gratuite care vă pot ajuta să începeți cu Handlebars:

• Spuneți Salut la Handlebars
• Instrumente ale dezvoltatorului web modern - Handlebars

Dacă nu ați mai lucrat cu Handlebars înainte, vă sugerăm să vă faceți timp să finalizați aceste programe sau să citiți câteva tutoriale de bază înainte de a trece mai departe.

În acest tutorial, nu vom include bibliotecile JavaScript și CSS în directorul nostru de proiect, pentru a obține o dimensiune a fișierului mai mică a proiectului nostru. În schimb, le vom lega de la o sursă CDN de către CDNJS.com. Să deschidem index.html într-un editor de cod și să adăugăm următoarele biblioteci în interiorul cap etichetă.

Rețineți că, dacă serviți index.html printr-un server local, trebuie să adăugați http: // în fiecare dintre legăturile care indică CDNJS.com.

Împărțirea secțiunilor de site web în HTML

Marcajul HTML care definește secțiunile site-ului nostru - Antet, Conținut și Subsol - este destul de simplu. Folosim HTML5 antet element pentru Antet, a div pentru a împacheta conținutul și HTML5 subsol element pentru subsol. Fiecare dintre aceste elemente este atribuit cu un ID unic și o clasă pentru scopuri de stil și scriptare. Aici este marca noastră HTML în cadrul corp eticheta în această etapă.

Crearea șabloanelor de manevră

În această secțiune, vom construi șabloanele Handlebars pentru a afișa conținutul secțiunilor noastre de site web. Și vom începe cu șablonul pentru Header, care va fi populat cu datele utilizatorilor de la acest parametru API www.behance.net/v2/users/user_id.

Un șablon Handlebars este înfășurat cu un a scenariu eticheta cu un tip special text / x-ghidoane-șablon și de preferință cu un ID unic pentru selectarea mai ușoară a șablonului, așa cum este cazul.

În cadrul scenariu eticheta va stabili marcajul pentru conținutul Header-ului împreună cu clasele pentru scopuri de styling. De asemenea, includem clasa de la Fundația Icon Fonturi 3, care este inițializată cu Fi-, pentru a afișa pictogramele. În sfârșit, substituentul de conținut, sub forma unei expresii Handlebars.

 
User.display_name
 
 
 #cau user.fields 
acest
 /fiecare 
 
 
user.city, user.country
 

Fiecare dintre aceste substituente corespunde cheilor JSON preluate din API. User.display_name, de exemplu, va afișa numele afișat al utilizatorului. numele afisat este cheia reală care deține valoarea numelui. Dar, deoarece este îmbrăcată sub utilizator obiect, ne referim la acesta ca la user.display_name. Același lucru este valabil și pentru ceilalți substituenți din acest șablon, precum și pentru șabloanele care urmează.

Numele afișat al utilizatorului în JSON

Apoi, vom construi șablonul pentru afișarea portofoliului și acesta este ultimul șablon de Handlebars pe care îl vom crea pentru site-ul nostru. Pentru a începe, vom crea un nou div cu un ID portofoliul în secțiunea Conținut. Noi creăm asta div pentru a împacheta portofoliul, doar în cazul în care trebuie să adăugăm mai mult conținut în viitor. Apoi adăugăm eticheta de script care va conține șablonul. În acest moment, structura HTML a conținutului portofoliului nostru ar trebui să apară după cum urmează:

Aici puteți vedea că datele preluate de la www.behance.net/v2/users/user_id/projects returnează un mulțime conținând portofoliul utilizatorului. Pentru a afișa o matrice, va trebui să citim prin fiecare element din matrice folosind funcțiile "Handlebars" fiecare pentru ao afișa în șablon.

O serie de proiecte recuperate de la Behance API

Vom prezenta portofoliul într-o listă neordonată. Deci, să adăugăm a ul element și înfășurați fiecare  Li element cu #each ... / fiecare, după cum urmează:

Apoi, vom stabili conținutul fiecărui element. După cum am menționat mai devreme, vom afișa coperta imaginii, numele și câmpurile de creatie. Le vom conține în interiorul Li cu un nou div cu clasa, Portofoliul conținut.

... 
 
 #în acest caz. [404]  altceva #în cazul în care se înregistrează. [230]  Else  /dacă dacă 
 
acest nume
 
 
 #peste acest câmp 
acest
 /fiecare 
 
 
... 

Observați că există câțiva dintre ajutoarele condiționale ale Handlebars #în acest caz. [404], în acest șablon. Utilizăm ajutorul ajutător condiționat pentru a ne ajuta să ne referim la dimensiunea imaginii de pe coperta potrivită. Este posibil ca imaginea să nu fie întotdeauna la 404px (care este cea mai mare dimensiune stabilită pentru imaginea de pe copertă), poate fi disponibilă numai în dimensiuni mai mici. Aici puteți vedea că Behance a tăiat imaginea în următoarele dimensiuni: 404px, 230px, 202px și 115px.

Dimensiunea imaginii de acoperire

Marcajul HTML din subsol este foarte simplu. Vom adăuga două etichete paragraf: una va conține "Powered by", iar ultima va conține o legătură care indică Behance. Adaugam Fi-social-Behance clasa în A pentru a afișa sigla Behance din Fonturile Fundației Icon.

... 
 
Cu sprijinul
 
Behance
 
 

În această etapă, am finalizat construirea structurilor HTML care conțin conținutul site-ului nostru web. Cu toate acestea, atunci când îl deschidem în browser vom vedea că nimic nu apare încă! Acest lucru se datorează faptului că trebuie să solicităm API-ul și apoi să compilam datele împreună cu șablonul Handlebars.

Apelați API-ul Behance și compilați șablonul

Să creăm a scenariu etichetă pentru a conține JavaScript-ul nostru. Vom crea, de asemenea, două variabile pentru a conține cheia API Behance și ID-ul utilizatorului. Așa cum am menționat mai devreme, vom folosi portofoliul "Creativemints".

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

Sub aceste două variabile, adăugăm următoarea funcție. Această funcție va apela API-ul User Behance și va compila șablonul Handlebars pentru Header.

(funcția () var behanceUserAPI = 'http://www.behance.net/v2/users/'+ userID +'? callback =? & api_key = '+ apiKey; funcția setUserTemplate () var userData = JSON.parse ( Session.getItem ('behanceUser')), getTemplate = $ ('# profil-template'). html (), template = Handlebars.compile (getTemplate), result = template (userData); html (rezultat);; dacă (sessionStorage.getItem ('behanceUser')) setUserTemplate (); altceva $ .getJSON (behanceUserAPI, funcția (user) var data = JSON.stringify ('behanceUser', date); setUserTemplate (););;) (); 

Să examinăm mai detaliat acest cod. În primul rând, am stocat API-ul utilizatorului Behance într-un behanceUserAPI variabil. Observați că am inserat apel invers = parametru în cadrul acestuia. Această adăugire evită Nu este permis accesul eroare cauzată de politica de origine identică.

Un cuvânt pe sesiunea de discuții

La începutul acestui tutorial am menționat că API-ul Behance este limitat la 150 de solicitări pe oră, deci am decis să folosim HTML5 Offline Storage pentru a stoca datele. În această funcție, am folosit sessionStorage. Motivul utilizării sesiunii de stocare pentru stocarea datelor profilului de utilizator este că utilizatorul ar putea să-și schimbe profilul oricând, dar nu putem anticipa cand. Deci, în loc de a folosi localStorage care va stoca datele în mod persistent, vom folosi sessionStorage care va elimina datele după ce am părăsit fila sau browserul. Astfel, odată ce vom deschide browserul și vom accesa site-ul din nou, acesta va extrage date noi din API-ul Behance.

Cu toate acestea, sesiunea de stocare poate conține numai șir sau text simplu. Deci, după cum puteți vedea din funcția de mai sus, am folosit JSON.stringify (); pentru a transforma JSON într-un șir înainte de al stoca în sesiune. Atunci vom trage datele JSON.parse () pentru ao format înapoi la JSON.

De asemenea, am creat o funcție numită setUserTemplate () pentru a compila șablonul Handlebars și a adăuga conținutul utilizând jQuery .html (). Funcționăm această funcție în această condiție: dacă datele din sessionStorage este disponibil, executam imediat functia, altfel va trebui sa sunam API folosind $ .GetJSON () mai întâi și executați ulterior.

În plus, puteți vedea sessionStorage în fila Resurse din browserul Chrome DevTools și din browserul Webkit.

sessionStorage în Chrome DevTools

 Compilarea conținutului

Apoi adăugăm funcția de mai jos pentru a compila șablonul de portofoliu în Conținut. Această funcție este foarte asemănătoare cu funcția de mai sus pentru Header, cu excepția funcției per pagină variabilă și per_page = parametru pe care îl vom folosi pentru a limita numărul de elemente de conținut preluate din API.

(funcția) var perPage = 12; var behanceProjectAPI = 'http://www.behance.net/v2/users/'+ userID +' / projects? callback =? & api_key = '+ apiKey +' & per_page = perPage; funcția setPortfolioTemplate () var projectData = JSON.parse (sessionStorage.getItem ('behanceProject')), getTemplate = $ ('# portofoliu-șablon') html (), template = Handlebars.compile (getTemplate) = template (projectData); $ ('# portofoliul'); html (rezultat); if (sessionStorage.getItem ('behanceProject')) setPortfolioTemplate (); else $ .getJSON (behanceProjectAPI, var data = JSON.stringify (proiect); sessionStorage.setItem ('behanceProject', date); setPortfolioTemplate (););;) (); 

Acum, când vedem browserul, ar trebui să vedem deja profilul utilizatorului, precum și portofoliul. Dar ele nu sunt încă în stil.

Data viitoare…

În următoarea parte a acestei serii, vom modela portofoliul nostru de conținut, oferindu-ne o pagină de portofoliu dinamică și receptivă. Ne vedem atunci!