Commit a1067cbd authored by Sam Muirhead's avatar Sam Muirhead

add working Noun Project 'Print from API' interface

- update output images for READMEs
- add video with overview of how to use the interface
- basic installation documentation
- add printable  PDFs with hundreds of hand-drawn illustrations
- index.js provided without Noun Project key/secret
parent ef5380af
# Using the Noun Project API to make use and attribution of images easier # Using the Noun Project API to make use and attribution of images easier
(see Issue #21, [_'Making accurate credits takes a long time'_](https://gitlab.com/cameralibre/cut-copy-and-paste/issues/21) for more context) (see Issue #21, [_'Making accurate credits takes a long time'_](https://gitlab.com/cameralibre/cut-copy-and-paste/issues/21) for more context)
I'm trying to make a very simple search interface for the Noun Project, where a workshop participant can type in a word, eg. _bee_, and the top 8 images returned will be immediately printed out, with license, attribution, ID, and a thumbnail (they will likely cut the metadata off the image, so the thumbnail helps them link it back to the image they have used) ![Noun Project Images: Printing from the API](Noun-Project_print-from-API.webm)
This is a very simple search interface for the Noun Project, designed to be set up on a laptop at the workshop. It uses the Noun Project API and a proxy server on the same computer for authentication.
In the search interface, a workshop participant can type in a word, eg. _banana_, and the top 8 images returned will be immediately printed out, with license, attribution, ID, and a thumbnail (they will likely cut the metadata off the image, so the thumbnail helps them link it back to the image they have used)
### Current layout: ### Current layout:
![](../../../Images/README-Images/np-search-print-output.png) ![](../../../Images/README-Images/np-search-print-output.png)
I'm also trying to make an automated credits page - participants can note down the images they have used (by referring to the commit log) and then type a series of IDs into the connected laptop. Up to 8 IDs can be input, and a credits page is printed. I would like to prioritize Noun Project images with the 'handdrawn' tag but I haven't worked out how to do that yet.
There's also an automated credits page - participants can note down the images they have used (by referring to the commit log, or by gluing the 'metadata' info to the back of their work). They then type a series of IDs into the connected laptop. Up to 8 IDs can be input, and a credits page is printed.
(for now, if a participant uses more than 8 images, they can print multiple credits pages and hack them together with scissors and glue) (for now, if a participant uses more than 8 images, they can print multiple credits pages and hack them together with scissors and glue)
### Current layout: ### Current layout:
![](../../../Images/README-Images/np-credits-print-output.png) ![](../../../Images/README-Images/np-credits-print-output.png)
The layouts are good enough to work with for now, and they're printing ok (with Beaker Browser) so the next steps are writing the rest of the javascript to correctly populate both pages, and setting it up to work with the Noun Project API directly. The layouts are printing nicely and have been tested in a workshop at the Mozilla Fellows Winter Summit in San Francisco.
\ No newline at end of file
Many thanks to [Darius Kazemi](https://tinysubversions.com/) for helping me with OAuth authentication and setting up the proxy server!
### Using the interface
To run this yourself, you'll need a free 'Playground' access key from the Noun Project's [Developers page](https://thenounproject.com/developers/).
Download this folder! You will need to paste your Noun Project key and secret into lines 47 & 48 of index.js for it to authenticate properly.
You'll also need to install [node.js](https://nodejs.org/en/) for your system.
In your terminal, [change directory](https://tutorial.djangogirls.org/en/
intro_to_command_line/#change-current-directory) to this folder, and type ```node index.js``` to start the server.
If it's working, you should see a message saying ```Example app running on port 3000!```
If you have any trouble, make sure that the ```cors``` module is installed. Still in the terminal, type ```npm install cors``` to install it.
Once the server is running, you can open ```search-results.html``` with a browser. Although Firefox is my go-to browser, but I found that printing from [Beaker Browser](https://beakerbrowser.com) gave me more reliable results with smaller margins - I assume any Chromium-based browser will perform similarly.
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Noun-project-SVG</title> <title>CREDITS</title>
<link rel="stylesheet" href="./styles.css"> <link rel="stylesheet" href="./styles.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
...@@ -202,11 +202,11 @@ ...@@ -202,11 +202,11 @@
<use href="#panel-0" transform="scale(2) translate(280.75,0)"/> <use href="#panel-0" transform="scale(2) translate(280.75,0)"/>
</svg> </svg>
<form action="/url-where-you-want-to-submit-form-data">
<input type="text" placeholder="12345">
<button type="submit">Add ID</button></form>
<button type="button" id="printButton" onclick="window.print()" >Print!</button> <input id=text type="text" placeholder="eg. 12345">
<button type="submit" onclick="getCreditInfo()">Add ID</button>
<button type="button" id="printButton" onclick="window.print()" >Print!</button>
</body> </body>
<script type="application/javascript" src="./populate-credits.js"></script> <script type="application/javascript" src="./populate-credits.js"></script>
......
...@@ -16,15 +16,36 @@ app.get('/', cors(), (req, res) => { ...@@ -16,15 +16,36 @@ app.get('/', cors(), (req, res) => {
}); });
}); });
app.get('/icon', cors(), (req, res) => {
console.log(req.query);
let icon = req.query.icon;
getIcon(icon).then((data) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.json(data)
});
});
app.get('/user', cors(), (req, res) => {
console.log(req.query);
let username = req.query.username;
let page = req.query.page;
getUserUploads(username, page).then((data) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.json(data)
});
});
app.listen(port, () => console.log(`Example app listening on port ${port}!`)) app.listen(port, () => console.log(`Example app listening on port ${port}!`))
function getImages(term) { function getImages(term) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var twitter = OAuth({ var nounProject = OAuth({
consumer: { consumer: {
key: 'xxxxxx', key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
secret: 'xxxxxx' secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
// ENTER YOUR NOUN PROJECT KEY & SECRET HERE // ENTER YOUR NOUN PROJECT KEY & SECRET HERE
}, },
signature_method: 'HMAC-SHA1', signature_method: 'HMAC-SHA1',
...@@ -34,7 +55,8 @@ function getImages(term) { ...@@ -34,7 +55,8 @@ function getImages(term) {
}); });
twitter.get({ nounProject.get({
// url: 'https://api.thenounproject.com/icons/' + term
url: 'https://api.thenounproject.com/icons/' + term, url: 'https://api.thenounproject.com/icons/' + term,
qs: { qs: {
limit: 8 limit: 8
...@@ -45,3 +67,54 @@ function getImages(term) { ...@@ -45,3 +67,54 @@ function getImages(term) {
}); });
}); });
} }
function getIcon(icon) {
return new Promise((resolve, reject) => {
var nounProject = OAuth({
consumer: {
key: 'b55cb0b73b784d579415f0e668d3b487',
secret: 'e0fc5d67199f44d7a23b6fc4337aea44'
// ENTER YOUR NOUN PROJECT KEY & SECRET HERE
},
signature_method: 'HMAC-SHA1',
hash_function: function(base_string, key) {
return crypto.createHmac('sha1', key).update(base_string).digest('base64');
}
});
nounProject.get({
// url: 'https://api.thenounproject.com/icons/' + term
url: 'https://api.thenounproject.com/icon/' + icon,
json: true
}, function(err, res, icon) {
resolve(icon);
});
});
}
function getUserUploads(username, page) {
return new Promise((resolve, reject) => {
var nounProject = OAuth({
consumer: {
key: 'b55cb0b73b784d579415f0e668d3b487',
secret: 'e0fc5d67199f44d7a23b6fc4337aea44'
// ENTER YOUR NOUN PROJECT KEY & SECRET HERE
},
signature_method: 'HMAC-SHA1',
hash_function: function(base_string, key) {
return crypto.createHmac('sha1', key).update(base_string).digest('base64');
}
});
nounProject.get({
// url: 'https://api.thenounproject.com/icons/' + term
url: 'https://api.thenounproject.com/user/' + username + "/uploads?limit=8&page=" + page,
json: true
}, function(err, res, icon) {
resolve(icon);
});
});
}
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Noun-project-SVG</title> <title>SEARCH</title>
<link rel="stylesheet" href="./styles.css"> <link rel="stylesheet" href="./styles.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
......
...@@ -123,6 +123,6 @@ svg line { ...@@ -123,6 +123,6 @@ svg line {
border: none; border: none;
} }
button, form, input { button, form, input, label {
display: none; display: none;
} }
function getUserIcons() {
let term = document.getElementById('text').value;
let page = document.getElementById('page').value;
fetch('http://localhost:3000/user/?username=' + term + "&limit=8&page=" + page)
.then(function(response) {
return response.json();
})
.then(function(userData) {
console.log(userData);
var icons = userData.uploads
for(i = 0; i < 8; i++){
var id = icons[i].id
var pngImage = icons[i].attribution_preview_url
var svgImage = icons[i].icon_url
var license = icons[i].license_description
document.getElementById(( "id-" + i )).textContent = id
if (license === "creative-commons-attribution"){
document.getElementById(( "license-" + i )).setAttribute("href", "#cc-by")
document.getElementById(( "image-" + i )).setAttribute("href", pngImage)
}
else {
document.getElementById(( "license-" + i )).setAttribute("href", "#cc0")
document.getElementById(( "image-" + i )).setAttribute("href", svgImage)
}
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>USER-SEARCH</title>
<link rel="stylesheet" href="./styles.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 1123 794" width="1123" height="794">
<defs>
<svg id="cc-by" height="32" width="70" viewBox="5 -3.5 140 64">
<circle fill="#FFF" cx="37.8" cy="28.5" r="28.8"/>
<path d="M37.4-3.5a31.2 31.2 0 0 1 29.8 19.7 32.6 32.6 0 0 1 0 24.6 32.9 32.9 0 0 1-29.7 19.7A31.1 31.1 0 0 1 14.8 51 31.9 31.9 0 0 1 37.4-3.5zm.2 5.8C30.2 2.3 24 4.8 19 9.9a27.5 27.5 0 0 0-5.8 8.6 25.2 25.2 0 0 0 0 20 26.5 26.5 0 0 0 43 8.3c5-4.8 7.4-11 7.4-18.3A26.3 26.3 0 0 0 56.1 10a25.3 25.3 0 0 0-18.5-7.7zm-.4 20.9l-4.3 2.2c-.5-1-1-1.6-1.7-2-.7-.4-1.3-.6-1.9-.6-2.8 0-4.3 2-4.3 5.7 0 1.7.4 3 1.1 4.1.7 1 1.8 1.6 3.2 1.6 1.9 0 3.2-1 4-2.8l4 2a9.4 9.4 0 0 1-8.5 5c-2.8 0-5.2-.8-6.9-2.6a9.9 9.9 0 0 1-2.6-7.3c0-3 .9-5.5 2.6-7.3a9 9 0 0 1 6.7-2.6c4 0 6.8 1.5 8.6 4.6zm18.4 0l-4.2 2.2c-.5-1-1-1.6-1.7-2-.7-.4-1.3-.6-2-.6-2.8 0-4.2 2-4.2 5.7 0 1.7.4 3 1 4.1.8 1 1.9 1.6 3.3 1.6 1.8 0 3.2-1 4-2.8l4 2c-1 1.6-2.1 2.8-3.6 3.7a9.2 9.2 0 0 1-4.9 1.3c-2.9 0-5.2-.8-7-2.6a10 10 0 0 1-2.5-7.3c0-3 .9-5.5 2.6-7.3a9 9 0 0 1 6.8-2.6c4 0 6.7 1.5 8.4 4.6z"/>
<g transform="translate(75)">
<circle fill="#FFF" cx="37.6" cy="28.8" r="28.3"/>
<path d="M37.4-3.5c9 0 16.6 3 22.8 9.3a31 31 0 0 1 9.3 22.7c0 9-3 16.5-9.1 22.5a31.6 31.6 0 0 1-23 9.5A31 31 0 0 1 15 51.1a30.8 30.8 0 0 1-9.4-22.6c0-8.8 3.1-16.3 9.4-22.7a30.6 30.6 0 0 1 22.5-9.3zm.2 5.8A25 25 0 0 0 19 9.9a25.7 25.7 0 0 0 0 37 25.3 25.3 0 0 0 18.5 7.8c7 0 13.3-2.6 18.6-7.9 5-4.8 7.5-11 7.5-18.3 0-7.3-2.5-13.5-7.6-18.6a25.2 25.2 0 0 0-18.5-7.6zM46 20.6v13h-3.6v15.6h-10V33.6H29v-13c0-.6.2-1.1.6-1.5a2 2 0 0 1 1.4-.6h13.2c.5 0 1 .2 1.4.6.4.4.6.9.6 1.5zm-13-8.3c0-3 1.4-4.5 4.4-4.5S42 9.3 42 12.3s-1.5 4.5-4.5 4.5-4.5-1.5-4.5-4.5z"/>
</g>
</svg>
<svg id="cc0" height="32" width="70" viewBox="5 -3.5 140 64">
<circle fill="#FFF" cx="37.8" cy="28.5" r="28.8"/>
<path d="M37.4-3.5a31.2 31.2 0 0 1 29.8 19.7 32.6 32.6 0 0 1 0 24.6 32.9 32.9 0 0 1-29.7 19.7A31.1 31.1 0 0 1 14.8 51 31.9 31.9 0 0 1 37.4-3.5zm.2 5.8C30.2 2.3 24 4.8 19 9.9a27.5 27.5 0 0 0-5.8 8.6 25.2 25.2 0 0 0 0 20 26.5 26.5 0 0 0 43 8.3c5-4.8 7.4-11 7.4-18.3A26.3 26.3 0 0 0 56.1 10a25.3 25.3 0 0 0-18.5-7.7zm-.4 20.9l-4.3 2.2c-.5-1-1-1.6-1.7-2-.7-.4-1.3-.6-1.9-.6-2.8 0-4.3 2-4.3 5.7 0 1.7.4 3 1.1 4.1.7 1 1.8 1.6 3.2 1.6 1.9 0 3.2-1 4-2.8l4 2a9.4 9.4 0 0 1-8.5 5c-2.8 0-5.2-.8-6.9-2.6a9.9 9.9 0 0 1-2.6-7.3c0-3 .9-5.5 2.6-7.3a9 9 0 0 1 6.7-2.6c4 0 6.8 1.5 8.6 4.6zm18.4 0l-4.2 2.2c-.5-1-1-1.6-1.7-2-.7-.4-1.3-.6-2-.6-2.8 0-4.2 2-4.2 5.7 0 1.7.4 3 1 4.1.8 1 1.9 1.6 3.3 1.6 1.8 0 3.2-1 4-2.8l4 2c-1 1.6-2.1 2.8-3.6 3.7a9.2 9.2 0 0 1-4.9 1.3c-2.9 0-5.2-.8-7-2.6a10 10 0 0 1-2.5-7.3c0-3 .9-5.5 2.6-7.3a9 9 0 0 1 6.8-2.6c4 0 6.7 1.5 8.4 4.6z"/>
<g transform="translate(80 -4)">
<circle r="30.1" cy="32.9" cx="31.3" fill="#fff"/>
<path d="M31.5 14c-10.6 0-13.2 10-13.2 18.5s2.6 18.4 13.2 18.4 13.2-10 13.2-18.4c0-8.5-2.6-18.4-13.2-18.4zm0 7c.4 0 .8 0 1.2.2.7.6 1.1 1.5.4 2.8l-7 13c-.3-1.7-.3-3.3-.3-4.5 0-3.7.3-11.5 5.7-11.5zm5.3 6c.3 2 .4 4 .4 5.5 0 3.7-.3 11.5-5.7 11.5a4.9 4.9 0 0 1-1.7-.3c-1.2-.6-2-1.5-.9-3.1z"/>
<path d="M31.4.5a32.5 32.5 0 0 0-32 32A31.4 31.4 0 0 0 9 55.1a31.6 31.6 0 0 0 34.9 7 32.9 32.9 0 0 0 17.4-17.3c1.5-3.8 2.3-8 2.3-12.3a32.5 32.5 0 0 0-9.2-22.6C48 3.6 40.3.5 31.4.5zm.2 5.8C38.8 6.3 45 8.8 50 14a25.7 25.7 0 0 1 7.6 18.5c0 7.4-2.5 13.5-7.5 18.3a27.5 27.5 0 0 1-18.6 7.8A26 26 0 0 1 7.3 42.4 25.6 25.6 0 0 1 13 14c5-5 11.2-7.6 18.5-7.6z"/>
</g>
</svg>
<line id="vertical-gridline" x1="0" y1="0" x2="0" y2="794"/>
<line id="horizontal-gridline" y1="0" x1="0" y2="0" x2="1123"/>
<clipPath id="thumbnail-clip">
<rect x="140" y="330" width="60" height="55" fill="red"/>
</clipPath>
</defs>
<use class="cutting-grid" href="#vertical-gridline" x="280.75" y="0" />
<use class="cutting-grid" href="#vertical-gridline" x="561.5" y="0" />
<use class="cutting-grid" href="#vertical-gridline" x="842.25" y="0" />
<use class="cutting-grid" href="#horizontal-gridline" x="0" y="397" />
<svg id="panel-0" width="280.75" height="397">
<defs>
<image id="image-0" width="270" height="270"
href=""/>
</defs>
<use href="#image-0" x="0" y="50" width="270" height="270"
/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="id-0" x="18" y="360"></text>
<use id="license-0" href="" width="50" x="210" y="338"/>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-0" id="thumbnail-0" transform="scale(0.25)" x="550" y="1310"/>
</g>
</svg>
<svg id="panel-1" x="280.75" y="0" width="280.75" height="397">
<defs>
<image id="image-1" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-1"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="id-1" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-1" id="thumbnail-1" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-1" href="" width="50" x="210" y="338"/>
</svg>
<svg id="panel-2" x="562.5" y="0" width="280.75" height="397">
<defs>
<image id="image-2" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-2"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="id-2" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-2" id="thumbnail-2" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-2" href="" width="50" x="210" y="338"/>
</svg>
<svg id="panel-3" x="842.25" y="0" width="280.75" height="397">
<defs>
<image id="image-3" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-3"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="id-3" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-3" id="thumbnail-3" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-3" href="" width="50" x="210" y="338"/>
</svg>
<svg id="panel-4"x="0" y="397" width="280.75" height="397">
<defs>
<image id="image-4" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-4"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="id-4" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-4" id="thumbnail-4" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-4" href="" width="50" x="210" y="338"/>
</svg>
<svg id="panel-5" x="280.75" y="397" width="280.75" height="397">
<defs>
<image id="image-5" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-5"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="id-5" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-5" id="thumbnail-5" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-5" href="" width="50" x="210" y="338"/>
</svg>
<svg id="panel-6" x="562.5" y="397" width="280.75" height="397">
<defs>
<image id="image-6" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-6"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="id-6" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-6" id="thumbnail-6" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-6" href="" width="50" x="210" y="338"/>
</svg>
<svg id="panel-7" x="842.25" y="397" width="280.75" height="397">
<defs>
<image id="image-7" width="270" height="270"
href=""/>
</defs>
<use x="0" y="50" width="270" height="270"
href="#image-7"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="id-7" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-7" id="thumbnail-4" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-7" href="" width="50" x="210" y="338"/>
</svg>
</svg>
<label for="text">User</label><input id=text type="text" placeholder="eg. jamescottell">
<label for="page">Page #</label><input id="page" type="text" value="1">
<button type="submit" onclick="getUserIcons()">Search</button>
<button type="button" id="printButton" onclick="window.print()" >Print!</button>
</body>
<script type="application/javascript" src="./user-search-results.js"></script>
</html>
...@@ -9,6 +9,13 @@ Here I have laid out a number of images loosely gathered under the broad umbrell ...@@ -9,6 +9,13 @@ Here I have laid out a number of images loosely gathered under the broad umbrell
In this folder you'll find a number of printable A4 PDFs. In the SVG folder you'll find the multi-layered SVG file used to arrange them, and the source images as downloaded from the Noun Project, all licensed CC-BY. In this folder you'll find a number of printable A4 PDFs. In the SVG folder you'll find the multi-layered SVG file used to arrange them, and the source images as downloaded from the Noun Project, all licensed CC-BY.
I've since developed a browser-based interface which can help you find, use and attribute Noun Project images:
![Noun Project Images: Printing from the API](./Print-from-API/Noun-Project_print-from-API.webm)
![Noun Project Search Page](../../Images/README-Images/np-search-print-output.png)
You can print and cut these A4 sheets into separate images (a paper cutter/guillotine helps to do this quickly). The images can be arranged on the remix table before the workshop starts, and you might set a first task such as: You can print and cut these A4 sheets into separate images (a paper cutter/guillotine helps to do this quickly). The images can be arranged on the remix table before the workshop starts, and you might set a first task such as:
> _"choose one or two images from the collection, and use them to create the title page for an imaginary zine. Write a Title and a Tagline to go with the imagery and communicate what the zine is about. This is just an imagination exercise for now - it doesn't have to be the zine that you will work on in this workshop, but instead it should be a zine that you would like to read - the zine ideas can be as complex, unusual or as ridiculous as you like. You can cut the images up, you can draw in anything else you like."_ > _"choose one or two images from the collection, and use them to create the title page for an imaginary zine. Write a Title and a Tagline to go with the imagery and communicate what the zine is about. This is just an imagination exercise for now - it doesn't have to be the zine that you will work on in this workshop, but instead it should be a zine that you would like to read - the zine ideas can be as complex, unusual or as ridiculous as you like. You can cut the images up, you can draw in anything else you like."_
...@@ -16,6 +23,6 @@ You can print and cut these A4 sheets into separate images (a paper cutter/guill ...@@ -16,6 +23,6 @@ You can print and cut these A4 sheets into separate images (a paper cutter/guill
Each Noun Project file has a unique number attached to it, which we can write into the 'Builds Upon' column of the Commit Log. If you search for that id on the Noun Project, you'll find the icon and its author info. Each Noun Project file has a unique number attached to it, which we can write into the 'Builds Upon' column of the Commit Log. If you search for that id on the Noun Project, you'll find the icon and its author info.
![search results - one icon found](../../Images/README-Images/noun-project-id-found.png) ![search results - one icon found](../../Images/README-Images/noun-project-id-found.png)
**Note:** currently it is not so easy to reference Noun Project ids and give credit: see issue #21. But it is much, much easier to use the credits page that I've set up - see above video or the [Print-from-API](./Print-from-API) folder.
![Noun Project Zine Credits Page](../../Images/README-Images/np-credits-print-output.png)
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment