first commit
This commit is contained in:
isUnknown
commit
b560bb151b
28 changed files with 2098 additions and 0 deletions
105
2026.css
Normal file
105
2026.css
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
:root{
|
||||
--background: #000;
|
||||
--color: #FFF;
|
||||
--font: "JetBrains Mono NL", monoscape;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.preview{
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.preview.texte{
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
padding: 10px 40px 100px 40px;
|
||||
}
|
||||
|
||||
.preview.texte .image-wrapper{
|
||||
margin-top: 20px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.preview .image-wrapper{
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.preview.texte p,
|
||||
.preview.texte h1,
|
||||
.preview.texte h2,
|
||||
.preview.texte h3,
|
||||
.preview.texte h4{
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.preview.texte p{
|
||||
font-size: 4vw;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.preview.texte h1{
|
||||
font-size: 7vw;
|
||||
text-align: center;
|
||||
margin:0;
|
||||
margin-top: 50px;
|
||||
line-height: 1;
|
||||
|
||||
}
|
||||
|
||||
.preview.texte h2{
|
||||
font-size: 1.8vw;
|
||||
|
||||
}
|
||||
|
||||
.preview.texte h3{
|
||||
font-size: 3vw;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.preview.texte h4{
|
||||
font-size: 3.2vw;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.preview.texte h5{
|
||||
font-size: 4vw;
|
||||
font-weight: normal;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.preview.texte h6{
|
||||
font-size: 2vw;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.preview.texte a{
|
||||
color: var(--color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.preview.texte a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.preview.texte ul{
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.preview.texte ul li{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.preview.texte ul li::before{
|
||||
content:"—";
|
||||
margin-right: 20px;
|
||||
}
|
||||
BIN
fonts/Ortica-Bold.woff
Normal file
BIN
fonts/Ortica-Bold.woff
Normal file
Binary file not shown.
BIN
fonts/Ortica-Bold.woff2
Normal file
BIN
fonts/Ortica-Bold.woff2
Normal file
Binary file not shown.
BIN
fonts/Ortica-Light.woff
Normal file
BIN
fonts/Ortica-Light.woff
Normal file
Binary file not shown.
BIN
fonts/Ortica-Light.woff2
Normal file
BIN
fonts/Ortica-Light.woff2
Normal file
Binary file not shown.
BIN
fonts/vollkorn-bold-webfont.woff
Normal file
BIN
fonts/vollkorn-bold-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/vollkorn-bold-webfont.woff2
Normal file
BIN
fonts/vollkorn-bold-webfont.woff2
Normal file
Binary file not shown.
BIN
fonts/vollkorn-bolditalic-webfont.woff
Normal file
BIN
fonts/vollkorn-bolditalic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/vollkorn-bolditalic-webfont.woff2
Normal file
BIN
fonts/vollkorn-bolditalic-webfont.woff2
Normal file
Binary file not shown.
BIN
fonts/vollkorn-italic-webfont.woff
Normal file
BIN
fonts/vollkorn-italic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/vollkorn-italic-webfont.woff2
Normal file
BIN
fonts/vollkorn-italic-webfont.woff2
Normal file
Binary file not shown.
BIN
fonts/vollkorn-regular-webfont.woff
Normal file
BIN
fonts/vollkorn-regular-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/vollkorn-regular-webfont.woff2
Normal file
BIN
fonts/vollkorn-regular-webfont.woff2
Normal file
Binary file not shown.
5
images/00-titre.txt
Normal file
5
images/00-titre.txt
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Autonomiser la création graphique avec des outils web
|
||||
<br>
|
||||
### Adrien Payet et Sarah Garcin
|
||||
|
||||
|
||||
1
images/01-interface.txt
Normal file
1
images/01-interface.txt
Normal file
|
|
@ -0,0 +1 @@
|
|||
# L’interface : pile ou face ?
|
||||
47
images/01-internet.txt
Normal file
47
images/01-internet.txt
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
Qu'est-ce qu'une interface ?
|
||||
|
||||
Idée de couche
|
||||
Interface > couche
|
||||
2 faces de l'interface
|
||||
Regarde vers la technique
|
||||
Regarde vers l'humain
|
||||
|
||||
critique de la notion d'interface
|
||||
interface = un artifice qui met en relation les 2 couches
|
||||
orienté ergonomie
|
||||
alors que forme = l'aspect de la technique -- relation étroite -- non utilitariste
|
||||
Couverture / découverture => PD Huygues
|
||||
|
||||
L'interface rencontre le code
|
||||
et l'humain ?
|
||||
|
||||
Code = interface
|
||||
|
||||
Alors que le sujet
|
||||
Code différent interface
|
||||
|
||||
Comment l'humain rencontre le code (la technique) par l'intermédiaire de l'interface ?
|
||||
|
||||
Au delà du code
|
||||
|
||||
L'humain rencontre le code par l'interface, apprentissage par l'outil, non descendant.
|
||||
Autonomisation technique par l'interface
|
||||
Encapacitation / Individuation
|
||||
|
||||
Des projets qui sont accompagnés par des humains
|
||||
Des projets qui proposent le collectif
|
||||
Des projets qui remettent l'humain dans l'interface
|
||||
Apprentissage par les pairs
|
||||
|
||||
Fournir des occasions de descendre en niveau
|
||||
// Graphisme bas niveau
|
||||
|
||||
Construction socio-culturel => Construction / Déconstruction
|
||||
Lucidité / Prise de distance / Pris·e dans le courant / Effort de prise de distance
|
||||
|
||||
|
||||
Geoproject
|
||||
-> Pyramide : Fournir des occasions de descendre en niveau
|
||||
-> Accompagnement
|
||||
|
||||
|
||||
2
images/02-ou_commence.txt
Normal file
2
images/02-ou_commence.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
# Où commence <br> le code ? <br><br> Où commence l’interface ?
|
||||
|
||||
4
images/02b-tout-contre.txt
Normal file
4
images/02b-tout-contre.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# Comment l’humain rencontre la technique par la forme ?
|
||||
|
||||
|
||||
|
||||
4
images/02c-tout-conre-ex.txt
Normal file
4
images/02c-tout-conre-ex.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# https://actuel-inactuel.fr/
|
||||
|
||||
|
||||
|
||||
4
images/04-lucidité.txt
Normal file
4
images/04-lucidité.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# Comment gagner en lucidité ?
|
||||
|
||||
PJ machine
|
||||
|
||||
4
images/05-humain.txt
Normal file
4
images/05-humain.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# Quand le code rencontre l’humain
|
||||
|
||||
TAC
|
||||
|
||||
2
images/06-geoproject.txt
Normal file
2
images/06-geoproject.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
# Geoproject
|
||||
|
||||
87
index.php
Normal file
87
index.php
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Autonomiser la création graphique avec des outils web</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="2026.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="row">
|
||||
<div class="damier">
|
||||
|
||||
<?php
|
||||
// error_reporting(E_ALL);
|
||||
@include "utils.php";
|
||||
include 'libs/Parsedown.php';
|
||||
$Parsedown = new Parsedown();
|
||||
$dirlist = getFileList("images");
|
||||
array_multisort(array_column($dirlist, "name"), SORT_ASC, $dirlist );
|
||||
|
||||
echo "<ul class='liste-damier'>";
|
||||
foreach($dirlist as $file){
|
||||
$ext = pathinfo($file['name'], PATHINFO_EXTENSION);
|
||||
if($ext == 'txt'){
|
||||
$content = file_get_contents($file['name']);
|
||||
echo "<li class='texte'>";
|
||||
echo $Parsedown->text($content);
|
||||
echo "</li>";
|
||||
}
|
||||
if($ext == 'mp4' || $ext == 'webm' || $ext == 'ogg'){
|
||||
$fileName = str_replace('images/', '', $file['name']);
|
||||
$filePath = $file['name'];
|
||||
echo "<li class='video' data-video='{$filePath}'>";
|
||||
echo "<h1>";
|
||||
echo $fileName;
|
||||
echo "</h1>";
|
||||
echo "</li>";
|
||||
}
|
||||
if($ext == 'mp3' || $ext == 'wav'){
|
||||
$fileName = str_replace('images/', '', $file['name']);
|
||||
$filePath = $file['name'];
|
||||
echo "<li class='audio' data-audio='{$filePath}'>";
|
||||
echo "<h1>";
|
||||
echo $fileName;
|
||||
echo "</h1>";
|
||||
echo "</li>";
|
||||
}
|
||||
if($ext == 'pdf'){
|
||||
$fileName = str_replace('images/', '', $file['name']);
|
||||
$filePath = $file['name'];
|
||||
echo "<li class='pdf' data-pdf='{$filePath}'>";
|
||||
echo "<h1>";
|
||||
echo $fileName;
|
||||
echo "</h1>";
|
||||
echo "</li>";
|
||||
}
|
||||
if($ext == 'jpg' || $ext == 'png' || $ext == 'gif' ){
|
||||
$fileName = str_replace('images/', '', $file['name']);
|
||||
$filePath = $file['name'];
|
||||
// $fileNameNoExt = pathinfo($file['name'])['filename'];
|
||||
// $thumbPath = 'images/thumbs/'.$fileNameNoExt.'.jpg';
|
||||
echo "<li class='image'>";
|
||||
echo "<figure data-thumb='{$filePath}' data-image='{$filePath}'>";
|
||||
echo "<img src='{$filePath}'/>";
|
||||
echo "</figure>";
|
||||
echo "</li>";
|
||||
}
|
||||
}
|
||||
echo "</ul>";
|
||||
|
||||
?>
|
||||
</div>
|
||||
|
||||
<div class="preview">
|
||||
<div class="image-wrapper">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="js/script.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
js/jquery.min.js
vendored
Normal file
4
js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
73
js/script.js
Normal file
73
js/script.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
$(document).ready(function(){
|
||||
$el = $('.damier ul.liste-damier li');
|
||||
$preview = $('.preview .image-wrapper');
|
||||
$el.click(function(){
|
||||
$el.removeClass('active');
|
||||
$preview.html('');
|
||||
$('.preview').removeClass('texte');
|
||||
$('.preview').removeClass('image');
|
||||
if($(this).hasClass('image')){
|
||||
$imagePath = $(this).find('figure').attr('data-image');
|
||||
console.log($imagePath);
|
||||
$preview.append('<img src="'+$imagePath+'" alt="">')
|
||||
$(this).addClass('active');
|
||||
$('.preview').addClass('image');
|
||||
}
|
||||
if($(this).hasClass('texte')){
|
||||
console.log('this is a text');
|
||||
$content = $(this).html();
|
||||
$preview.html($content);
|
||||
$('.preview').addClass('texte');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
if($(this).hasClass('video')){
|
||||
$videoPath = $(this).attr('data-video');
|
||||
console.log($videoPath);
|
||||
$preview.append('<video controls src="'+$videoPath+'"></video>');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
if($(this).hasClass('audio')){
|
||||
$audioPath = $(this).attr('data-audio');
|
||||
console.log($audioPath);
|
||||
$preview.append('<audio controls src="'+$audioPath+'"></audio>');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
if($(this).hasClass('pdf')){
|
||||
$pdfPath = $(this).attr('data-pdf');
|
||||
console.log($pdfPath);
|
||||
$preview.append('<object data="'+$pdfPath+'" type="application/pdf"><embed src="'+$pdfPath+'" type="application/pdf" /></object>');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
// déplacement avec des flèches
|
||||
// $(document).keydown(function(e) {
|
||||
// $activeEl = $('.damier ul.liste-damier li.active');
|
||||
// switch(e.which) {
|
||||
// case 37: // left
|
||||
// $el.removeClass('active');
|
||||
// $activeEl.prev().addClass('active');
|
||||
|
||||
|
||||
|
||||
// break;
|
||||
|
||||
// case 38: // up
|
||||
// break;
|
||||
|
||||
// case 39: // right
|
||||
// $el.removeClass('active');
|
||||
// $activeEl.next().addClass('active');
|
||||
// break;
|
||||
|
||||
// case 40: // down
|
||||
// break;
|
||||
|
||||
// default: return; // exit this handler for other keys
|
||||
// }
|
||||
// e.preventDefault(); // prevent the default action (scroll / move caret)
|
||||
// });
|
||||
|
||||
});
|
||||
1541
libs/Parsedown.php
Normal file
1541
libs/Parsedown.php
Normal file
File diff suppressed because it is too large
Load diff
140
style.css
Normal file
140
style.css
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
:root{
|
||||
--image-width: 6.8vw;
|
||||
--damier-width : calc(3 * var(--image-width));
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.2;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul, figure{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.row{
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.damier{
|
||||
width: var(--damier-width);
|
||||
background: #000;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.damier ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.damier ul.liste-damier > li{
|
||||
width: var(--image-width);;
|
||||
height: var(--image-width);;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
/*border: 0.01em solid #DFDFDF;*/
|
||||
border: 0.01em solid #3E3E3E;
|
||||
}
|
||||
|
||||
.damier ul.liste-damier > li:hover, .damier ul.liste-damier > li.active{
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.damier ul.liste-damier li figure img{
|
||||
width: var(--image-width);;
|
||||
height: var(--image-width);;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
object-position: 0 0;
|
||||
}
|
||||
|
||||
.damier ul.liste-damier > li.texte{
|
||||
font-size: 10px;
|
||||
padding: 5px;
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.damier ul.liste-damier > li.pdf{
|
||||
background: #83FF7C;
|
||||
}
|
||||
|
||||
.damier ul.liste-damier > li.video{
|
||||
background: #B6C3FF;
|
||||
}
|
||||
|
||||
.damier ul.liste-damier > li.audio{
|
||||
background: #FFD9CC;
|
||||
}
|
||||
|
||||
|
||||
.damier ul.liste-damier > li h1{
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
||||
.damier ul.liste-damier > li a{
|
||||
color: #FFF;
|
||||
|
||||
}
|
||||
|
||||
.preview{
|
||||
width: 79vw;
|
||||
// border: 3px solid #000;
|
||||
height: 100vh;
|
||||
position:fixed;
|
||||
left: var(--damier-width);
|
||||
padding: 15px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.preview.texte img{
|
||||
width: 95%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview.image img{
|
||||
width: 100%;
|
||||
height: calc(100vh - 30px);
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.preview video{
|
||||
width: 100%;
|
||||
/*margin-top: 20px;*/
|
||||
}
|
||||
|
||||
|
||||
.preview object{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
75
utils.php
Normal file
75
utils.php
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<?php
|
||||
// List files in folder $dir
|
||||
function getFileList($dir){
|
||||
// array to hold return value
|
||||
$retval = [];
|
||||
|
||||
// add trailing slash if missing
|
||||
if(substr($dir, -1) != "/") {
|
||||
$dir .= "/";
|
||||
}
|
||||
|
||||
// open pointer to directory and read list of files
|
||||
$d = @dir($dir) or die("getFileList: Failed opening directory {$dir} for reading");
|
||||
while(FALSE !== ($entry = $d->read())) {
|
||||
// skip hidden files
|
||||
if($entry[0] == ".") continue;
|
||||
if(is_dir("{$dir}{$entry}")) {
|
||||
$retval[] = [
|
||||
'name' => "{$dir}{$entry}/",
|
||||
'type' => filetype("{$dir}{$entry}"),
|
||||
'size' => 0,
|
||||
'lastmod' => filemtime("{$dir}{$entry}")
|
||||
];
|
||||
} elseif(is_readable("{$dir}{$entry}")) {
|
||||
$retval[] = [
|
||||
'name' => "{$dir}{$entry}",
|
||||
'type' => mime_content_type("{$dir}{$entry}"),
|
||||
'size' => filesize("{$dir}{$entry}"),
|
||||
'lastmod' => filemtime("{$dir}{$entry}")
|
||||
];
|
||||
}
|
||||
}
|
||||
$d->close();
|
||||
|
||||
return $retval;
|
||||
}
|
||||
|
||||
function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth ){
|
||||
// open the directory
|
||||
$dir = opendir( $pathToImages );
|
||||
|
||||
// loop through it, looking for any/all JPG files:
|
||||
while (false !== ($fname = readdir( $dir ))) {
|
||||
// parse path for the extension
|
||||
$info = pathinfo($pathToImages . $fname);
|
||||
// continue only if this is a JPEG image
|
||||
if ( strtolower($info['extension']) == 'jpg')
|
||||
{
|
||||
//echo "Creating thumbnail for {$fname} <br />";
|
||||
|
||||
// load image and get image size
|
||||
$img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
|
||||
$width = imagesx( $img );
|
||||
$height = imagesy( $img );
|
||||
|
||||
// calculate thumbnail size
|
||||
$new_width = $thumbWidth;
|
||||
$new_height = floor( $height * ( $thumbWidth / $width ) );
|
||||
|
||||
// create a new temporary image
|
||||
$tmp_img = imagecreatetruecolor( $new_width, $new_height );
|
||||
|
||||
// copy and resize old image into new image
|
||||
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );
|
||||
|
||||
// save thumbnail into a file
|
||||
imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
|
||||
}
|
||||
}
|
||||
// close the directory
|
||||
closedir( $dir );
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
Loading…
Add table
Add a link
Reference in a new issue