Fanzine_sites_satelittes.md

Fanzine erg satellites

Le futur site de l'erg en construction sera multiforme. Traversant et agrégeant les activités internes et périphériques à l'école, cartographies, lignes du temp, index, animations et vidéos y seront autant d’espaces de lecture possibles. À l'occasion de son activation et avec les portes ouvertes dans le viseur, ce workshop de deux jours nous invite à visiter les sites, blogs, tumblr, WP, wiki et autres formes online liées aux projet de cours et/ou à des initiatives étudiantes. Chaque participants propose une sélection de ces extraits web pour les remettre en forme, toujours en html et css, vers une sortie fanzine imprimée possiblement à l'occasion des portes ouvertes. Ce parcours web print sera encarté d'un projet de graphisme avec cartes dessinées traçants un ensemble de curriculum étudiants vécus à l'erg. L'atelier est conduit par Michael Murtaugh, Alexia de Visscher et Ludi Loiseau.

Mercredi 7 de 10h → 17h dans la galerie de l'erg (en parallèle de l'exposition des Livres parlés).

Jeudi 8, 9h30 → 15h en 1P06

Le fanzine concrètement ça va ressembler à quoi?

Ce qu'on vise c'est une publication imprimée en riso. Avec comme surface de travail 4 pages A4 (un A3 plié en deux) par personne ou par équipe (équipe de 3 max), on irait vers quelques chose comme 40 pages. feuillet Seront ajoutées quelques pages pour les cartes du projet de graphisme et la couverture, on peut prévoir un livret de 48 pages imprimé et agrafé à l'école pendant les portes ouvertes. La couverture pourra être finaliseé ensemble sur place à ce moment là. Pour rester réaliste, le fanzine sera imprimé en 1 ou 2 couleurs par page, celles des tambours riso en stock. (bleu, rouge et vert). De l'impression sur des papier de couleur est possible et peut donner d'autres teintes un peu moins estamilées aux couleurs de l'erg.

Futur erg.be et sites satellites ?

Le nouvel espace web de l'école est en construction http://erg.activearchives.org/m/

Géré par un media wiki qui se trouve http://erg.activearchives.org/mw/

Hébergées sur un serveur local (Raspberry Pi), les sources et les données sont "à la maison", accessibles et partageables. Ce petit serveur habite la salle d'art numérique et la porte est ouverte à cette adresse :

http://192.168.1.7

Sur ce même espace digital est installé un système de pads (documents en écriture partagée):

http://192.168.1.6)

Visitez ici la liste des pages html du wiki, sous leurs différents formats et états.

http://erg.activearchives.org/m/wiki/


Cette liste constitue un index, assez minimal mais complet où ce qui nous intéresse sont les pages au format html et en particulier celles qui correspondent à des sites dit “satellites”. Ces pages ont un nom commençant par "Page_web:" Chacune de ces pages, correspond à une extraction du contenu (tout ou en partie) de sites comme Wordpress, Tumblr, SPIP, Mediawiki, Vimeo, Mixcloud, mais aussi de simples sites html. Par contre pas de Facebook, qui se protège des inclusions dans d'autres site en les rendant difficiles et non appropriables.

Se réapproprier des contenus en bidouillant Html et css ?

Le HTML (HyperText Markup Language) est un langage de description qui décrit une structure et un contenu au navigateur, chargé de l’afficher. Les CSS (Cascading Style Sheets) forment un langage qui décrit la présentation des documents HTML.

Pour éditer de l'HTML et du CSS sur votre ordinateur, l'idéal est d'utiliser Atom ou Brackets. Atom brakets

Documentation

html

ici une introduction au format html par Stéphane Noël:

http://arts-numeriques.codedrops.net/Le-html-73

et une liste des principales balises par Stéphane Noël toujours:

http://arts-numeriques.codedrops.net/Principales-balises-en-html

une série de tags:

https://www.w3schools.com/TAGS/

CSS

La liste complète des CSS gérées par le W3C (World Wide Web Consortium):

https://www.w3schools.com/Css/

Avec ici un focus sur les réglages typographiques:

https://www.w3schools.com/Css/css_font.asp

L'aide mémoire de Stéphane \url{http://codedrops.net/helpsheets-html-css/help-sheet-css.html}

Css print

Pour définir les styles d'une sortie pdf à partir de la page web. \url{https://www.alsacreations.com/tuto/lire/586-feuille-style-css-print-impression.html}

CSS et typographie

\url{https://cssreference.io/typography/}

Quelques règles d'usage de la typographie sur Desktop ou en ligne → \url{https://practicaltypography.com/}

Effets fancy sur du texte (mais peu compatible avec l'impression) \url{https://envato.com/blog/css3-typography-code-snippets/}

Images

Quelques filtres images

  • Clippy: <\url{http://bennettfeely.com/clippy/}>
  • Filtres CSS: <\url{http://html5-demos.appspot.com/static/css/filters/index.html}>

Tips

Passer en 2 colonnes

body {
    font-family: 'SpaceText', sans-serif;
    color:var(--vert);
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-gap: 12pt;
    -webkit-column-gap: 12pt;
    -moz-column-gap: 12pt;
  }