added whole system from ola4doc
This commit is contained in:
Bachir Soussi Chiadmi
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,232 @@
|
||||
## CSS obscure rule: margin-top of <h1> affects parent's margin
|
||||
|
||||
As of why they decided that this elements should behave like this it is still unclear for me; but at least we were able to find a rule that applies to collapsing margins:
|
||||
"In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero
|
||||
Basically in our example on the original question, the biggest margin-top is the one of the <h1> therefore taken and applied to the parent <div>.
|
||||
This rule is cancelled for:
|
||||
* Floated elements
|
||||
* Absolutely positioned elements
|
||||
* Inline-block elements
|
||||
* Elements with overflow set to anything other than visible (They do not collapse margins with their children.)
|
||||
* Cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
|
||||
* The root element
|
||||
That is the reason why overflow:hidden solved the issue.
|
||||
|
||||
## CSS grids
|
||||
|
||||
https://jsfiddle.net/zw9c7owa/
|
||||
https://jsfiddle.net/zw9c7owa/3/
|
||||
https://jsfiddle.net/zw9c7owa/4/
|
||||
https://jsfiddle.net/zw9c7owa/6/
|
||||
https://jsfiddle.net/zw9c7owa/7/
|
||||
https://jsfiddle.net/zw9c7owa/8/
|
||||
https://jsfiddle.net/zw9c7owa/12/ -> yeah!
|
||||
https://jsfiddle.net/zw9c7owa/13/
|
||||
https://jsfiddle.net/zw9c7owa/14/
|
||||
https://jsfiddle.net/zw9c7owa/15/
|
||||
https://jsfiddle.net/zw9c7owa/16/
|
||||
https://jsfiddle.net/zw9c7owa/17/
|
||||
|
||||
Emulate CSS media print : https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6
|
||||
|
||||
## processing connections
|
||||
https://research.lafkon.net/projects/dit/
|
||||
https://research.lafkon.net/projects/lac2008/
|
||||
|
||||
|
||||
### visualer les media print en redimensionnant la page
|
||||
|
||||
@media screen and (max-width: 699px) or media print {
|
||||
...
|
||||
}
|
||||
|
||||
### John Resig Micro template
|
||||
|
||||
Si jamais vous avez besoin de générer du HTML en javascript...
|
||||
|
||||
https://johnresig.com/blog/javascript-micro-templating/
|
||||
|
||||
|
||||
## Césures
|
||||
|
||||
http://gitlab.constantvzw.org/osp/tools.html5lib_typogrify
|
||||
|
||||
Les version récentes de webkit gèrent les césures
|
||||
|
||||
interdire les césures
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
autoriser les césures
|
||||
|
||||
-webkit-hyphens: auto;
|
||||
|
||||
Gérer les césures
|
||||
|
||||
-webkit-hyphenate-limit-before: 2; /* 2 caractères minimum en fin de ligne, donc en début de mot */
|
||||
-webkit-hyphenate-limit-after: 2; /* 3 caractères minimum en début de ligne, donc en fin de mot */
|
||||
-webkit-hyphenate-limit-lines: 4; /* 4 lignes consecutives max */
|
||||
|
||||
NE PAS OUBLIER D'INSTALLER HYPHEN!
|
||||
|
||||
sur arch
|
||||
|
||||
`sudo pacman -S hyphen` ou `yaourt -S hyphen`
|
||||
|
||||
## CSS variables in @page
|
||||
|
||||
https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules
|
||||
|
||||
## Convertir tous les fichiers HTML en Markdown
|
||||
|
||||
attention, vous allez perdre le contenu non-sémantique (classes, attributs, etc.) mais ça peut justement être une manière de nettoyer son code
|
||||
|
||||
for file in *.html; do pandoc --from html --to markdown --output "${file%.*}.md" "$file"; done
|
||||
|
||||
|
||||
|
||||
## HTML2Print readme
|
||||
|
||||
###exemples de readme visuels
|
||||
|
||||
- http://organon.osp.kitchen/70
|
||||
- http://blog.lavillahermosa.com/brass-%E2%86%92-print-tool-v1/
|
||||
- http://design.lavillahermosa.com/works-288-le-brass-2014
|
||||
- http://blog.artsaucarre.be/artsnumeriques/2016/10/21/memory-learning-archives-et-bidouillages-workshop-au-mundaneum-24-261016/
|
||||
- http://lorainefurter.net/readme/readme-workflows.html
|
||||
- https://hpg.io/
|
||||
- https://youtu.be/eIgX6sPOqCY?t=2m40s
|
||||
|
||||
<iframe width="560" height="315" src="https://youtu.be/eIgX6sPOqCY?t=2m40s" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
https://upload.wikimedia.org/wikipedia/commons/4/41/FACTSHEET-EN.pdf
|
||||
https://research.lafkon.net/content/2.projects/6.wtf/99.wtf_generator_1_00_WEB.gif
|
||||
|
||||
http://lorainefurter.net/readme/assets/readme/workflows/DigitalPublishingToolkit.png
|
||||
|
||||
### workflow d'un numéro de Médor
|
||||
|
||||
- http://organon.osp.kitchen/90
|
||||
|
||||
### python rss to html
|
||||
https://figureslibres.io/gogs/bachir/python-rss2html
|
||||
```python
|
||||
#!/usr/bin/python
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
|
||||
import feedparser
|
||||
from bs4 import BeautifulSoup
|
||||
|
||||
def main():
|
||||
# url du flux rss
|
||||
tpsreac_feed_url = "https://tempsdereaction.wordpress.com/feed/"
|
||||
|
||||
# on aspire le flux rss avec feedparser
|
||||
tpsreac_feeds = feedparser.parse(tpsreac_feed_url)
|
||||
|
||||
# base template du fichier html
|
||||
base = "<html><head></head><body></body></html>"
|
||||
# create dom for html file base
|
||||
base_dom = BeautifulSoup(base, 'html.parser')
|
||||
|
||||
# page base template
|
||||
page_base = "<section class='page'></section>"
|
||||
|
||||
# boucle sur les entrées racine du flux
|
||||
for key in tpsreac_feeds:
|
||||
print(key)
|
||||
|
||||
# on boucle sur les entrées du flux rss
|
||||
for entrie in tpsreac_feeds['entries']:
|
||||
print('- - - - -',entrie['title'])
|
||||
# just display entrie keys
|
||||
for key in entrie:
|
||||
print(key)
|
||||
# entries.extend( feed[ "items" ] )
|
||||
|
||||
# create page dom
|
||||
p_dom = BeautifulSoup(page_base, 'html.parser')
|
||||
# add content in page dom
|
||||
p_dom.section.append(entrie['summary'])
|
||||
|
||||
# add newly created page dom to html dom
|
||||
base_dom.body.append(p_dom)
|
||||
|
||||
# create main html file from filled base html dom
|
||||
with open("index.html", 'w') as fp:
|
||||
fp.write(base_dom.prettify(formatter=None))
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
|
||||
```
|
||||
|
||||
### python pandoc and template
|
||||
https://figureslibres.io/gogs/bachir/gitbook-html2print
|
||||
```python
|
||||
#!/usr/bin/python
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
from bs4 import BeautifulSoup
|
||||
import pypandoc
|
||||
|
||||
def main():
|
||||
# create main html dom from template
|
||||
template_f = open("templates/main.tpl.html", "r")
|
||||
template_html = template_f.read()
|
||||
template_dom = BeautifulSoup(template_html, 'html.parser')
|
||||
|
||||
|
||||
pdoc_args = ['--mathjax',
|
||||
'--smart']
|
||||
|
||||
pdoc_filters = []
|
||||
|
||||
output = pypandoc.convert_file("lechemin/de/monfichier.md",
|
||||
to='html5',
|
||||
format='markdown+header_attributes+link_attributes+bracketed_spans',
|
||||
extra_args=pdoc_args,
|
||||
filters=pdoc_filters)
|
||||
# outputfile=out_f)
|
||||
|
||||
# print("output :\n"+output)
|
||||
|
||||
output_dom = BeautifulSoup(output, 'html.parser')
|
||||
|
||||
template_dom.append(output_dom)
|
||||
|
||||
# create main html file from filled template html dom
|
||||
html_f = 'monfichier.html'
|
||||
with open(html_f, 'w') as fp:
|
||||
fp.write(template_dom.prettify(formatter=None))
|
||||
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
|
||||
```
|
||||
|
||||
## Ajuster une image
|
||||
|
||||
voir https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit et https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
|
||||
|
||||
## CSS regions
|
||||
|
||||
#flow-main {
|
||||
-webkit-flow-into: flow-main;
|
||||
flow-into: flow-main;
|
||||
}
|
||||
|
||||
.flow-main {
|
||||
-webkit-flow-from: flow-main;
|
||||
flow-from: flow-main;
|
||||
}
|
||||
|
||||
ex: https://jsfiddle.net/asmqaheq/
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
## CSS obscure rule: margin-top of
|
||||
<h1>
|
||||
affects parent's margin
|
||||
|
||||
As of why they decided that this elements should behave like this it is still unclear for me; but at least we were able to find a rule that applies to collapsing margins: "In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero Basically in our example on the original question, the biggest margin-top is the one of the
|
||||
<h1>
|
||||
therefore taken and applied to the parent
|
||||
<div>
|
||||
. This rule is cancelled for: * Floated elements * Absolutely positioned elements * Inline-block elements * Elements with overflow set to anything other than visible (They do not collapse margins with their children.) * Cleared elements (They do not collapse their top margins with their parent block's bottom margin.) * The root element That is the reason why overflow:hidden solved the issue.
|
||||
|
||||
h2(#css-grids). CSS grids
|
||||
|
||||
https://jsfiddle.net/zw9c7owa/ https://jsfiddle.net/zw9c7owa/3/ https://jsfiddle.net/zw9c7owa/4/ https://jsfiddle.net/zw9c7owa/6/ https://jsfiddle.net/zw9c7owa/7/ https://jsfiddle.net/zw9c7owa/8/ https://jsfiddle.net/zw9c7owa/12/ -> yeah! https://jsfiddle.net/zw9c7owa/13/ https://jsfiddle.net/zw9c7owa/14/ https://jsfiddle.net/zw9c7owa/15/ https://jsfiddle.net/zw9c7owa/16/ https://jsfiddle.net/zw9c7owa/17/
|
||||
|
||||
Emulate CSS media print : https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6
|
||||
|
||||
h2(#processing-connections). processing connections
|
||||
|
||||
https://research.lafkon.net/projects/dit/ https://research.lafkon.net/projects/lac2008/
|
||||
|
||||
h3(#visualer-les-media-print-en-redimensionnant-la-page). visualer les media print en redimensionnant la page
|
||||
|
||||
@media screen and (max-width: 699px) or media print { ... }
|
||||
|
||||
h3(#john-resig-micro-template). John Resig Micro template
|
||||
|
||||
Si jamais vous avez besoin de générer du HTML en javascript...
|
||||
|
||||
https://johnresig.com/blog/javascript-micro-templating/
|
||||
|
||||
h2(#césures). Césures
|
||||
|
||||
http://gitlab.constantvzw.org/osp/tools.html5lib_typogrify
|
||||
|
||||
Les version récentes de webkit gèrent les césures
|
||||
|
||||
interdire les césures
|
||||
|
||||
bc. -webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
|
||||
autoriser les césures
|
||||
|
||||
bc. -webkit-hyphens: auto;
|
||||
|
||||
|
||||
Gérer les césures
|
||||
|
||||
bc. -webkit-hyphenate-limit-before: 2; /* 2 caractères minimum en fin de ligne, donc en début de mot */
|
||||
-webkit-hyphenate-limit-after: 2; /* 3 caractères minimum en début de ligne, donc en fin de mot */
|
||||
-webkit-hyphenate-limit-lines: 4; /* 4 lignes consecutives max */
|
||||
|
||||
|
||||
NE PAS OUBLIER D'INSTALLER HYPHEN!
|
||||
|
||||
sur arch
|
||||
|
||||
@sudo pacman -S hyphen@ ou @yaourt -S hyphen@
|
||||
|
||||
h2(#css-variables-in-page). CSS variables in @page
|
||||
|
||||
https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules
|
||||
|
||||
h2(#convertir-tous-les-fichiers-html-en-markdown). Convertir tous les fichiers HTML en Markdown
|
||||
|
||||
attention, vous allez perdre le contenu non-sémantique (classes, attributs, etc.) mais ça peut justement être une manière de nettoyer son code
|
||||
|
||||
for file in *.html; do pandoc --from html --to markdown --output "<span class="math">{file%.*}.md" "</math>file"; done
|
||||
|
||||
h2(#html2print-readme). HTML2Print readme
|
||||
|
||||
h3(#exemples-de-readme-visuels). exemples de readme visuels
|
||||
|
||||
* http://organon.osp.kitchen/70
|
||||
* http://blog.lavillahermosa.com/brass-%E2%86%92-print-tool-v1/
|
||||
* http://design.lavillahermosa.com/works-288-le-brass-2014
|
||||
* http://blog.artsaucarre.be/artsnumeriques/2016/10/21/memory-learning-archives-et-bidouillages-workshop-au-mundaneum-24-261016/
|
||||
* http://lorainefurter.net/readme/readme-workflows.html
|
||||
* https://hpg.io/
|
||||
* https://youtu.be/eIgX6sPOqCY?t=2m40s
|
||||
|
||||
<iframe width="560" height="315" src="https://youtu.be/eIgX6sPOqCY?t=2m40s" frameborder="0" allowfullscreen>
|
||||
</iframe>
|
||||
!http://hpg.io/img/multi_format.png! https://upload.wikimedia.org/wikipedia/commons/4/41/FACTSHEET-EN.pdf https://research.lafkon.net/content/2.projects/6.wtf/99.wtf_generator_1_00_WEB.gif
|
||||
|
||||
http://lorainefurter.net/readme/assets/readme/workflows/DigitalPublishingToolkit.png
|
||||
|
||||
h3(#workflow-dun-numéro-de-médor). workflow d'un numéro de Médor
|
||||
|
||||
* http://organon.osp.kitchen/90
|
||||
|
||||
h3(#python-rss-to-html). python rss to html
|
||||
|
||||
https://figureslibres.io/gogs/bachir/python-rss2html
|
||||
|
||||
<pre class="python">
|
||||
#!/usr/bin/python
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
|
||||
import feedparser
|
||||
from bs4 import BeautifulSoup
|
||||
|
||||
def main():
|
||||
# url du flux rss
|
||||
tpsreac_feed_url = "https://tempsdereaction.wordpress.com/feed/"
|
||||
|
||||
# on aspire le flux rss avec feedparser
|
||||
tpsreac_feeds = feedparser.parse(tpsreac_feed_url)
|
||||
|
||||
# base template du fichier html
|
||||
base = "<html><head></head><body></body></html>"
|
||||
# create dom for html file base
|
||||
base_dom = BeautifulSoup(base, 'html.parser')
|
||||
|
||||
# page base template
|
||||
page_base = "<section class='page'></section>"
|
||||
|
||||
# boucle sur les entrées racine du flux
|
||||
for key in tpsreac_feeds:
|
||||
print(key)
|
||||
|
||||
# on boucle sur les entrées du flux rss
|
||||
for entrie in tpsreac_feeds['entries']:
|
||||
print('- - - - -',entrie['title'])
|
||||
# just display entrie keys
|
||||
for key in entrie:
|
||||
print(key)
|
||||
# entries.extend( feed[ "items" ] )
|
||||
|
||||
# create page dom
|
||||
p_dom = BeautifulSoup(page_base, 'html.parser')
|
||||
# add content in page dom
|
||||
p_dom.section.append(entrie['summary'])
|
||||
|
||||
# add newly created page dom to html dom
|
||||
base_dom.body.append(p_dom)
|
||||
|
||||
# create main html file from filled base html dom
|
||||
with open("index.html", 'w') as fp:
|
||||
fp.write(base_dom.prettify(formatter=None))
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
|
||||
</pre>
|
||||
|
||||
h3(#python-pandoc-and-template). python pandoc and template
|
||||
|
||||
https://figureslibres.io/gogs/bachir/gitbook-html2print
|
||||
|
||||
<pre class="python">
|
||||
#!/usr/bin/python
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
from bs4 import BeautifulSoup
|
||||
import pypandoc
|
||||
|
||||
def main():
|
||||
# create main html dom from template
|
||||
template_f = open("templates/main.tpl.html", "r")
|
||||
template_html = template_f.read()
|
||||
template_dom = BeautifulSoup(template_html, 'html.parser')
|
||||
|
||||
|
||||
pdoc_args = ['--mathjax',
|
||||
'--smart']
|
||||
|
||||
pdoc_filters = []
|
||||
|
||||
output = pypandoc.convert_file("lechemin/de/monfichier.md",
|
||||
to='html5',
|
||||
format='markdown+header_attributes+link_attributes+bracketed_spans',
|
||||
extra_args=pdoc_args,
|
||||
filters=pdoc_filters)
|
||||
# outputfile=out_f)
|
||||
|
||||
# print("output :\n"+output)
|
||||
|
||||
output_dom = BeautifulSoup(output, 'html.parser')
|
||||
|
||||
template_dom.append(output_dom)
|
||||
|
||||
# create main html file from filled template html dom
|
||||
html_f = 'monfichier.html'
|
||||
with open(html_f, 'w') as fp:
|
||||
fp.write(template_dom.prettify(formatter=None))
|
||||
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
|
||||
</pre>
|
||||
|
||||
h2(#ajuster-une-image). Ajuster une image
|
||||
|
||||
voir https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit et https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
|
||||
|
||||
h2(#css-regions). CSS regions
|
||||
|
||||
h1(#flow-main). flow-main {
|
||||
|
||||
bc. -webkit-flow-into: flow-main;
|
||||
flow-into: flow-main;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.flow-main { -webkit-flow-from: flow-main; flow-from: flow-main; }
|
||||
|
||||
ex: https://jsfiddle.net/asmqaheq/
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
<header id='header'>
|
||||
|
||||
h1. OLA#4 Documentation : OSP html2print
|
||||
|
||||
<nav id='menu'>
|
||||
|
||||
* "00-ola":#00-ola
|
||||
* "alex":#alex
|
||||
* "bachir":#bachir
|
||||
* "gabriel":#gabriel
|
||||
* "kenji":#kenji
|
||||
* "Kenji-Elie":#Kenji-Elie
|
||||
* "kevin":#kevin
|
||||
* "Lucile":#Lucile
|
||||
* "nicolas":#nicolas
|
||||
* "PierreYves":#PierreYves
|
||||
* "Sarah":#Sarah
|
||||
* "timothee_goguely":#timothee_goguely
|
||||
* "Pad":#pad
|
||||
* "CookBook":#cookbook
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
+192
@@ -0,0 +1,192 @@
|
||||
# Workshop Ola HTML2Print
|
||||
|
||||
https://listes.domainepublic.net/listinfo/html2print
|
||||
|
||||
|
||||
[Cookbook](http://pads.osp.kitchen/p/ola-cookbook )
|
||||
|
||||
## Participants
|
||||
|
||||
* Sarah
|
||||
* Nicolas
|
||||
* Pierre-Yves
|
||||
* Elie
|
||||
* Kenji
|
||||
* Timothée
|
||||
* Bach
|
||||
* Gab
|
||||
* Elodie
|
||||
*Kévin
|
||||
*Angélique
|
||||
|
||||
## Markdown primer
|
||||
|
||||
- <https://daringfireball.net/projects/markdown/>
|
||||
- <https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet>
|
||||
|
||||
```markdown
|
||||
#titre 1
|
||||
## titre 2 -> 6
|
||||
|
||||
|
||||
[texte du lien](http://tapage.com)
|
||||
|
||||
*bold*²
|
||||
**italique**
|
||||
|
||||
- liste
|
||||
- liste
|
||||
`code`
|
||||
```
|
||||
|
||||
Post css (// sass)
|
||||
Utilisation du le navigateur web Chromium fortement conseillée pour utiliser htmltoprint.css car il prend en compte directement les info renseignées ds le css tel que taille de la page, affichage du fond de page, etc.
|
||||
|
||||
## Paquet de base
|
||||
|
||||
https://cloud.osp.kitchen/s/siUuVs7UD93ZeS0
|
||||
|
||||
télécharger le dossier html2print.tiny
|
||||
|
||||
découverte des variables css o_O
|
||||
```
|
||||
:root{
|
||||
--ma-variable:210mm;
|
||||
}
|
||||
|
||||
@page{
|
||||
width: var(--ma-variable);
|
||||
}
|
||||
```
|
||||
|
||||
En fait, ce cas précis ne marche pas :P Voir <https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules>
|
||||
|
||||
|
||||
## Documentation
|
||||
|
||||
###howto
|
||||
readme : https://figureslibres.io/gogs/bachir/ola4doc
|
||||
|
||||
### rendu
|
||||
192.168.99.35:8000
|
||||
|
||||
### textile
|
||||
https://txstyle.org/
|
||||
|
||||
## mise en commun projets (sam 14 juin, 14h)
|
||||
|
||||
### OSP
|
||||
|
||||
prendre cet occase pour faire un cookbook de htmltoprint
|
||||
- césures
|
||||
- conversion RVB --> CMJN
|
||||
- faire couler du txt d'une page à une autre
|
||||
|
||||
### Elie & Kenji
|
||||
|
||||
forme générative
|
||||
BD en scketch processing
|
||||
booklate de l'évolution de cette forme
|
||||
Lafkon make art
|
||||
|
||||
### Angelique
|
||||
|
||||
contenu du wordpress de PY ou faire de la documentation html2print
|
||||
|
||||
### Timothée
|
||||
|
||||
utiliser are.na (ce site est un genre de pinterest pour les graphistes)
|
||||
extraire un contenu web pour créer des booklates
|
||||
finalité: creer l'outil qui servirait à faire ça (codé en ruby)
|
||||
Scraping
|
||||
mettre en valeur les recherches faites par d'autres
|
||||
|
||||
### Kévin T
|
||||
|
||||
documentation sur htmltoprint
|
||||
ou
|
||||
récupérer contenu d'une page wikipédia et si possible récupérer l'historique complet des modifications de la page (depuis sa création jusqu'à auj) et les mettre en forme
|
||||
|
||||
http://epicpedia.org/
|
||||
|
||||
|
||||
transfo des scripts de téâtre
|
||||
|
||||
### Bachir
|
||||
|
||||
Projet d'écriture.
|
||||
Transposer "La convivialité" de Ivan Illitch qui a été écrit dans les années 70, en 2017, en parlant de choses actuelles et plus particulièrement du numérique.
|
||||
|
||||
### Gabriel
|
||||
|
||||
Utiliser le workshop comme prétexte pour écrire rapport de son stage chez OSP
|
||||
Tenais un journal de ses apprentissages, un retour sur expériences.
|
||||
confrontation txt bruts - commentaires
|
||||
mini readme sur chacunes des choses qu'il a utilisées et qui pourraient intéresser d'autres prsn.
|
||||
Avoir deux version en co-existance, une web et une print
|
||||
|
||||
### Élodie
|
||||
Retravailler le site internet de synesthésie. Peut-être en faire une version imprimable. Se familiariser au code.
|
||||
|
||||
### Nicolas
|
||||
[Whole Earth Catalogue](https://duckduckgo.com/?q=whole+earth+catalogue&iax=1&ia=images)
|
||||
Aux sources de l'utopie numérique: de la contre culture à la cyberculture, Stewart Brand, un homme d'influence
|
||||
|
||||
[Aux sources de l'utopie numérique, Fred Turner](http://cfeditions.com/utopieNumerique/)
|
||||
|
||||
Outil dans l'esprit du Whole earth catalog, réactiver cette idée.
|
||||
Plans pour construction de machines, comment se protéger de ___
|
||||
Grille dans laquelle injecter du contenu pour faire cet objet catalogue (forme non définie pour l'instant: poster, magazine)
|
||||
[Libre Création - Libre Design](http://projets.esadhar.fr/usable/dashboard/)
|
||||
[Libre Création - Libre Design (sources)](https://esadhar.net/gogs/libre-creation_libre-design/usable)
|
||||
|
||||
ESADHaR, projet de recherche avec des étudiants. Test d'outils libres pour la création graphiques, qu'ils aient été initialement créés dans ce but ou non.
|
||||
projets.esadhar.fr/usable/dashboard
|
||||
|
||||
|
||||
Fonts:
|
||||
|
||||
- http://osp.kitchen/foundry/fluxisch-else/
|
||||
- https://github.com/uplaod/YoungSerif ou http://areyoubeingserved.constantvzw.org/static/fonts/YoungSerif-Regular.otf (version modifiée par Stéphanie avec la a minuscule plus)
|
||||
|
||||
### Pierre-Yves
|
||||
Comment transcrire l'Idée de calques // scribus, indesign dans/avec htmltoprint
|
||||
faire des boites imbriquées les unes dans les autres qui changent de couleur, qqch de génératif
|
||||
//dearchrome project [Alex]
|
||||
|
||||
[dearchrome](https://web.archive.org/web/20150220014329/http://www.phil-cao.com:80/dearchrome/lines/)
|
||||
|
||||
[tempsdereaction](https://tempsdereaction.wordpress.com/)
|
||||
est-ce que en veut reproduire en html le processus mis en place dans ce blog ou prendre des contenus du blog pour les mettre en page?
|
||||
|
||||
imprimer une version de ce blog sous forme de post-it ou de poster par exemple, avoir un format adaptable // automatisation
|
||||
|
||||
|
||||
|
||||
## Show and tell
|
||||
|
||||
### Bachir
|
||||
|
||||
Projet inspiré de Gitbook
|
||||
|
||||
Libriis
|
||||
https://figureslibres.io/gogs/bachir/libriis
|
||||
|
||||
### Élodie
|
||||
|
||||
https://ordigami.net/
|
||||
|
||||
version écran on voit les faces du cube côte-côte et en version
|
||||
|
||||
### Nicolas
|
||||
|
||||
http://perles-du-bon-coin.fr/
|
||||
|
||||
**Kevin
|
||||
http://csswarp.eleqtriq.com/
|
||||
|
||||
Lucile
|
||||
https://studiomoniker.com/projects/click-click-click
|
||||
https://clickclickclick.click/#e8d0c8a17bce3955716c16b413ee946b
|
||||
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
h1(#workshop-ola-html2print). Workshop Ola HTML2Print
|
||||
|
||||
https://listes.domainepublic.net/listinfo/html2print
|
||||
|
||||
"Cookbook":http://pads.osp.kitchen/p/ola-cookbook
|
||||
|
||||
h2(#participants). Participants
|
||||
|
||||
* Sarah
|
||||
* Nicolas
|
||||
* Pierre-Yves
|
||||
* Elie
|
||||
* Kenji
|
||||
* Timothée
|
||||
* Bach
|
||||
* Gab
|
||||
* Elodie _Kévin _Angélique
|
||||
|
||||
h2(#markdown-primer). Markdown primer
|
||||
|
||||
* "$":https://daringfireball.net/projects/markdown/
|
||||
* "$":https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
|
||||
|
||||
<pre class="markdown">
|
||||
#titre 1
|
||||
## titre 2 -> 6
|
||||
|
||||
|
||||
[texte du lien](http://tapage.com)
|
||||
|
||||
*bold*²
|
||||
**italique**
|
||||
|
||||
- liste
|
||||
- liste
|
||||
`code`
|
||||
</pre>
|
||||
|
||||
Post css (// sass) Utilisation du le navigateur web Chromium fortement conseillée pour utiliser htmltoprint.css car il prend en compte directement les info renseignées ds le css tel que taille de la page, affichage du fond de page, etc.
|
||||
|
||||
h2(#paquet-de-base). Paquet de base
|
||||
|
||||
https://cloud.osp.kitchen/s/siUuVs7UD93ZeS0
|
||||
|
||||
télécharger le dossier html2print.tiny
|
||||
|
||||
découverte des variables css o_O
|
||||
|
||||
<pre>
|
||||
:root{
|
||||
--ma-variable:210mm;
|
||||
}
|
||||
|
||||
@page{
|
||||
width: var(--ma-variable);
|
||||
}
|
||||
</pre>
|
||||
|
||||
En fait, ce cas précis ne marche pas :P Voir "$":https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules
|
||||
|
||||
h2(#documentation). Documentation
|
||||
|
||||
h3(#howto). howto
|
||||
|
||||
readme : https://figureslibres.io/gogs/bachir/ola4doc
|
||||
|
||||
h3(#rendu). rendu
|
||||
|
||||
192.168.99.35:8000
|
||||
|
||||
h3(#textile). textile
|
||||
|
||||
https://txstyle.org/
|
||||
|
||||
h2(#mise-en-commun-projets-sam-14-juin-14h). mise en commun projets (sam 14 juin, 14h)
|
||||
|
||||
h3(#osp). OSP
|
||||
|
||||
prendre cet occase pour faire un cookbook de htmltoprint - césures - conversion RVB --> CMJN - faire couler du txt d'une page à une autre
|
||||
|
||||
h3(#elie-kenji). Elie & Kenji
|
||||
|
||||
forme générative BD en scketch processing booklate de l'évolution de cette forme Lafkon make art
|
||||
|
||||
h3(#angelique). Angelique
|
||||
|
||||
contenu du wordpress de PY ou faire de la documentation html2print
|
||||
|
||||
h3(#timothée). Timothée
|
||||
|
||||
utiliser are.na (ce site est un genre de pinterest pour les graphistes) extraire un contenu web pour créer des booklates finalité: creer l'outil qui servirait à faire ça (codé en ruby) Scraping mettre en valeur les recherches faites par d'autres
|
||||
|
||||
h3(#kévin-t). Kévin T
|
||||
|
||||
documentation sur htmltoprint ou récupérer contenu d'une page wikipédia et si possible récupérer l'historique complet des modifications de la page (depuis sa création jusqu'à auj) et les mettre en forme
|
||||
|
||||
http://epicpedia.org/
|
||||
|
||||
!http://annemiekevanderhoek.nl/werk/epic03.jpg(epicpedia)! transfo des scripts de téâtre
|
||||
|
||||
h3(#bachir). Bachir
|
||||
|
||||
Projet d'écriture. Transposer "La convivialité" de Ivan Illitch qui a été écrit dans les années 70, en 2017, en parlant de choses actuelles et plus particulièrement du numérique.
|
||||
|
||||
h3(#gabriel). Gabriel
|
||||
|
||||
Utiliser le workshop comme prétexte pour écrire rapport de son stage chez OSP
|
||||
Tenais un journal de ses apprentissages, un retour sur expériences.
|
||||
confrontation txt bruts - commentaires
|
||||
mini readme sur chacunes des choses qu'il a utilisées et qui pourraient intéresser d'autres prsn.
|
||||
Avoir deux version en co-existance, une web et une print
|
||||
|
||||
h3(#élodie). Élodie
|
||||
|
||||
Retravailler le site internet de synesthésie. Peut-être en faire une version imprimable. Se familiariser au code.
|
||||
|
||||
h3(#nicolas). Nicolas
|
||||
|
||||
"Whole Earth Catalogue":https://duckduckgo.com/?q=whole+earth+catalogue&iax=1&ia=images
|
||||
Aux sources de l'utopie numérique: de la contre culture à la cyberculture, Stewart Brand, un homme d'influence
|
||||
|
||||
"Aux sources de l'utopie numérique, Fred Turner":http://cfeditions.com/utopieNumerique/
|
||||
|
||||
Outil dans l'esprit du Whole earth catalog, réactiver cette idée.
|
||||
Plans pour construction de machines, comment se protéger de ___
|
||||
Grille dans laquelle injecter du contenu pour faire cet objet catalogue (forme non définie pour l'instant: poster, magazine)
|
||||
"Libre Création - Libre Design":http://projets.esadhar.fr/usable/dashboard/
|
||||
"Libre Création - Libre Design (sources)":https://esadhar.net/gogs/libre-creation_libre-design/usable
|
||||
|
||||
ESADHaR, projet de recherche avec des étudiants. Test d'outils libres pour la création graphiques, qu'ils aient été initialement créés dans ce but ou non. projets.esadhar.fr/usable/dashboard
|
||||
|
||||
Fonts:
|
||||
|
||||
* http://osp.kitchen/foundry/fluxisch-else/
|
||||
* https://github.com/uplaod/YoungSerif ou http://areyoubeingserved.constantvzw.org/static/fonts/YoungSerif-Regular.otf (version modifiée par Stéphanie avec la a minuscule plus)
|
||||
|
||||
h3(#pierre-yves). Pierre-Yves
|
||||
|
||||
Comment transcrire l'Idée de calques // scribus, indesign dans/avec htmltoprint faire des boites imbriquées les unes dans les autres qui changent de couleur, qqch de génératif //dearchrome project [Alex]
|
||||
|
||||
"dearchrome":https://web.archive.org/web/20150220014329/http://www.phil-cao.com:80/dearchrome/lines/
|
||||
|
||||
"tempsdereaction":https://tempsdereaction.wordpress.com/
|
||||
est-ce que en veut reproduire en html le processus mis en place dans ce blog ou prendre des contenus du blog pour les mettre en page?
|
||||
|
||||
imprimer une version de ce blog sous forme de post-it ou de poster par exemple, avoir un format adaptable // automatisation
|
||||
|
||||
h2(#show-and-tell). Show and tell
|
||||
|
||||
h3(#bachir-1). Bachir
|
||||
|
||||
Projet inspiré de Gitbook
|
||||
|
||||
Libriis https://figureslibres.io/gogs/bachir/libriis
|
||||
|
||||
h3(#élodie-1). Élodie
|
||||
|
||||
https://ordigami.net/
|
||||
|
||||
version écran on voit les faces du cube côte-côte et en version
|
||||
|
||||
h3(#nicolas-1). Nicolas
|
||||
|
||||
http://perles-du-bon-coin.fr/
|
||||
|
||||
**Kevin http://csswarp.eleqtriq.com/
|
||||
|
||||
Lucile https://studiomoniker.com/projects/click-click-click https://clickclickclick.click/#e8d0c8a17bce3955716c16b413ee946b
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
* "00-ola":#00-ola
|
||||
* "alex":#alex
|
||||
* "bachir":#bachir
|
||||
* "gabriel":#gabriel
|
||||
* "kenji":#kenji
|
||||
* "Kenji-Elie":#Kenji-Elie
|
||||
* "kevin":#kevin
|
||||
* "Lucile":#Lucile
|
||||
* "nicolas":#nicolas
|
||||
* "PierreYves":#PierreYves
|
||||
* "Sarah":#Sarah
|
||||
* "timothee_goguely":#timothee_goguely
|
||||
* "Pad":#pad
|
||||
* "CookBook":#cookbook
|
||||
Reference in New Issue
Block a user