test for thumbnail

thumb
km0 2 years ago
parent 118e1f5655
commit 576553f4d9

@ -11,7 +11,7 @@ categories:
- Games
---
## There are 100 lot boxes with 100 different jigsaw puzzles of 100 pieces.*
## There are 100 lot boxes with 100 different jigsaw puzzles of 100 pieces.*
![100 boxes compose the face of aymeric if seen from a precise point of view](https://hub.xpub.nl/soupboat/~kamo/static/img/100-boxes.jpg)
_\* (exact quantities to be defined)_
@ -22,39 +22,39 @@ Each puzzle is an A2 sized image displaying the works we did during this trimest
_f.e. A puzzle could be the rules for an RPG; or the map of a bitsy game with some critical texts about gamification; a generated maze, a fan fiction, the glossary, the list of one sentence games, etc._
In other words, the collection of puzzles will be a sort of inventory of our research framed in the form of jigsaw.
In other words, the collection of puzzles will be a sort of inventory of our research framed in the form of jigsaw.
## The pieces are scattered through all the loot boxes, in a way that each one contains parts of multiple puzzles.
![shuffle of the jiigsaw pieces](https://hub.xpub.nl/soupboat/~grgr/static/img/jigmix.png)
This could be done in a meaningful way: the idea is not to have total random pieces, but legible fragments from each content.
## When players buy the loot box they can compose the puzzle, but the result is a patchwork of different images.
## When players buy the loot box they can compose the puzzle, but the result is a patchwork of different images.
![in each loot box there is a patchwork of different puzzles](https://hub.xpub.nl/soupboat/~grgr/static/img/patchworks.png)
If the puzzles have different images but the same pieces pattern, each loot box can have a complete puzzle, but with mixed pieces. In this way we can avoid the frustration that having an incomplete jigsaw puzzle could cause.
If the puzzles have different images but the same pieces pattern, each loot box can have a complete puzzle, but with mixed pieces. In this way we can avoid the frustration that having an incomplete jigsaw puzzle could cause.
## On the website of SI17 the players can upload their fragments, and compose together an online version to complete all the jigsaw puzzles.
## On the website of SI17 the players can upload their fragments, and compose together an online version to complete all the jigsaw puzzles.
![demo web interface](https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-web.jpg)
We can numerate or identify each piece of the puzzles with a code. This could be done when we generate the pattern of the puzzle with Python 👀. To upload a fragment of puzzle, the player is required to insert the code of the pieces, and maybe take a picture. In this way we can be sure that only who has the fragment can insert it online.
We can numerate or identify each piece of the puzzles with a code. This could be done when we generate the pattern of the puzzle with Python 👀. To upload a fragment of puzzle, the player is required to insert the code of the pieces, and maybe take a picture. In this way we can be sure that only who has the fragment can insert it online.
## Optional feature: users can upload pictures of their fragments and we could have a collective documentation of the work.
## Optional feature: users can upload pictures of their fragments and we could have a collective documentation of the work.
![demo upload pictures](https://hub.xpub.nl/soupboat/~kamo/static/img/share-puzzle.jpg)
_This is not unpaid work, it's participation_
Nice feature for the website could be that you can see the digital version of the puzzle, but on mouse :hover we could show the pictures from the public. A puzzle of photos of puzzles. This could be challenging but funny to develop.
Nice feature for the website could be that you can see the digital version of the puzzle, but on mouse :hover we could show the pictures from the public. A puzzle of photos of puzzles. This could be challenging but funny to develop.
## On the website of SI17 there is a community section for exchanging the fragments and complete the puzzle
![demo xchange puzzle fragments](https://hub.xpub.nl/soupboat/~kamo/static/img/xchange-puzzle.jpg)
The community section with users and exchange etc could be tricky, but we can stay as simple as possible and do it with Flask. The exchange section should exclude by design the speculation on the pieces or money. A fragment for a fragment.
The community section with users and exchange etc could be tricky, but we can stay as simple as possible and do it with Flask. The exchange section should exclude by design the speculation on the pieces or money. A fragment for a fragment.
## On the website of SI17 the public can access to the experiments, games and researches as well
![demo other contents on the website](https://hub.xpub.nl/soupboat/~grgr/static/img/lootbweb.png)
In this way we can provide access to the contents such as the bitsy games, the karaoke video, the ruleset of our games, the reading list, etc.
In this way we can provide access to the contents such as the bitsy games, the karaoke video, the ruleset of our games, the reading list, etc.
### Risk / Benefit assessment
@ -64,10 +64,10 @@ PROS
+ a lot of design
+ not to much code
+ use what we already have
+ interesting interaction with the public
+ performative element ready for the launch
+ interesting interaction with the public
+ performative element ready for the launch
+ multiple temporalities (individual puzzle, contents, shared puzzles)
+ world building
+ world building
CONS:
- not an API 👀
@ -80,7 +80,7 @@ CONS:
The process to make the puzzles could be easy as design - print - cut - shuffle - package, nothing more (+ website)
![box](https://hub.xpub.nl/soupboat/~grgr/static/img/puzzle-box.jpg)
The loot box could provide a context and the instruction of the game, as well as the link to the website.
The loot box could provide a context and the instruction of the game, as well as the link to the website.
## Scenario
@ -89,13 +89,13 @@ Mapping the chaotic evil puzzles in the through the different scenari
### of the form
_scenario 1: The lootbox is a physical box that contains something_
_scenario 1: The lootbox is a physical box that contains something_
Fragments of several puzzles.
### of the feature
_scenario 7: The items in the loot-box are complementary and it is necessary to connect with other loot-box owners in order to assemble the pieces together._
_scenario 7: The items in the loot-box are complementary and it is necessary to connect with other loot-box owners in order to assemble the pieces together._
There is a single player aspect and there is a collaborative aspect. These two components could be mediated by an online platform, such as the online shared puzzles, but could also work offline if people just combine the pieces of their loot boxes.
@ -103,11 +103,11 @@ There is a single player aspect and there is a collaborative aspect. These two c
_scenario 2: The loot box is a collection of the prototyped games (and researches!) we did so far curated in some kind of form_
The jigsaw puzzle is just a form of encryption of our contents. A shared surface in which we can publish really different things such as a fan fiction, a board game, a link to a video karaoke or a videogame, an essay, the characters of a roleplaying game, etc.
The jigsaw puzzle is just a form of encryption of our contents. A shared surface in which we can publish really different things such as a fan fiction, a board game, a link to a video karaoke or a videogame, an essay, the characters of a roleplaying game, etc.
_scenario 3: The loot box is a collection of mini-games + an ultimate game that has to be performed with other players that purcahsed the LB_
There are several layers of playability and access:
There are several layers of playability and access:
1. to solve the fragments (single player jigsaw)
2. to access the contents (games, texts, etc. )
@ -186,7 +186,7 @@ Thanks and see you sun ☀️
- short term puzzles (link to multimedia contents, puzzle shards)
- long term puzzles (hidden messages, 1 word in each puzzles and a secret sentence)
- size and quantity
- The jigsaw puzzles results should be secret? There would be much more mistery. Can we reveal only during the launch, but not on the loot boxes? Maybe is a compromise, but maybe is not necessary. Should we reveal them only in the website meanwhile they are completed? Could be.
- The jigsaw puzzles results should be secret? There would be much more mistery. Can we reveal only during the launch, but not on the loot boxes? Maybe is a compromise, but maybe is not necessary. Should we reveal them only in the website meanwhile they are completed? Could be.
- [Generate Jigsaw Puzzle with python](https://github.com/jkenlooper/piecemaker)
- [How To Laser Cut a Jigsaw Puzzle](https://www.youtube.com/watch?v=xqhOrY8unn4)
- [Jigsaw puzzle generator](https://draradech.github.io/jigsaw/index.html)

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 23 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 162 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 187 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.3 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1007 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 630 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 400 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 16 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 374 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 23 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 162 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 173 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 194 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.3 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1007 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 630 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 221 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 233 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

@ -1,7 +1,7 @@
---
title: Post-it Visual Identity
description: How to deliver a pubblication in post-it format
categories:
categories:
- SI17
- Visual
date: 20/03/2022
@ -14,50 +14,50 @@ links:
## Small pages big text
Working with the post-it format the team1 (supi, mitsa, erica, me) approached the visual identity with two things in mind:
Working with the post-it format the team1 (supi, mitsa, erica, me) approached the visual identity with two things in mind:
1. The office aesthetic, that kind of default aura that surrounds workspaces
2. The blurred line between personal writings such as memos and todolists and formal documents.
2. The blurred line between personal writings such as memos and todolists and formal documents.
We used the post-it format as a module. Short sentences, big font size, different writing styles, few images. The idea was to facilitate a non-linear combination across the original page order of the pubblication. We choose not to put page numbers: instead we opted for a progress bar in each contribution.
We used the post-it format as a module. Short sentences, big font size, different writing styles, few images. The idea was to facilitate a non-linear combination across the original page order of the pubblication. We choose not to put page numbers: instead we opted for a progress bar in each contribution.
In the body of the post-it we stayed simple using a default sans-serif font. We used the Bitsi font from Supi and Jian for the covers of each contribution and the main index.
In the body of the post-it we stayed simple using a default sans-serif font. We used the Bitsi font from Supi and Jian for the covers of each contribution and the main index.
## Post-it
We designed 8 types of post-it: from text and image post-it to complex card layout, we tried to embed the form of every contribution in the generator pipeline.
We designed 8 types of post-it: from text and image post-it to complex card layout, we tried to embed the form of every contribution in the generator pipeline.
### Text
The basic type of post-it was the text one. We went with a super big font-size and an unexpected alignment. After a certain amount of characters the font-size is set to shrink a bit for a small text version.
![Text](/soupboat/~kamo/static/img/post-it/text.jpg)
![Text](post-it/text.jpg)
_From What is a loot box?_
![Text Small](/soupboat/~kamo/static/img/post-it/small-text.jpg)
![Text Small](post-it/small-text.jpg)
_From Life Hacks!_
### Dialogue
It can display text in the four corners of the postit. Used for the NIM dialogue and some single word sentence in What is a loot box?
It can display text in the four corners of the postit. Used for the NIM dialogue and some single word sentence in What is a loot box?
![Dialogue](/soupboat/~kamo/static/img/post-it/dialogue.jpg)
![Dialogue](post-it/dialogue.jpg)
_Dialogue_
### Definition and Cell
Definitions and cells are the main modules for the Crossword Imaginary Grid Game from Emma. Each cell occupies a position in a grid, and is used to build the crossword structure. The definitions indicate a starting point and some hints to guess the word.
Definitions and cells are the main modules for the Crossword Imaginary Grid Game from Emma. Each cell occupies a position in a grid, and is used to build the crossword structure. The definitions indicate a starting point and some hints to guess the word.
![Image](/soupboat/~kamo/static/img/post-it/definition.jpg)
![Image](post-it/definition.jpg)
_Definition_
![Picutre](/soupboat/~kamo/static/img/post-it/cell.jpg)
![Picutre](post-it/cell.jpg)
_Cell_
@ -67,7 +67,7 @@ _Cell_
Card designed starting from the layout Miriam prepared for her version of the game Quartet.
![Card](/soupboat/~kamo/static/img/post-it/card.jpg)
![Card](post-it/card.jpg)
_Card_
@ -76,10 +76,10 @@ _Card_
For images we decided on a full page approach. We have two post-it: image is for normal images, while picture is for graphics that folllow the pubblication main color. Both can display a caption in overlay.
![Image](/soupboat/~kamo/static/img/post-it/image.jpg)
![Image](post-it/image.jpg)
_From Katamari Fanfic_
![Picutre](/soupboat/~kamo/static/img/post-it/picture.jpg)
![Picutre](post-it/picture.jpg)
_From Xquisite Branch_
@ -88,7 +88,7 @@ _From Xquisite Branch_
For QR code we choose to be as messy as possible. QR carries a specific visual language. We tried to force it into something else by cloning each code in repetition, with a glitchy result.
![NIM Fanfic](/soupboat/~kamo/static/img/post-it/qr.jpg)
![NIM Fanfic](post-it/qr.jpg)
_QR codes_
@ -98,16 +98,16 @@ _QR codes_
We played a lot with the contributions' cover. The starting point was always the title of the special issue in the bitsi font. On top of that we designed some sketches related to the contents.
![Katamari](/soupboat/~kamo/static/img/post-it/orange-katamari.svg)
![Katamari](post-it/orange-katamari.svg)
_Katamari Fanfic_
![unfinished thoughts](/soupboat/~kamo/static/img/post-it/orange-unfinished-thoughts.svg)
![unfinished thoughts](post-it/orange-unfinished-thoughts.svg)
_Unfinished Thoughts_
![NIM Fanfic](/soupboat/~kamo/static/img/post-it/orange-nim.svg)
![NIM Fanfic](post-it/orange-nim.svg)
_NIM Fanfic_
![Crosswords](/soupboat/~kamo/static/img/post-it/orange-crossword.svg)
![Crosswords](post-it/orange-crossword.svg)
_Imaginary Crossword Grig Game_
@ -115,5 +115,5 @@ _Imaginary Crossword Grig Game_
For the index we used the combination of normal and bitsi font. This approach was reused then in the SI17 home page.
![Index](/soupboat/~kamo/static/img/post-it/index.jpg)
![Index](post-it/index.jpg)
_Index_

@ -0,0 +1,44 @@
html,
body {
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 18px;
background-color: #fff;
}
.homepage-intro {
margin: var(--app-margin);
}
tr {
position: relative;
vertical-align: top;
}
.thumb {
width: 96px;
height: 96px;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.title--name {
margin: 0;
}
.title a:after {
content: "";
}
.title--description {
opacity: 0.4;
}
@media (max-width: 991.98px) {
}

Binary file not shown.

@ -29,7 +29,12 @@
<table id="table">
{% for project in projects %}
<tr>
<td><img class="thumb" src="projects/{{project.slug}}/thumb_{{project.cover}}" alt=""></td>
<td class="thumb">
{% if project.cover %}
<img src="projects/{{project.slug}}/thumb_{{project.cover}}" alt="">
{% endif %}
</td>
<td class="title">
<h3 class="title--name">
<a href="projects/{{project.slug}}/" class="stretched-link">
@ -38,7 +43,7 @@
</h3>
<div class="title--description">
{% if project.description %}
{{ project.description }}
{{ project.description }}
{% endif %}
</div>
</td>

@ -11,41 +11,41 @@
<link rel="icon" href="{{url_for('static', filename='favicon.ico')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='font/font.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/project.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/categories.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/highlight.css')}}" />
{% if css %}
<link
rel="stylesheet"
href="{{url_for('static', filename='css/' +css)}}"
/>
{% endif %}
<!-- script -->
{% if script %}
<script
src="{{url_for('static', filename='js/' + script)}}"
defer ></script>
{% endif %}
<!-- Meta -->
{% if description %}
<meta name="description" content="{{ description }}">
<meta property="og:description" content="{{description}}">
<meta property="twitter:description" content="{{description}}">
{% endif %}
{% if cover %}
<meta property="og:image" content="https://hub.xpub.nl{{url_for('static', filename='img/' + cover)}}">
<meta property="twitter:image" content="https://hub.xpub.nl{{url_for('static', filename='img/' + cover)}}">
@ -57,28 +57,28 @@
<a href="/soupboat/~kamo/" class="return"></a>
<h2 class="title"> {{title }} </h2>
<div class="date"> {{ date}} </div>
</div>
</div>
</nav>
<header class="project--header">
{% block cover %}
{% if cover and cover_alt %}
<figure class="header--cover">
<img src="{{url_for('static', filename='img/' + cover)}}" alt="{{cover_alt}}" />
<img src="{{cover}}" alt="{{cover_alt}}" />
</figure>
{% endif %}
{% endblock %}
<h1 class="header--title" style="transform: translate(-50%, -50%)" data-mover="2">{{ title }}</h1>
<div class="header--links">
{% if project %}
<a href="{{url_for('static', filename='html/' + project + '/')}}" class="goto-link"> go to the project </a>
{% endif %}
{% if url %}
<a href="{{url}}" target="__blank">go to project</a>
{% endif %}
@ -97,7 +97,7 @@
{% endfor %}
{% endif%}
</div>
<div class="header--categories">
{% for category in categories %}
<span class="tag" data-tag="{{category}}" data-mover="1"
@ -107,16 +107,16 @@
</span>
{% endfor %}
</div>
</header>
<main class="project--content">
{{content|safe}}
</main>
</body>
</html>

Loading…
Cancel
Save