tykayn/orgmode-to-gemini-blog
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Tykayn 2024-11-08 18:05:08 +01:00 committed by tykayn
parent 0b9f66167c
commit 0a189bd6ad
151 changed files with 18303 additions and 565 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -12,6 +12,9 @@ Pour un article en langue En, sur le blog cipherbliss_blog, donner le titre entr
python3 new_article.py cipherbliss_blog en "Creation of a gemini blog" python3 new_article.py cipherbliss_blog en "Creation of a gemini blog"
``` ```
## prérequis pour installation ## prérequis pour installation
Avoir des articles au format org, les mettre dans un dossier source/nom_du_blog, et avoir quelques bibliothèques dispo:
```shell ```shell
bash install.sh bash install.sh
``` ```
@ -20,8 +23,12 @@ Testé avec:
Pandoc 2.9.2.1 Pandoc 2.9.2.1
Python 3.10.12 Python 3.10.12
## Conversion des fichiers Org vers gemini et html ## Conversion des fichiers Org vers gemini et html
Ceci va convertir ce qui se trouve dans le dossier `sources/tykayn_blog`
et produire un site web dans `html_output/tykayn_blog`
ainsi qu'une capsule gemini dans `capsules-gemini/tykayn_blog`
```shell ```shell
bash converters.sh bash converters.sh tykayn_blog
``` ```

33
build_indexes.py
View File

@ -174,24 +174,27 @@ def generer_index(dossier_source, fichier_index, titre_index):
# contenu_index_html += f"<br><a href=/{lang_folder}{link_html}>{link_html}</a>" # contenu_index_html += f"<br><a href=/{lang_folder}{link_html}>{link_html}</a>"
print(contenu_index_gmi) print(contenu_index_gmi)
print('chemin_fichier_index_html' , dossier_parent+chemin_fichier_index_html)
print(' ')
with open(dossier_parent+chemin_fichier_index_html, 'w', encoding='utf-8') as file:
file.write('<html><head><title>'+args.title+'</title></head><body>'+contenu_index_html+'</article></body></html>')
print(f"Fichier d'index '{chemin_fichier_index_html}' généré avec succès.")
# os.remove(dossier_parent+'/html-websites/'+args.source+'/index.html')
destination_html = dossier_parent+'/html-websites/'+args.source+'/'
shutil.move(dossier_parent+chemin_fichier_index_html, destination_html)
shutil.move(destination_html+chemin_fichier_index_html, destination_html+'index.html')
# Écrit le contenu dans le fichier d'index # Écrit le contenu dans le fichier d'index
try: try:
# with open(chemin_fichier_index_gemini, 'w', encoding='utf-8') as file: with open(chemin_fichier_index_gemini, 'w', encoding='utf-8') as file:
# file.write(contenu_index_gmi) file.write(contenu_index_gmi)
# print(f"Fichier d'index '{chemin_fichier_index_gemini}' généré avec succès.") print(f"Fichier d'index '{chemin_fichier_index_gemini}' généré avec succès.")
# os.remove('gemini-capsules/'+args.source+'/index.gmi') os.remove('gemini-capsules/'+args.source+'/index.gmi')
# shutil.move(chemin_fichier_index_gemini, 'gemini-capsules/'+args.source+'/index.gmi') shutil.move(chemin_fichier_index_gemini, 'gemini-capsules/'+args.source+'/index.gmi')
print('chemin_fichier_index_html' , dossier_parent+chemin_fichier_index_html)
print(' ')
with open(dossier_parent+chemin_fichier_index_html, 'w', encoding='utf-8') as file:
file.write('<html><head><title>'+args.title+'</title></head><body>'+contenu_index_html+'</article></body></html>')
print(f"Fichier d'index '{chemin_fichier_index_html}' généré avec succès.")
# os.remove(dossier_parent+'/html-websites/'+args.source+'/index.html')
destination_html = dossier_parent+'/html-websites/'+args.source+'/'
shutil.copy(dossier_parent+chemin_fichier_index_html, destination_html)
shutil.copy(destination_html+chemin_fichier_index_html, destination_html+'index.html')
print(f"Déplacé dans '{'html-websites/'+args.source}'.") print(f"Déplacé dans '{'html-websites/'+args.source}'.")
except OSError as e: except OSError as e:

11
converters.sh
View File

@ -108,7 +108,7 @@ generate_website() {
cd .. cd ..
cd .. cd ..
cd .. # cd ..
pwd pwd
# création de l'index: # création de l'index:
@ -117,12 +117,13 @@ generate_website() {
# sauver le tout dans un fichier index.gmi # sauver le tout dans un fichier index.gmi
python3 build_indexes.py $website_name "$website_name" python3 build_indexes.py $website_name "$website_name"
mv index_$website_name.gmi gemini-capsules/$website_name/index.gmi # mv index_$website_name.gmi gemini-capsules/$website_name/index.gmi
mv index_$website_name.html html-websites/$website_name/index.html # mv index_$website_name.html html-websites/$website_name/index.html
cp $style_file html-websites/$website_name/style.css cp $style_file html-websites/$website_name/style.css
# -------------------------------------------------------------------------------------------------- # --------------------------------------------------------------------------------------------------
# convertir les fichiers org # convertir les fichiers org
echo " ------------ enrich html --------"
python3 enrich_html.py html-websites/$website_name -t $website_name --style $style_file python3 enrich_html.py html-websites/$website_name -t $website_name --style $style_file
@ -147,7 +148,7 @@ for fichier in output/*$website_name*.md ; do
done done
echo "génération des fichiers gemini faite." echo "génération des fichiers gemini faite."
echo "fichiers gmi présents:" # echo "fichiers gmi présents:"
ls -l output/*.gmi |wc -l # ls -l output/*.gmi |wc -l
done done

36
enrich_html.py
View File

@ -12,23 +12,33 @@ args = parser.parse_args()
# Style CSS minimaliste # Style CSS minimaliste
style_file = args.style style_file = args.style
css_content = "" css_content = ""
with open(os.path.join(style_file), "r") as f:
css_content = f.read() # inline_the_css=False
css_content = "<style type='text/css'>{css_content}</style>" inline_the_css=True
if inline_the_css:
with open(os.path.join(style_file), "r") as f:
css_content = f.read()
css_content = "<style type='text/css'>{css_content}</style>"
html_dir = args.html_dir html_dir = args.html_dir
def enrich_one_file(file):
print('enrich html file:',os.path.join(root, file))
# Ouvrir le fichier HTML en mode lecture
with open(os.path.join(root, file), "r") as f:
html_content = f.read()
# Ajouter la déclaration de charset UTF-8, le doctype HTML et le titre du site Web
html_content = f"<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<title>{args.title}</title>\n{css_content}<link type='stylesheet/css' href='/style.css'></link></head>\n<body>\n<a href='/'>Retour à l'Accueil</a><hr/>{html_content}\n<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>\n</html>"
# Écrire le contenu modifié dans le fichier HTML
with open(os.path.join(root, file), "w") as f:
f.write(html_content)
# Parcourir tous les fichiers HTML dans le dossier # Parcourir tous les fichiers HTML dans le dossier
for root, _, files in os.walk(html_dir): for root, _, files in os.walk(html_dir):
print(files)
for file in files: for file in files:
if file.endswith(".html"): if file.endswith(".html"):
# Ouvrir le fichier HTML en mode lecture enrich_one_file(file)
with open(os.path.join(root, file), "r") as f:
html_content = f.read()
# Ajouter la déclaration de charset UTF-8, le doctype HTML et le titre du site Web
html_content = f"<!DOCTYPE html>\n<html lang=\"fr\">\n<style type='text/css' src='/style.css'></style><head>\n<meta charset=\"UTF-8\">\n<title>{args.title}</title>\n{css_content}</head>\n<body>\n<a href='/'>Retour à l'Accueil</a><hr/>{html_content}\n<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>\n</html>"
# Écrire le contenu modifié dans le fichier HTML
with open(os.path.join(root, file), "w") as f:
f.write(html_content)

210
html-websites/cipherbliss_blog/2011/cipherbliss_blog_110_maison-l-preuve-des-zombies-et-des-tmoins-de-jovah/index.html Normal file
View File

@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 297</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2011-12-06 04:18:50&gt;</li>
<li>modifié: &lt;2011-12-09 03:27:58&gt;</li>
<li>Index des articles du blog<a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77"> index blog
cipherbliss</a></li>
</ul>
<h2 id="maison-à-lépreuve-des-zombies-et-des-témoins-de-jéovah">Maison à
l'épreuve des zombies et des témoins de jéovah</h2>
<p><img
src="https://www.thelastgoddess.com/wordpress/wp-content/uploads/2011/05/Zombie-house-3.jpg" />
<img
src="https://www.thelastgoddess.com/wordpress/wp-content/uploads/2011/05/Zombie-house-5.jpg" />
<img
src="https://www.thelastgoddess.com/wordpress/wp-content/uploads/2011/05/Zombie-house-9.jpg" />
[[<a
href="https://www.thelastgoddess.com/wordpress/2011/05/05/zombie-proof-house-keeps-the-undead-and-jehovahs-witnesses-at-bay/">https://www.thelastgoddess.com/wordpress/2011/05/05/zombie-proof-house-keeps-the-undead-and-jehovahs-witnesses-at-bay/</a>][La
maison anti zombies et religieux itinérants c'est par ici pour les
autres images]] C'est juste awesome :D</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

491
html-websites/cipherbliss_blog/2012/cipherbliss_blog_89_tutoriel-de-plugin-jquery/index.html Normal file
View File

@ -0,0 +1,491 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 276</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2012-09-12 13:20:00&gt;</li>
<li>modifié: &lt;2014-03-19 13:02:48&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="tutoriel-de-plugin-jquery-1">tutoriel de plugin jQuery</h2>
<p><img
src="https://img2.websourcing.fr/files/2010/01/jquery-1-4-500x218.jpg" /></p>
<p>Alors comme ça petit padawan tu aimerais créer un plugin javascript
pour cette merveilleuse librairie de fonctions? Voici un tutoriel fort
inspiré de <a href="https://docs.jquery.com/Plugins/Authoring">la
documentation officielle sur les plugins jQuery en Anglais.</a> Prêts à
profiter du meilleur de jQuery et gagner un maximum de temps en
développement pour davantage de sociabilité? Suivez le guide.</p>
<h3 id="pour-commencer-son-plugin">Pour commencer son plugin</h3>
<p>Pour éviter que notre super plugin n'entre en conflit avec d'autres
plugins utilisant le signe dollar il vaut mieux passer jQuery en
fonction auto invoquée (Immediately-Invoked Function Expression , ou
IIFE).</p>
<pre class="example"><code>(function( $ ) { $.fn.monSuperPlugin = function() {
// les instructions trop bien ici 
};
})( jQuery );
</code></pre>
<h3 id="le-contexte">Le contexte</h3>
<p>Avec cette base nous pouvons commencer à écrire notre contenu de
plugin. Mais avant cela, parlons un peu du mot clé <em>this</em> qui à
l'intérieur de notre fonction se réfère à l'objet jQuery sur lequel le
plugin est invoqué. <em>this</em> se réfère au DOM (document object
model) natif. Il n'est donc pas besoin d'entourer <em>this</em> par les
parenthèses du sélécteur jQuery dans ce contexte.</p>
<pre class="example"><code>function( $ ) { $.fn.monSuperPlugin = function() {
// les instructions trop bien ici
this.fadeIn(&#39;normal&#39;, function(){
// le mot clé this est un élément du DOM
}); }; })( jQuery );
</code></pre>
<p>pour actionner notre plugin on pourra donc l'appeler ainsi sur un
#element de votre choix ou plusieurs grâce à la puissance des sélecteurs
CSS.</p>
<pre class="example"><code>$(&#39;#element&#39;).myPlugin();
</code></pre>
<h3 id="les-bases">Les bases</h3>
<p>Maintenant que nous comprennons le contexte des plugins jQuery,
écrivons un code qui fait réellement quelque chose.</p>
<p>Par exemple, un simple plugin qui évalue les hauteurs pour retourner
la plus grande dans le jeu d'éléments sélectionnés.</p>
<pre class="example"><code> (function( $ ){ $.fn.hauteurMax = function() {
var max = 0;
this.each(function() {
max = Math.max( max, $(this).height() );
});
return max; 
}; })( jQuery );
var tallest = $(&#39;div&#39;).hauteurMax();
</code></pre>
<p>Ceci donne à la variable <em>tallest</em> la valeur de la div la plus
haute de la page.</p>
<h3 id="maintenir-la-continuité">Maintenir la continuité</h3>
<p>L'exemple précédent retourne un nombre entier, mais bien souvent le
but d'un plugin est de modifier un jeu d'éléments et de les passer à la
méthode suivante dans la chaîne de fonctions. C'est ce qui fait la
beauté du design de jQuery et explique sa popularité. Donc, pour
maintenir la continuité de la chaîne dans vos plugins, vous devez faire
en sorte que les retours de plugins comprennent le mot clé
<em>this</em>.</p>
<pre class="example"><code> (function( $ ){ $.fn.verrouTailles = function( type ) {
return this.each(function() {
var $this = $(this);
if ( !type || type == &#39;width&#39; ) {
$this.width( $this.width()
);
}
if ( !type || type == &#39;height&#39; ) {
$this.height( $this.height() );
} 
}); 
}; 
})( jQuery );
</code></pre>
<p>Ce plugin associe la largeur et la hauteur actuelle de chaque élément
du jeu sélectionné. Il sera ajouté dans le HTML de la page un attribut
<em>width</em> et <em>height</em> à chaque balise ainsi sélectionnée.
Nous pouvons donc y mettre une autre méthode à la suite, comme
<em>css()</em>. Et pour le mettre en place dans une chaîne:</p>
<pre class="example"><code>$(&#39;div&#39;).verrouTailles(&#39;width&#39;).css(&#39;color&#39;, &#39;red&#39;);
</code></pre>
<p>Parce que le mot clé this est retourné dans la lunette de script du
plugin, la continuité est maintenue. Aussi, nous pouvons mettre des
options et des choix par défaut dans nos plugins.</p>
<h3 id="options-et-défauts">Options et défauts</h3>
<p>Les configurations par défaut peuvent être étendues avec $.extend <a
href="https://docs.jquery.com/Utilities/jQuery.extend">https://docs.jquery.com/Utilities/jQuery.extend</a>
quand le plugin est invoqué. <strong>jQuery.extend( cible [, objet1] [,
objetN])</strong> extend sert à fusionner le contenu de plusieurs objets
dans le premier objet. Au lieu d'invoquer un plugin avec un grand nombre
d'arguments, vous pouvez passer un seul objet des options que vous
voulez modifier en argument.</p>
<pre class="example"><code> (function( $ ){ $.fn.tooltip = function( options ) {
// Créer quelques options par defaut, les étendre comme nous voulons.
var settings = $.extend( { &#39;location&#39; : &#39;top&#39;, &#39;background-color&#39; : &#39;blue&#39; }, options);
return this.each(function() { // code du plugin Tooltip ici });
};
})( jQuery );
</code></pre>
<p>ce qui donne en pratique avec une option définie dans un objet:</p>
<pre class="example"><code>$(&#39;div&#39;).tooltip({ &#39;location&#39; : &#39;left&#39; });
</code></pre>
<p>Dans cet exemple, après avoir appelé le plugin <em>tooltip</em> avec
les options choisies, la localisation par défaut /top/devient réécrite
en <em>left</em>, alors que la configuration de couleur d'arrière plan
reste <em>bleue</em> car elle n'a pas été spécifiée. la config
<em>settings</em> de l'objet devient donc comme ceci:</p>
<pre class="example"><code> {
&#39;location&#39; : &#39;left&#39;,
&#39;background-color&#39; : &#39;blue&#39;
}
</code></pre>
<p>C'est une bonne pratique et un très bon moyen de rendre un plugin
configurable sans avoir besoin de donner toutes les options à chaque
fois.</p>
<h3 id="espace-de-noms">Espace de noms</h3>
<p>Choisir un espace de nommage est un moyen idéal pour éviter qu'un
autre plugin chargé sur la même page ne vienne remplacer le notre ou le
modifier contre notre gré. En tant que développeur ça nous rend la vie
plus facile pour mieux trier nos méthodes, évènements et données.</p>
<p>Il vaudrait donc mieux ne pas mettre un seul espace de nom par plugin
dans l'objet <em>jQuery.fn</em> mais plutôt stocker nos plugins dans un
objet qui agira comme pour la configuration par défaut que nous venons
de voir. Mais cette fois nous donnons par défaut non pas de simples
variables mais des noms associés à des méthodes.</p>
<pre class="example"><code>(function( $ ){
var methods = { init : function( options ) {
// THIS
},
show : function( ) {
// IS
},
hide : function( ) {
// GOOD
},
update : function( content ) {
// !!!
} };
$.fn.tooltip = function( method ) {
// logique d&#39;appel de méthode
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === &#39;object&#39; || ! method ) {
return methods.init.apply( this, arguments );
}
else { $.error( &#39;La Méthode &#39; + method + &#39; n&#39;existe pas dans jQuery.tooltip&#39; ); } };
})( jQuery );
// appelle la méthode initiatrice
$(&#39;div&#39;).tooltip();
// appelle la méthode initiatrice avec une option
$(&#39;div&#39;).tooltip({ foo : &#39;bar&#39; });
// appelle la méthode hide
$(&#39;div&#39;).tooltip(&#39;hide&#39;);
// appelle la méthode update avec une option
$(&#39;div&#39;).tooltip(&#39;update&#39;, &#39;This is the new tooltip content!&#39;);
</code></pre>
<p>c'est une façon standard d'encapsuler ses méthodes de plugins dans la
communauté jQuery, c'est aussi le cas pour jQueryUI. <a
href="https://jqueryui.com/">https://jqueryui.com/</a></p>
<ol>
<li><p>Évènements</p>
<p>la méthode <em>bind()</em> permet de donner un espace de nom à des
évènements liés. Si votre plugin lie un évènement, c'est une bonne
pratique de lui donner un espace de nom. ainsi, si vous avez besoin de
le délier avec <em>unbind()</em> sans interférer avec les autres
évènements qui pourraient avoir été liés avec le même type d'évènement.
Vous pouvez ajouter le nom de l'espace
<em>nom<sub>denamespace</sub></em> au type d'évènement que vous liez,
comme ceci.</p>
<pre class="example"><code> (function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
$(window).bind(&#39;resize.tooltip&#39;, methods.reposition); }); },
destroy : function( ) {
return this.each(function(){ $(window).unbind(&#39;.tooltip&#39;);
})%% },
reposition : function( ) {
// ...
},
show : function( ) {
// ...
}, hide : function( ) {
// ...
}, update : function( content ) {
// ...
} };
$.fn.tooltip = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
}
else if ( typeof method === &#39;object&#39; || ! method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( &#39;Method &#39; + method + &#39; does not exist on jQuery.tooltip&#39; ); } };
})( jQuery );
$(&#39;#fun&#39;).tooltip();
// et un peu plus tard...
$(&#39;#fun&#39;).tooltip(&#39;destroy&#39;);
</code></pre>
<p>Dans cet exemple, quand tooltip est initialisé avec la méthode
<em>init</em> la méthode <em>reposition</em> est liée à l'évènement de
redimension de la fenêtre sous l'espace de nom <em>tooltip</em>. Plus
loin, si le développeur a besoin de détruire tooltip, nous pouvons
délier les évènements liés à ce plugin en lui passant le nom de
l'espace, ici tooltip, à la méthode <em>unbind</em>. Cela nous permet de
délier les évènements d'un plugin en toute sécurité sans délier d'autres
évènements liés en dehors du plugin.</p></li>
</ol>
<h3 id="data">Data</h3>
<p>Quand nous avons besoin de maintenir un état ou de vérifier que notre
plugin a été initialisé sur un certain élément, la méthode jQuery
<em>data</em> est un très bon moyen de garder une trace des variables
sur les éléments. Cependant, au lieu de garder une trace de quelques
appels de données séparés avec des noms différents, il vaut mieux
utiliser un objet pour héberger toutes les variables et accéder à cet
objet par un seul espace de nom.</p>
<pre class="example"><code> (function( $ ){ var methods = { init : function( options ) {
return this.each(function(){
var $this = $(this),
data = $this.data(&#39;tooltip&#39;),
tooltip = $(&#39;&#39;,
{ text : $this.attr(&#39;title&#39;) }); // si le plugin n&#39;a pas encore été initialisé
if ( ! data ) {
/* faire des trucs ici */
$(this).data(&#39;tooltip&#39;, { target : $this, tooltip : tooltip });
}
}); },
destroy : function( ) { return this.each(function(){ var $this = $(this), data = $this.data(&#39;tooltip&#39;);
// Namespacing FTW
$(window).unbind(&#39;.tooltip&#39;);
data.tooltip.remove();
$this.removeData(&#39;tooltip&#39;);
}) },
reposition : function( ) {
// ...
},
show : function( ) {
// ...
},
hide : function( ) {
// ...
},
update : function( content ) {
// ...
} };
$.fn.tooltip = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === &#39;object&#39; || ! method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( &#39;Method &#39; + method + &#39; does not exist on jQuery.tooltip&#39; );
} };
})( jQuery );
</code></pre>
<h3 id="résumé-et-meilleures-pratiques">Résumé et meilleures
pratiques</h3>
<p>Écrire des plugins jQuery vous permet à tirer le meilleur profit de
la bibliothèque et abstraire vos plus intelligentes et utiles fonctions
à travers un code réutilisable pouvant vous faire faire un grand gain de
temps et rendre votre développement encore plus efficace. Voici un bref
résumé de cet article et ce que vous devez garder à l'esprit quand vous
développerez votre prochain plugin jQuery:</p>
<ul>
<li>Entourez toujours votre plugin par l'auto invocation: (function( $
){ <em>* plugin goes here *</em> })( jQuery );</li>
<li>Ne mettez pas inutilement en sélecteur $() le mot clé <em>this</em>
dans le cadre de votre plugin. this seul, suffit.</li>
<li>à moins de ne retourner qu'une valeur intrinsèque, faites en sorte
que votre fonction de plugin retourne le mot clé <em>this</em> pour
maintenir la continuité.</li>
<li>Plutôt que de requérir une longue suite d'arguments, mettez la
configuration de votre plugin dans un objet javascript dont les valeur
par défaut peuvent être étendues avec extend().</li>
<li>Ne surchargez pas l'objet <em>jQuery.fn</em> avec plus d'un espace
de nom par plugin.</li>
<li>Rangez toujours vos méthodes, évèenments et données dans un seul
espace de nom par plugin.</li>
</ul>
<p>Comme le conseille <a href="https://paulirish.com">Paul Irish</a> un
des auteurs de <a href="https://html5boilerplate.com">Boiler Plate</a>,
consulter <a href="https://code.jquery.com/jquery.js">la source
commentée de jQuery</a> pour comprendre comment elle fonctionne est un
excellent moyen d'apprendre à manier le javascript en profondeur et
développer ses propres solutions.</p>
<p><a
href="https://code.jquery.com/jquery.js">https://code.jquery.com/jquery.js</a></p>
<p>Mettez la en marque page :) à vous de jouer maintenant!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

129
html-websites/cipherbliss_blog/2013/cipherbliss_blog_68_afficher-le-jour-de-la-semaine-dans-la-barre-d-ubuntu/index.html
View File

@ -1,134 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<style type='text/css' src='style.css'></style><head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>cipherbliss_blog</title> <title>cipherbliss_blog</title>
<style type='text/css'>* { <style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
text-align: left;
margin: 0 auto;
font-size: 1.5rem;
line-height: 1.5em;
max-width: 60ch;
color: #000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
margin-top: 1em;
margin-bottom: 2rem;
color: #333;
}
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
/* Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
max-width: 100%;
}
/* Inherit fonts for form controls */
input,
button,
textarea,
select {
font: inherit;
}
/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* Improve line wrapping */
p {
text-wrap: pretty;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
line-height: 1.3em;
}
#root,
#__next {
isolation: isolate;
}
input,
button,
textarea,
select {
font: inherit;
}
ul {
padding-left: 4ch;
padding-right: 4ch;
}
li {
margin-bottom: 1em;
}
@media (max-width: 20rem) {
body {
padding: 1rem;
}
}
</style></head>
<body> <body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html> <a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">

204
html-websites/cipherbliss_blog/2013/cipherbliss_blog_70_dcaler-les-sous-titres-dans-vlc-media-player/index.html Normal file
View File

@ -0,0 +1,204 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 256</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2013-11-27 22:16:04&gt;</li>
<li>modifié: &lt;2013-11-27 22:16:52&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="décaler-les-sous-titres-dans-vlc-media-player">décaler les sous
titres dans VLC media player</h2>
<p><a
href="https://alismile.deviantart.com/art/VLC-80683878">[[<span>https://fc01.deviantart.net/fs27/i/2008/082/7/1/VLC_by_alismile.jpg</span></a>]]
les raccourcis clavier F,G,H, et J vous permettront de décaler les sous
titres, et l'audio a 50 milisecondes près. F et G pour les sous titres,
H et J pour l'audio. C'est ty pas merveilleux?</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

212
html-websites/cipherbliss_blog/2013/cipherbliss_blog_78_clavier-lumineux/index.html Normal file
View File

@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 264</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2013-06-06 19:58:19&gt;</li>
<li>modifié: &lt;2013-06-06 20:01:24&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="clavier-lumineux-1">Clavier lumineux</h2>
<p>Jusqu'à présent, ce qui me faisait toujours réaménager mon intérieur
c'était le souci d'avoir un bon éclairag, assez puissant pour éclairer
mon clavier mais pas trop méchant non plus pour ne pas me ruiner les
yeux. Je me suis donc lancé dans le clavier sans fil pas trop cher,
(70€) mais lumineux. Logitech a fait de la bonne avec son K800 et c'est
un vrai plaisir. Faudrait juste qu'un jour ils se décident à faire des
emballages autrement qu'avec une présentation qwerty.</p>
<p><a
href="https://tykayn.fr/wp-content/uploads/i/2013/06juin/informageek/g/clavier_lumineux-2_2013-05-02%2023.33.55.jpg">[[<span>https://tykayn.fr/wp-content/uploads/i/2013/06juin/informageek/clavier_lumineux-2_2013-05-02%2023.33.55.jpg</span></a>]]
confort de frappe nickel. Luminosité réglable, détection d'approche de
la main. Rechargement par USB, ajout de bluetooth sur un ordi avec le
détecteur. <a
href="https://tykayn.fr/wp-content/uploads/i/2013/06juin/informageek/g/clavier_lumineux_2013-05-02%2023.33.10.jpg">[[<span>https://tykayn.fr/wp-content/uploads/i/2013/06juin/informageek/clavier_lumineux_2013-05-02%2023.33.10.jpg</span></a>]]
Bweffe caykioule!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

228
html-websites/cipherbliss_blog/2014/cipherbliss_blog_45_la-filbre-optique-c-est-pas-gagn/index.html Normal file
View File

@ -0,0 +1,228 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 231</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2014-12-19 12:28:36&gt;</li>
<li>modifié: &lt;2014-12-19 12:31:49&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="la-filbre-optique-cest-pas-gagné">La filbre optique c'est pas
gagné</h2>
<p>J'habite à trois kilomètres du périph Parisien, vous savez la route
qui n'a jamais assez de place et qui défie à la fois le code de la route
et le bon sens.<br />
dans un lieu où les progrès en rapidité du réseau des interwebs s'est
arrêté à l'an 2000. C'est un peu fâcheux quand notre métier c'est le
ouaibe. Et puis, on ne commitera jamais trop vite comme ils disent chez
<a href="https://www.commitstrip.com/fr/">Commit Strip</a>.<br />
Aussi, j'ai demandé WTF à la Mairie de ma ville qui m'a gentiment
répondu que "c'est pas à nous qu'il faut demander" mais à Arcueil.<br />
<br />
<img
src="https://tykayn.fr/wp-content/uploads/i/2014/12decembre/deploiement_fibre_val-de-bievre-2014-09-24.png" />
L'actualité du déploiement de la fibre est donc signifié clairement sur
le site du val de bièvre.<br />
"on marque quoi pour informer les gens? -euuuuuuuh - ok je note
ça"<br />
C'est un peu la même chose quand on leur dit "dites donc, vous avez payé
l'implantation de Vélib dans la ville mais y'a jamais aucun vélib aux
bornes, vous pouvez faire quelque chose? ah non, faut contacter le
service client de Vélib", et donc Vélib de me répondre " ah mais non,
nous on peut rien faire, c'est la mairie qui doit s'arranger pour
ça".<br />
<br />
Breffe, la fibre c'est bien beau, mais c'est pas gagné et on ne peut
rien y faire, nous autres pauvres citoyens polis avec
l'administration.<br />
Reste à savoir si la 4G en tant que modem est une alternative
viable.<br />
</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

204
html-websites/cipherbliss_blog/2014/cipherbliss_blog_46_la-neutralit-du-net/index.html Normal file
View File

@ -0,0 +1,204 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 232</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2014-12-19 12:20:38&gt;</li>
<li>modifié: &lt;2014-12-19 12:20:38&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="la-neutralité-du-net">La neutralité du net</h2>
<p><img
src="https://tykayn.fr/wp-content/uploads/i/2014/12decembre/neutrealite_du_net_2014-09-24%2017.30.40.jpg" />
Petit livre dans la collection des essentiels d'Hermès, écrit par du
beau monde du CERN, La neutralité du net est à mettre entre toutes les
mains des internautes pour mieux comprendre les enjeux et conserver un
réseau ouvert.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

215
html-websites/cipherbliss_blog/2014/cipherbliss_blog_47_capturer-et-annoter-facilement/index.html Normal file
View File

@ -0,0 +1,215 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 233</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2014-10-16 10:58:18&gt;</li>
<li>modifié: &lt;2014-10-16 11:01:59&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="capturer-et-annoter-facilement-1">Capturer et annoter
facilement</h2>
<p><a
href="file:///public/i/2014/10octobre/Superbe_capture_d_ecran___capturer_et_annoter___Chrome_Web_Store.png">[[<em>public/i/2014/10octobre</em>.Superbe<sub>capturedecran</sub>__<sub>captureretannoter</sub>__<sub>ChromeWebStorem</sub>.png</a>]]
Chrome est un chouette navigateur qui respecte presque la vie privée, et
tout comme firefox il dispose de chouettes extensions. Aujourdhui je
vous présente le très modeste <a
href="https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=fr">"superbe
capture d'écran"</a></p>
<p>qui permet de capturer tout ou une partie de l'écran, avec ou sans
annotations, et de les enregistrer ensuite en tant que fichier png, sur
votre ordi ou dans google drive. Attention au poids des images, mon
écran 1980 * 1600 donne des screenshots de 500 Ko. C'est peut être un
détail pour vous, mais pour ma connec ça veut dire beaucoup. On peut
aussi les imprimer si on est super fier de son art et qu'on aime
gaspiller de l'encre! Simple et pratique, parfait pour faire des
démonstrations et autres tutos aux clients.</p>
<p>Et vous, vous avez des supers extensions à conseiller? :)</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

36
sources/cipherbliss_blog/lang_fr/converted/20131207203655_cipherbliss_blog_68_afficher-le-jour-de-la-semaine-dans-la-barre-d-ubuntu.html → html-websites/cipherbliss_blog/2014/cipherbliss_blog_48_signez-pour-la-neutralit-du-net/index.html
View File

@ -1,4 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -170,27 +177,21 @@
</header> </header>
<h1 id="article">Article</h1> <h1 id="article">Article</h1>
<ul> <ul>
<li>ID: 254</li> <li>ID: 234</li>
<li>guid:</li> <li>guid:</li>
<li>status: publish</li> <li>status: publish</li>
<li>publié le: &lt;2013-12-07 20:36:55&gt;</li> <li>publié le: &lt;2014-09-10 19:24:38&gt;</li>
<li>modifié: &lt;2013-12-07 20:36:55&gt;</li> <li>modifié: &lt;2014-09-10 19:27:44&gt;</li>
<li>Index des articles du blog <a <li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li> href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul> </ul>
<h2 id="afficher-le-jour-de-la-semaine-dans-la-barre-dubuntu">afficher <h2 id="signez-pour-la-neutralité-du-net">signez pour la neutralité du
le jour de la semaine dans la barre d'ubuntu</h2> net</h2>
<p><a <p><br />
href="https://mod-p.deviantart.com/art/pingoins-21851076">[[<span>https://th02.deviantart.net/fs7/300W/i/2005/229/c/0/pingoins_by_Mod_P.jpg</span></a>]]</p> </p>
<p>pour afficher ou masquer des infos dans la barre des tâches d'ubuntu, <hr />
installez le paquet <strong>dconf-tools</strong></p> <p>ça se passe sur <a
<blockquote> href="www.battleforthenet.com">file:www.battleforthenet.com</a></p>
<p>apt-get install dconf-tools</p>
</blockquote>
<p>puis lancez <strong>dconf-editor</strong> allez dans le menu:
<em>com&gt; canonical &gt; indicator &gt; datetime</em> et cochez
<em>show-day</em> vous verrez vos modifications agir en temps réel. Et
vouala ø/</p>
<h1 id="liens">Liens</h1> <h1 id="liens">Liens</h1>
<ul> <ul>
<li>cipherbliss <a <li>cipherbliss <a
@ -198,3 +199,6 @@ href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul> </ul>
</body> </body>
</html> </html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

218
html-websites/cipherbliss_blog/2014/cipherbliss_blog_49_schema-graphique-de-base-de-donnes/index.html Normal file
View File

@ -0,0 +1,218 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 235</li>
<li>guid:</li>
<li>status: draft</li>
<li>publié le: &lt;2014-09-04 20:20:28&gt;</li>
<li>modifié: &lt;2016-07-26 08:46:31&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="schema-graphique-de-base-de-données">schema graphique de base de
données</h2>
<p>((<a
href="https://nsaunders.files.wordpress.com/2009/01/bio.png?w=300&amp;h=129">https://nsaunders.files.wordpress.com/2009/01/bio.png?w=300&amp;h=129</a>||C))
Vous voulez visualiser les relations entre vos tables SQL assez
facilement? vous pouvez le faire avec phpmyadmin, ou en ligne de
commande avec un dump de votre base (en exportant seulement le schéma,
sans données) <em>/</em> #! /bin/bash DBNAME = $1; FILENAME = $2;
mysqldump $DBNAME $(mysql -D DBNAME -Bse "show tables like 'wp_%'") &gt;
FILENAME.sql <em>/</em> Vous pouvez utiliser SQLfairy sur votre dump de
base pour en sortir un png. <em>/</em> sudo apt-get install sqlfairy
<em>/</em> <em>/</em> sqlt-graph -f MySQL -o mydatabase.png -t png
FILENAME.sql <em>/</em> inspiré de [ce post de nsaunders</p>
<table>
<tbody>
<tr class="odd">
<td><a
href="https://nsaunders.wordpress.com/2009/01/11/easy-visualisation-of-database-schemas-using-sqlfairy/">https://nsaunders.wordpress.com/2009/01/11/easy-visualisation-of-database-schemas-using-sqlfairy/</a>]</td>
</tr>
</tbody>
</table>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

215
html-websites/cipherbliss_blog/2014/cipherbliss_blog_50_la-thorie-des-chaines-de-caractre/index.html Normal file
View File

@ -0,0 +1,215 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 236</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2014-09-04 10:03:04&gt;</li>
<li>modifié: &lt;2014-09-04 10:03:23&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="la-théorie-des-chaines-de-caractère">la théorie des chaines de
caractère</h2>
<p><img
src="https://www.geo.mtu.edu/weather/aurora/images/aurora/jan.curtis/images/janc_004.jpg" /><br />
Le film fréquence interdite à une version française assez merveilleuse
dans le passage où deux gens en costume discutent à la télé de comment
fonctionnent les aurores boréales: "C'est ce que nous apprend la théorie
des chaînes de caractère" ou bien, string theory en VO, ce qui voudrait
plutôt dire <a
href="https://www.futura-sciences.com/magazines/matiere/infos/dico/d/physique-theorie-cordes-4472/">théorie
des cordes</a>. Les strings sont un type de variable bien connu pour
tout développeur ayant étudié le typage. C'est une variable dans
laquelle on ne peut pas stocker de slips ou de caleçons, que des
strings. Enfin presque. C'est ainsi que Je me suis un peu trop bidonné
devant cette traduction innatendue. Bon, à part ça c'est un chouette
film que je vous recommande si vous aimez la SF policière tournée avec
peu de moyens.</p>
<p><a href="https://www.geo.mtu.edu">image</a></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

220
html-websites/cipherbliss_blog/2014/cipherbliss_blog_51_distributions-img-et-sauvegarde-de-carte-sd/index.html Normal file
View File

@ -0,0 +1,220 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 237</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2014-08-11 09:56:01&gt;</li>
<li>modifié: &lt;2014-08-11 10:08:18&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="distributions-.img-et-sauvegarde-de-carte-sd">distributions .img
et sauvegarde de carte SD</h2>
<p><img
src="https://www.raspberrypi.org/wp-content/uploads/2014/07/rsz_b--300x225.jpg" />
Si vous avez un <a href="https://www.raspberrypi.org/">raspberry pi</a>
vous n'avez que l'embarras du choix pour y installer des distributions
linux. Téléchargez donc une ou des distributions linux au format .img
sur votre ordi. Pour installer un fichier .img sur une carte SD, on va
se servir de la commande <strong>dd</strong>. et pour créer un fichier
.img à partir d'une installation, ce sera également la commande
<strong>dd</strong> dont on va se servir. si votre carte SD se trouve
dans /dev/sdh (pour le savoir, faites la commande <strong>df
-h</strong>) et votre distribution Pidora-2014-R2-1.img dans votre
dossier ~/distribs/ , il faudra faire comme ceci: <code
class="verbatim">sudo dd if</code>"~/distribs/Pidora-2014-R2-1/Pidora-2014-R2-1.img"
of="/dev/sdh"= et patienter quelques minutes que la copie se fasse,
selon la vitesse de votre lecteur de carte SD.</p>
<p>Dans l'autre sens, la commande pour créer une image système
compressée à partir de la carte SD se trouvant sur //dev/sdh/ avec
compression gzip dans le dossier courant sera: <code
class="verbatim">sudo dd if=/dev/sdh |gzip -9 &gt; ./raspberry_backup_20141108.img.gz</code></p>
<p>Vouala, enjoyez bien et si vous avez une préférence pour une
distribution, dites moi donc pourquoi :)</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

231
html-websites/cipherbliss_blog/2015/cipherbliss_blog_11_twig-et-angular/index.html Normal file
View File

@ -0,0 +1,231 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 197</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-12-08 09:12:42&gt;</li>
<li>modifié: &lt;2016-05-11 07:17:10&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="twig-et-angular-1">twig et angular</h2>
<p>twig utilise des marquerus en double accolade, angular aussi dans ses
templates. SI on veut éviter de se marcher sur les pieds et de voir ses
instructions de template angular mangées par celles de twig (car
évaluées avant que le js n'y ait accès), il existe deux méthodes
courantes: entourer les instructions angular de balise twig "verbatim"
afin qu'elles ne soient pas interprêtées, ce qui rallonge
considérablement le code des templates en plus d'être assez laid. </p>
<pre class="example"><code>{% verbatim %}
{{ monExpressionAngular }}
{% verbatim %}
</code></pre>
<p>ou bien on peut changer les marqueurs d'expressions angular dans la
config de notre app. Par example, utiliser des double parenthèses. mon
clavier azerty préfère, car cela évite de faire deux boutons pour un
caractère. Pour cela, dans l'instanciation de votre app angular, dans la
config, mettez le service $interpolateProvider et définissez lui ses
symboles de début et de fin comme ceci:</p>
<pre class="example"><code>(function () {
window.tykaynApp = angular.module(&#39;tykaynApp&#39;, [])
.config([&#39;$interpolateProvider&#39;, function ($interpolateProvider) {
$interpolateProvider.startSymbol(&#39;((&#39;);
$interpolateProvider.endSymbol(&#39;))&#39;);
}])
;
})();
</code></pre>
<p>Ainsi vous aurez la possibilité de faire vos expressions angular dans
twig avec des double parenthèses. (Sans oublier de définir ng-app et
ng-controller dans votre template)</p>
<pre class="example"><code>(( monExpressionAngular ))
</code></pre>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

210
html-websites/cipherbliss_blog/2015/cipherbliss_blog_12_convertir-les-fichiers-de-config-de-symfony2-facilement/index.html Normal file
View File

@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 198</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-11-22 15:21:43&gt;</li>
<li>modifié: &lt;2015-11-22 15:22:15&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2
id="convertir-les-fichiers-de-config-de-symfony2-facilement-1">convertir
les fichiers de config de symfony2 facilement</h2>
<p>un site bien sympa nommé <a
href="https://converter.rosstuck.com/">_<u>Symfony2 Service Config
Converter</u></a>_ permet de convertir du code au format .yml en .php ,
en .ini, en .xml<br />
Rosstuck le donne aussi en bundle sur github afin de l'intégrer à vos
commandes perso symfony2.</p>
<p><a
href="https://github.com/rosstuck/TuckConverterBundle">https://github.com/rosstuck/TuckConverterBundle</a>
Essayez, c'est marvellous pour faire correspondre une config de tuto à
vos besoins!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

29
sources/cipherbliss_blog/lang_fr/converted/2024-11-03-création-d'un-blog-gemini.html → html-websites/cipherbliss_blog/2015/cipherbliss_blog_13_2-degrs-avant-la-fin-du-monde/index.html
View File

@ -1,4 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -168,7 +175,25 @@
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1> <h1 class="title">cipherbliss_blog</h1>
</header> </header>
<h1 id="création-dun-blog-gemini-1">Création d'un blog gemini</h1> <h1 id="article">Article</h1>
<p>[2024-11-03]</p> <ul>
<li>ID: 199</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-11-22 09:48:03&gt;</li>
<li>modifié: &lt;2015-11-22 09:48:35&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="degrés-avant-la-fin-du-monde">2 degrés avant la fin du
monde</h2>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body> </body>
</html> </html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

202
html-websites/cipherbliss_blog/2015/cipherbliss_blog_14_il-suffit/index.html Normal file
View File

@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 200</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-11-18 16:56:42&gt;</li>
<li>modifié: &lt;2015-11-18 16:57:13&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="il-suffit-1">il suffit</h2>
<p><img
src="https://tykayn.fr/wp-content/uploads/i/2015/11novembre/ilsufi.jpg" />
C'est le roi d'Hayroule qui le dit, il suffit! (pour les 99% de gens
normaux qui lisent ce blog, Kimsufi est une filiale d'OVH)</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

201
html-websites/cipherbliss_blog/2015/cipherbliss_blog_15_dveloppez-le-commerce-localhost/index.html Normal file
View File

@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 201</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-11-18 10:21:52&gt;</li>
<li>modifié: &lt;2015-11-18 10:22:23&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="développez-le-commerce-localhost">développez le commerce
localhost</h2>
<p><img
src="file:///public/i/2015/11novembre/.commerce_localhost_m.jpg" /></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

236
html-websites/cipherbliss_blog/2015/cipherbliss_blog_16_inspirer-les-femmes-prendre-les-postes-qui-faconnent-le-monde/index.html Normal file
View File

@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 202</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-11-16 11:38:34&gt;</li>
<li>modifié: &lt;2016-09-25 22:18:39&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2
id="inspirer-les-femmes-à-prendre-les-postes-qui-façonnent-le-monde">inspirer
les femmes à prendre les postes qui façonnent le monde</h2>
<p>Debbie Sterling, dans sa conférence TED souhaite expliquer au femmes
les enjeux dans les métiers de l'ingénierie et raconte pourquoi les
femmes sont encore bien trop mises à l'écart des corps de métier. Fermez
les yeux quelques secondes, et imaginez un ingénieur. à quoi ça
ressemble ? Vous n'étiez probablement pas en train de visualiser une
personne comme Debbie Sterling. Elle est une jeune entrepreneuse,
ingénieur, et fondatrice de GoldieBox, une compagnie de jouets pour
inspirer la génération prochaine de femmes ingénieurs. Elle a fait sa
grande quête au quotidien que de réduire l'écart des genres dans les
sciences, la technologie, l'ingénierie et les maths. là ou le commerce
traditionnel conserve une fracture nette entre les jouets pour garçons
et pour filles, Debbie propose une alternative pour développer la
curiosité des petites et des grandes femmes envers des occupations plus
variées que celles que l'on connaît. Les jouets de son entreprise
rencontrent un franc succès et de nombreuses petites filles ont
maintenant le choix de jouer à autre chose qu'à maternet un bébé en
plastique, se préparer à faire le ménage ou à la dinette. Très tôt on
décourage les femmes à s'approprier des postes aux enjeux les plus
cruciaux dans notre société, on nous ressasse sans cesse que résoudre
des problèmes est un truc de mec, et qu'il est normal que les femmes
soient mauvaises à des tâches rigoureuses, demandant de la logique. Rien
n'est plus faux, et se passer de la moitié de la population à de tels
postes n'améliore en rien le conditionnement d'infériorisation des
femmes. Cette prise de pouvoir il faut l'initier à travers l'éducation
et dire aux femmes qu'elles peuvent faire bien d'autres choses que des
tutos maquillage sur youtube, même si c'est très plaisant, bien sûr vous
avez le droit d'être la parfaite femme au foyer. Mais demandez vous si
ce n'est pas étouffant de se restreindre à être uniquement ce qu'on
attend de vous. <img
src="https://www.zdnet.fr/i/edit/ne/2012/03/Markess-Syntec-Numerique-ecarts-salaires-460.jpg" />
Girls who code, fait <a
href="https://witi.meetup.com/fr/cities/fr/paris/">des meetups en
france</a> et dans le monde dans le même but. Si vous shouaitez en
savoir plus sur les métiers de l'ingénierie de façon gratuite (avec
apéro et boustifaille offerte) c'est un bon endroit pour débuter. la
force soit avec vous!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

219
html-websites/cipherbliss_blog/2015/cipherbliss_blog_17_les-resources-du-blog-sur-github/index.html Normal file
View File

@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 203</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-11-11 12:31:41&gt;</li>
<li>modifié: &lt;2015-11-11 12:38:02&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="les-resources-du-blog-sur-github-1">les resources du blog sur
github</h2>
<p><img
src="https://photos4.meetupstatic.com/photos/event/5/d/7/a/highres_441323930.jpeg" /></p>
<p>en ce moment je prépare une petite série de billets sur la gestion de
projet. Je rassemble un bon paquet d'avis et de méthodes et je pourrai
commencer.</p>
<p>En attendant je viens de créer <a
href="https://github.com/tykayn/blog.artlemoine.com">un dépot github</a>
pour que vous puissiez trouver tous les bouts de codes réutilisables
facilement, vous pouvez les utiliser comme vous voulez et surtout les
améliorer ;)</p>
<p><a
href="https://github.com/tykayn/blog.artlemoine.com">https://github.com/tykayn/blog.artlemoine.com</a></p>
<p>n'hésitez pas à ouvrir des issues sur github ou à en discuter ici
dans les commentaires.</p>
<p>Oh d'ailleurs je serai au <a
href="https://www.meetup.com/fr/GitHub-and-the-Octocat-Super-Fans-France/events/225891212/">meetup
github de la société géniale</a> demain Jeudi 12 Novembre, passez donc
me faire un coucou.</p>
<p>mon github: <a
href="https://github.com/tykayn">https://github.com/tykayn</a></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

224
html-websites/cipherbliss_blog/2015/cipherbliss_blog_18_dbuter-sa-gestion-de-projet/index.html Normal file
View File

@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 204</li>
<li>guid:</li>
<li>status: draft</li>
<li>publié le: &lt;2015-11-08 15:22:27&gt;</li>
<li>modifié: &lt;2016-07-31 11:43:56&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="débuter-sa-gestion-de-projet-1">Débuter sa gestion de
projet</h2>
<h3 id="créez-un-mode-demploi-pour-les-nouvelles-recrues">Créez un mode
d'emploi pour les nouvelles recrues</h3>
<p>Répéter les instructions de mise en place à chaque nouvelle recrue
vous prendra un temps fou. Vous avez des accès, des outils pour
communiquer, rédiger des spécifications, partager des fichiers sur un
serveur, gérer du code sur un serveur commun, des gens à qui s'adresser
pour telle ou telle problématique, tout ceci pourrait être rassemblé
dans un document en ligne facile à modifier à partager avec vos
collaborateurs.</p>
<p>Framapad est une plateforme qui permet de modifier des documents
texte et multimédias en ligne à plusieurs si on le souhaite et est
parfait pour ce genre de choses. Inscrivez vous dessus, créez un
document et partagez le à vos collaborateurs. <a
href="https://framapad.org/">https://framapad.org/</a></p>
<p>Voici un plan de document que vous pouvez personnaliser à loisir
selon les spécificités de votre projet et de la taille de votre
équipe.</p>
<blockquote>
<p>Bienvenue dans l'équipe, voici tout ce dont vous aurez besoin pour
vous intégrer au projet.</p>
</blockquote>
<p>enjoyez! <em>Ce billet fait partie d'une série en plusieurs étapes
sur <a
href="https://cipherbliss.com/index.php?tag/gestion%20de%20projet">a
gestion de projet</a> IT.</em></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

225
html-websites/cipherbliss_blog/2015/cipherbliss_blog_20_dual-boot-windows-10-et-linux/index.html Normal file
View File

@ -0,0 +1,225 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 206</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-09-25 13:36:19&gt;</li>
<li>modifié: &lt;2015-11-08 14:39:52&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="dual-boot-windows-10-et-linux-1">dual boot windows 10 et
linux</h2>
<p><img
src="https://www.boosharticles.com/wp-content/uploads/2015/06/Windows-10-vs.-Ubuntu.jpg" /><a
href="https://www.tacomaworld.com/attachments/i-also-like-to-live-dangerously-jpg.760853/">https://www.tacomaworld.com/attachments/i-also-like-to-live-dangerously-jpg.760853/</a>
Quelle déconvenue après avoir installé ubuntu 14.04 sur mon nouveau
laptop (Acer v nitro) ayant windows 10 préinstallé, déjà, je n'ai pas
réussi a le faire à partir d'une clé live usb faite avec unetbootin,
quelle que soit la boot config dans le bios. Ensuite, impossible de voir
le menu grub. Windows démarre juste après le slpash screen d'Acer sans
proposer de choix ni montrer une seule seconde le menu grub. Pour
arriver a faire démarrer sur grub il fallait faire trois choses: 1/ dans
le bios. (touche f2 lors du démarrage) assurez vous que le boot est en
mode UEFI. désactiver le secure boot dans la partie sécurité. sauver et
redémarrer, 2/ dans windows 10 désactiver fast boot dans les options
d'alimentation &gt; (bouton pour autoriser les modifications) décocher
le "démarrage rapide", sauvegarder. (une nouveauté depuis windows 8 qui
devait faire une vraie différence quand on avait pas de SSD à l'époque)
3 / toujours dans windows, lancer la commande suivante dans une invite
de commande (lancée en tant qu'administrateur) afin que le boot prenne
en charge la config de grub.</p>
<p><code
class="verbatim">bcdedit /set {bootmgr} path \EFI\ubuntu\grubx64.efi</code></p>
<p>faites entrée, et ça devrait vous dire que ça a réussi. (astuce prise
de cet article <a
href="https://itsfoss.com/no-grub-windows-linux/"><span>https://itsfoss.com/no-grub-windows-</span>…</a>
)</p>
<p>redémarrez et priez pour voir le menu grub. et vouala!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

200
html-websites/cipherbliss_blog/2015/cipherbliss_blog_21_le-triangle-du-projet/index.html Normal file
View File

@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 207</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-09-09 15:00:13&gt;</li>
<li>modifié: &lt;2015-09-09 15:00:13&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="le-triangle-du-projet-1">le triangle du projet</h2>
<p><img
src="file:///public/i/2015/09septembre/.every_it_job_m.png" /></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

210
html-websites/cipherbliss_blog/2015/cipherbliss_blog_22_avoir-une-vie-prive/index.html Normal file
View File

@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 208</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-09-08 12:12:46&gt;</li>
<li>modifié: &lt;2015-09-08 12:16:07&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="avoir-une-vie-privée">avoir une vie privée</h2>
<p>une petite vidéo de <a href="https://www.laquadrature.net/fr/">la
quadrature du net</a>, expliquant en deux minutes pourquoi il est
essentiel d'avoir une vie privée, et qu'avoir des choses à cacher de
quelqu'un ce n'est pas suspect, c'est juste privé.</p>
<p>Pas convaincu? Alors donnez moi plein accès à vos comptes email, les
clés de chez vous et à vos comptes en banques. Vous ne voulez pas? c'est
pour votre bien, pour lutter contre le terrorisme, pour votre sécurité.
Ah, vous voyez, vous commencerez à douter. Profitez en, on risque de ne
plus y être autorisé sous peu.<br />
Ce n'est pas si ironique de poster cette vidéo sur youtube, un site qui
fait open bar de vos données à la NSA. c'est justement un bon endroit
pour se faire entendre.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

224
html-websites/cipherbliss_blog/2015/cipherbliss_blog_24_des-live-templates-pour-angular-dans-intellij/index.html Normal file
View File

@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 210</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-07-06 14:00:18&gt;</li>
<li>modifié: &lt;2015-07-06 14:03:42&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="des-live-templates-pour-angular-dans-intellij-1">des live
templates pour angular dans intelliJ</h2>
<p><img
src="https://www.ajmadison.com/ajmadison/images/large/UM-100F-MP-I.jpg" />
(ceci est un live template)<br />
j'utilise PHPstorm pour faire des projets avec du angular dedans (entre
autres), et pour gagner en performance et en confort, heureusement qu'il
y a les live templates.<br />
éditables dans les settings, ils permettent de créer des fichiers xml
dans le dossier de templates, ( dans le dossier:
<strong>~/.WebIde80/config/templates</strong> , avec un nom qui
ressemble à .WebIde80 selon la version de votre IDE)<br />
et de vous faire des raccourcis paramétrables.<br />
<br />
des projets sur github permettent de rajouter des suites de code
template pour vous faciliter la vie. aujourd'hui je vais vous vanter les
mérites d'un dépot fort sympa pour faire des tests jasmine et divers
trucs de routine dans angular: <a
href="https://github.com/angularjs-livetpls/angularjs-webstorm-livetpls">angularjs-webstorm-livetpls</a></p>
<p>clonez le dépot, copiez ses fichiers <strong>.xml</strong> dans votre
dossier de templates, redémarrez votre IDE, et hop, magie vous avez des
code templates trop bien. zieutez de quoi ils ont l'air dans les
settings, vous pourrez les renommer à votre convenance tant que deux
templates n'ont pas la même abbréviation. et si vous voulez en savoir
plus sur les live/code templates pour faire les vôtres, <a
href="https://www.jetbrains.com/phpstorm/help/creating-and-editing-live-templates.html">zieutez
la doc officielle</a>.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

235
html-websites/cipherbliss_blog/2015/cipherbliss_blog_25_le-bash-de-vos-rves/index.html Normal file
View File

@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 211</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-07-02 15:04:33&gt;</li>
<li>modifié: &lt;2015-11-08 15:13:04&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="le-bash-de-vos-rêves">le bash de vos rêves</h2>
<p>on peut personnaliser son bash ultrafacilement grâce a ce merveilleux
site, bashrcgenerator: <a
href="https://bashrcgenerator.com/">https://bashrcgenerator.com/</a></p>
<p>glissez déposez les éléments, cliquez sur un élément pour choisir sa
couleur, et hop vous avez le code a rajouter dans votre .bashrc pour
mettre de la couleur dans votre console.</p>
<p>Essayez donc de mettre cette commande d'export à la fin de votre
.bashrc, et de relancer bash.</p>
<p><code class="verbatim">$ nano ~/.bashrc</code> <code
class="verbatim"># titre du terminal personnalisé PROMPT_COMMAND</code>'echo
-ne "\033]0;${USER}@${HOSTNAME}: ${PWD}\007"' # prompt personnalisé
export PS1="<span class="math display">$$\033[38;5;214m$$</span><span
class="math display">$$$(tput sgr0)$$</span><span
class="math display">$$\033[38;5;15m$$</span> <span
class="math display">$$$(tput sgr0)$$</span><span
class="math display">$$\033[38;5;192m$$</span><span
class="math display">$$$(tput sgr0)$$</span><span
class="math display">$$\033[38;5;42m$$</span>@<span
class="math display">$$$(tput sgr0)$$</span><span
class="math display">$$\033[38;5;84m$$</span><span
class="math display">$$$(tput sgr0)$$</span><span
class="math display">$$\033[38;5;70m$$</span>:<span
class="math display">$$$(tput sgr0)$$</span><span
class="math display">$$\033[38;5;6m$$</span><span
class="math display">$$$(tput sgr0)$$</span><span
class="math display">$$\033[38;5;15m$$</span> <span
class="math display">$$$(tput sgr0)$$</span>"=</p>
<p>on enregistre avec ctrl +o, on sort avec ctrl + x. et hop!</p>
<p><code class="verbatim">$ bash</code></p>
<p>et vouala:</p>
<blockquote>
<p><span id="preview"></span>
02:23:52tykay@mycomputer:/usr/local/src</p>
</blockquote>
<p>Arpès, si vous êtes des fifous, vous pouvez aussi blinder votre
prompt en lui rajoutant des infos du dépôt git dans lequel vous vous
trouvez.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

232
html-websites/cipherbliss_blog/2015/cipherbliss_blog_27_des-tests-plus-rapides-avec-jasmine/index.html Normal file
View File

@ -0,0 +1,232 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 213</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-07-01 12:00:14&gt;</li>
<li>modifié: &lt;2015-07-03 08:31:00&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="des-tests-plus-rapides-avec-jasmine-1">des tests plus rapides
avec jasmine</h2>
<p><img src="https://ellem.ca/wp-content/uploads/2013/07/JASMINE.jpg" />
Jasmine, framework de test en javascipt dispose de quatre fonctions
intéressantes pour rendre l'exécution de vos nommmmmmbreux tests JS.
Parce que bien sûr, vous testez votre javascript, nesspa?</p>
<p>Bien, donc, on développe des blocs de test avec
<strong>describe()</strong> et <strong>it()</strong></p>
<p>vous pouvez demander à jasmine de ne pas exécuter de bloc en
utilisant xdescribe() et xit(). et vous pouvez lui demander de
n'exécuter que certains blocs et assertions avec
<strong>fdescribe()</strong> et <strong>fit()</strong></p>
<p>ce qui devrait faire tourner le tout plus vite, notamment si vous
avez dans les 500 assertions et que vous bossez seulement sur une
certaine partie.</p>
<p>une astuce pour ensuite ne pas faire de push avec ces blocs spéciaux,
c'est de se créer un hook sur git. parce que vous utilisez git, nesspa?
Bien, donc, avec un terminal ouvert dans votre projet, dans le dossier
.git.</p>
<pre class="example"><code>touch .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit
</code></pre>
<p>et mettez y de quoi vérifier que vous n'avez pas de fdescribe( , de
fit( dans vos fichiers de tests.</p>
<pre class="example"><code>#!/bin/sh
# A git pre-commit hook that verifies that the change does not introduce
# the use of a Jasmine exclusive test , which would
# prevent most other tests from being run without any clear indication thereof
FILES_PATTERN=&#39;\.(js|coffee)(\..+)?$&#39;
FORBIDDEN=&#39;fit(&#39;
git diff --cached --name-only | \
grep -E $FILES_PATTERN | \
GREP_COLOR=&#39;4;5;37;41&#39; xargs grep --color --with-filename -n $FORBIDDEN &amp;&amp; echo &#39;COMMIT REJECTED Found &quot;$FORBIDDEN&quot; references. Please remove them before commiting&#39; &amp;&amp; exit 1
</code></pre>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

209
html-websites/cipherbliss_blog/2015/cipherbliss_blog_28_paye-ton-arrondi-en-js/index.html Normal file
View File

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 214</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-06-30 15:18:30&gt;</li>
<li>modifié: &lt;2015-06-30 15:19:01&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="paye-ton-arrondi-en-js-1">paye ton arrondi en js</h2>
<p>F12. dans la console javascript écrivez:<br />
999999999999999<br />
faites entrée. la console vous répond:<br />
999999999999999<br />
<br />
mais écrivez un 9 de plus<br />
9999999999999999<br />
faites entrée. la console vous répond:<br />
10000000000000000<br />
<br />
narmol.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

210
html-websites/cipherbliss_blog/2015/cipherbliss_blog_29_installer-cozy-cloud-sur-son-serveur-ubuntu-14-04/index.html Normal file
View File

@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 215</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-06-26 21:05:50&gt;</li>
<li>modifié: &lt;2015-11-16 12:06:25&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="installer-cozy-cloud-sur-son-serveur-ubuntu-14.04">installer
cozy cloud sur son serveur ubuntu 14.04</h2>
<p>un cloud perso facile à étendre avec des plugins/modules en
javascript? C'est possible avec Cozy Cloud, découvert lors de l'ubuntu
party de paris (enfin, grâce au site qui diffuse les médias enregistrés,
plein de chouettes conférences)</p>
<p>voici la version rapide du script d'install à exécuter en tant que
root sur votre serveur ubuntu 14.04, en bash:</p>
<pre class="example"><code>apt-get install ca-certificates apt-transport-https
wget -O - https://ubuntu.cozycloud.cc/cozy.gpg.key 2&gt;/dev/null | apt-key add -
echo &#39;deb https://ubuntu.cozycloud.cc/debian trusty main&#39; \ &gt; /etc/apt/sources.list.d/cozy.list
apt-get update &amp;&amp; apt-get install couchdb cozy
</code></pre>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

320
html-websites/cipherbliss_blog/2015/cipherbliss_blog_32_gnrateur-angular-jeej/index.html Normal file
View File

@ -0,0 +1,320 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 218</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-05-14 19:53:27&gt;</li>
<li>modifié: &lt;2015-06-17 12:37:18&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="générateur-angular-jeej">générateur angular jeej</h2>
<p><img src="https://www.npmjs.com/static/images/npm-logo.svg" /> trop
biennn, j'ai profité de ce jour férié pour publier mon premier package
NPM, un générateur <a href="https://yeoman.io">yeoman</a> utilisant mes
outils favoris. Le tout avec du readme.md, des infos et <a
href="https://github.com/tykayn/generator-tk">un dépot sur
github</a> (génétareur-tk). <a
href="https://www.npmjs.com/package/generator-angular-jeej">https://www.npmjs.com/package/generator-angular-jeej</a>
Voilà ce que cela comprend:</p>
<blockquote>
<p>Gulp, Angular, coffeescript, jquery, bootstrap, font awesome,
commitement to open source. browser sync, karma, jasmine, jslint,
uglify, coverall and more.</p>
</blockquote>
<h1 id="section"><img
src="https://mgcrea.github.io/angular-7min/images/angularjs.png" /></h1>
<p><img
src="https://humancoders-formations.s3.amazonaws.com/uploads/course/logo/48/formation-coffeescript.png" />
<img
src="https://blog.xebia.fr/wp-content/uploads/2014/02/gulp-2x.png" /></p>
<h1 id="comment-utiliser-le-générateur-angular-jeej">comment utiliser le
générateur angular jeej</h1>
<p><img
src="https://blog.grayghostvisuals.com/xS6BUjV1g8vgRT/wp-content/uploads/2015/03/Yeoman.png" /></p>
<p>il vous faut avoir installé <strong>yeoman</strong> de chez NPM. dans
un terminal, exécutez cette commande:</p>
<div class="sourceCode" id="cb1" data-org-language="sh"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$ npm i -g yo</span></span></code></pre></div>
<p>pour lancer le générateur, placez vous dans le dossier où vous voulez
avoir votre webapp, et utilisez <strong>yo</strong>.</p>
<div class="sourceCode" id="cb2" data-org-language="sh"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$ yo angular-jeej</span></span></code></pre></div>
<p>Il vous sera demandé quelques infos a inclure dans votre webapp.</p>
<p>Chaque fois que vous modifierez un fichier source (dans le dossier
<em>src</em>), que ce soit un fichier .scss, .coffee, .js, ou html, ils
seront recompilés dans le dossier <em>dist</em>, et réinjectés dans le
navigateur grâce à browser sync.</p>
<div class="sourceCode" id="cb3" data-org-language="sh"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$ gulp</span></span></code></pre></div>
<p>après install, vous pouvez voir que tout a merveilleusement
fonctionné, lancez gulp. rendez vous sur <a
href="https://localhost:3000">https://localhost:3000</a> et voyez le
mirâaaaacle s'accomplir. dans votre console de commande vous pourrez
voir aussi que j'ai déjà mis en place quelques tests chargés de vérifier
qu'angular fonctionne bien avec le module et son controlleur
basiques.</p>
<p>notez que j'ai inclus des dépendances qui ne donnent encore aucune
action au niveau de gulp mais que je compte bien mettre en place, par
exemple coverall. Je n'ai pas encore clairement défini si je vire la
partie js dans le dossier src pour laisser la place aux fichiers coffee.
je vais sans doute proposer une option lors de l'exécution du
générateur. Enfin c'était un chouette défi!</p>
<p>Vous aussi pouvez <a href="https://yeoman.io/authoring/">créer votre
générateur yeoman perso</a>.</p>
<p>Pourquoi jeej comme nom de générateur? Parce que j'ai trop regardé de
youtube poop, et que mon générateur contient du SASS. Si ça ne vous dit
rien, considérez que vous avez un esprit sein dans un corset. Allez donc
le tester et n'hésitez pas à me donner des conseils sur comment
l'améliorer.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

271
html-websites/cipherbliss_blog/2015/cipherbliss_blog_33_whatis-love/index.html Normal file
View File

@ -0,0 +1,271 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 219</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-04-22 10:40:16&gt;</li>
<li>modifié: &lt;2015-04-22 11:24:28&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="whatis-love-1">whatis love</h2>
<p>Si dans un terminal unix vous écrivez whatis love, vous saurez ce
qu'est l'amour. </p>
<div class="sourceCode" id="cb1" data-org-language="sh"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="fu">whatis</span> love</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="ex">baby</span> don<span class="st">&#39;t hurt me, don&#39;</span>t hurt me, no more.</span></code></pre></div>
<p>Bizarrement, quand je rentre la commande dans un shell, j'ai comme
retour:</p>
<p>"love : rien d'adéquat"</p>
<p>Joyeux poissons d'avril.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

241
html-websites/cipherbliss_blog/2015/cipherbliss_blog_34_faites-bosser-internet-pour-vous-avec-if-this-then-that/index.html Normal file
View File

@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 220</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-04-21 09:27:07&gt;</li>
<li>modifié: &lt;2015-04-21 09:31:33&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2
id="faites-bosser-internet-pour-vous-avec-if-this-then-that-1">faites
bosser internet pour vous avec "if this then that"</h2>
<p><img
src="https://theinternetofallthings.com/wp-content/uploads/2014/10/everythnggraphics.jpg" />
<a href="https://ifttt.com/">if this then that</a>, abrégé IF, c'est un
service fort aimable qui vous propose des tas de recette pour relier
plusieurs canaux de service entre eux. Par example, vous voulez que
lorsqu'un de vos clients vous appelle, vous gardiez une trace dans votre
agenda de boulot de cet appel.<br />
Si vous voulez avoir un dossier en commun entre dropbox et google drive,
c'i possible.<br />
Si lorsque vous vous approchez de votre maison votre téléphone allume le
wifi et éteigne les données internet pour vous faire économiser du
forfait, c'i possible.<br />
Si vous voulez un arrière plan qui change tous les jours selon la méga
photo de la NASA, c'i possible.<br />
Ou bien, vous voulez que lorsque vous appellez le 112, un message soit
envoyé à votre femme, il y a une recette pour ça.<br />
Vous pouvez construire vos recettes comme ça.<br />
Ils ont aussi lancé un service nommé DO. comme le verbe faire, pas la
note de musique.<br />
cela vous permet d'avoir une recette qui s'active sur demande, lorsque
vous appuyez sur une icone dans votre mobile.<br />
<img
src="https://d2huu43w4jjmdn.cloudfront.net/feature_images/optomized/Do-for-Home-1024.png" />
Par example, "dire à ma femme que je viens de partir du boulot" , ou
bien "proposer à mes potes d'aller boire un coup" :D ou encore "ouvrir
ma porte de garage" si vous donnez dans la domotique. c'est
personnalisable à souhait comme les autres recettes<br />
Installez IFTTT sur votre téléphone, inscrivez vous sur le site, et
commencez à jouer avec les recettes.<br />
Pour mettre en place les recettes il faut activer les canaux
correspondants. Dropbox, gmail, github et bien d'autres sont des canaux
à activer en se loguant.<br />
<br />
"Oh noez, me dites vous, s'inscrire encore sur un service, mondieu mais
jamais je ne me souviendrai de mon mot de passe, ou alors je vais en
utiliser un seul pareil pour tous et si on le trouve je suis dans la
caguade." Ou sinon vous pouvez utiliser un gestionnaire de mots de passe
comme lastpass, ou 1password. vous ne passerez plus la moitié de votre
temps sur internet à rechercher quel était ce foutu mot de passe. Faites
travailler internet pour vous!</p>
<p><a href="https://ifttt.com/recipes">https://ifttt.com/recipes</a></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

218
html-websites/cipherbliss_blog/2015/cipherbliss_blog_37_calculez-votre-heure-de-rveil/index.html Normal file
View File

@ -0,0 +1,218 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 223</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-04-17 11:03:34&gt;</li>
<li>modifié: &lt;2015-04-17 11:15:09&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="calculez-votre-heure-de-réveil">calculez votre heure de
réveil</h2>
<p><img
src="https://www.pixenli.com/images/1338/1338511220095422700.jpg" /></p>
<p>Comme la plupart des êtres humains alignés sur les horloges du monde
absurde du travail, vous avez des difficultés à dormir assez longtemps
pour aussi profiter de vos moments en dehors du travail.<br />
<br />
Voici un site qui va sauver vos journées: <a
href="https://sleepyti.me/">sleepyti.me</a> vous donne un temps optimal
de sommeil en vous permettant de deviner à quelle heure vous devriez
vous coucher pour vous lever à l'heure voulue.<br />
Vous pouvez aussi chercher l'heure à laquelle vous lever en fonction de
l'heure à laquelle vous vous couchez.<br />
La plupart des humains mettent 14 minutes à s'endormir, (moi j'ai
l'impression que c'est bien plus, plutôt 40 minutes) et il semblerait
qu'une durée de sommeil optimale dure 5 à 6 cycles de sommeil de 90
minutes.<br />
Après ce nombre de périodes, Il faut idéalement se réveiller entre deux
cycles de sommeil pour se sentir frais et alerte.<br />
Bonne nuit :D</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

214
html-websites/cipherbliss_blog/2015/cipherbliss_blog_38_un-datepicker-dans-un-formulaire-symfony2/index.html Normal file
View File

@ -0,0 +1,214 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 224</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-04-07 14:24:22&gt;</li>
<li>modifié: &lt;2016-03-16 09:47:53&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="un-datepicker-dans-un-formulaire-symfony2-1">un datepicker dans
un formulaire symfony2</h2>
<p>de base les formulaires symfony fournissent des sélecteurs pour
choisir nos dates. pas besoin de jquery ou d'un bundle entier pour avoir
des datepicker en HTML5, il suffit de définir les options du champ de
formulaire avec un widget de single<sub>text</sub>, de mettre le format
de date en année-mois-jour, et de définir l'attribut type d'input à
"date".</p>
<p>= // ajouter un usage use Symfony; // déclaration de classe
FactureType pour l'exemple class FactureType extends AbstractType { //
dans le constructeur de form on ajoute notre champ <em>** * @param
FormBuilderInterface $builder * @param array $options *</em> public
function buildForm(FormBuilderInterface $builder, array $options) {
$builder // … dans le builder de votre formulaire
-&gt;add('paid<sub>date</sub>', DateType::class, ['widget' <code
class="verbatim">&gt; 'single_text', 'format' =&gt; 'yyyy-MM-dd', 'attr' =&gt; [ 'type' =&gt; 'datetime']])</code></p>
<p>enjoyez!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

217
html-websites/cipherbliss_blog/2015/cipherbliss_blog_39_les-dates-importantes-de-votre-vie/index.html Normal file
View File

@ -0,0 +1,217 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 225</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-03-30 08:04:05&gt;</li>
<li>modifié: &lt;2015-03-30 08:04:05&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="les-dates-importantes-de-votre-vie-1">les dates importantes de
votre vie</h2>
<p><img
src="https://www.regimenaturel.net/wp-content/uploads/2015/01/informations-sur-le-regime-alimentaire-des-dattes-et-du-lait1.jpg" />
vous imaginez que votre date de naissance est la seule que vous pourriez
retenir?<br />
Que nenni, l'expérience JS du jour vous permet d'estimer aussi la date
de votre mort selon les chiffres de l'insee, et d'autres choses
étonnantes.<br />
Saviez vous que vous avez gagné votre premier milliard de secondes en
seulement 11 jours?<br />
Votre millième semaine débutera avant ou après votre dix millième
jour?<br />
Quel était le jour de la semaine où vous êtes nés?<br />
<br />
Définissez votre date de naissance et soyez carrément émerveillé par ces
quelques dates de votre vie dont vous ne soupçonniez pas
l'existence!<br />
<a
href="https://artlemoine.com/dates-de-vie">https://artlemoine.com/dates-de-vie</a></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

212
html-websites/cipherbliss_blog/2015/cipherbliss_blog_40_les-24h-de-la-bd-et-autres-vnements-ont-leur-planning/index.html Normal file
View File

@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 226</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-03-30 07:51:27&gt;</li>
<li>modifié: &lt;2015-03-30 07:52:59&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="les-24h-de-la-bd-et-autres-évènements-ont-leur-planning">les 24h
de la BD et autres évènements ont leur planning</h2>
<p><img
src="https://www.lapin.org/public/vingt-quatre-heures/.logo-23h_m.jpg" />
l'expérience JS du jour c'est de donner la possibilité aux particpants
des 24hBD, des 23hBD, des 12hBD et de tous les plannings similaires de
mesurer le temps qu'il leur reste dans leurs projets. <a
href="https://artlemoine.com/24hbd">https://artlemoine.com/24hbd</a> il
suffit de donner le nombre de pages que vous avez fait dans l'encadré
vert (on peut changer avec les flèches du clavier) et le planning se met
à jour en vous précisant si vous êtes dans les temps ou si vous êtes en
retard. vous pouvez changer la date et l'heure de début, ou de fin de
l'épreuve. l'autre date se changera automatiquement en fonction de la
durée de l'épreuve spécifiée en jours et en heures entre deux.
Enjoyez!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

202
html-websites/cipherbliss_blog/2015/cipherbliss_blog_41_du-php-sexiste/index.html Normal file
View File

@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 227</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-03-30 07:47:30&gt;</li>
<li>modifié: &lt;2015-03-30 07:47:30&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="du-php-sexiste-1">du PHP sexiste</h2>
<p>à quoi ça peut bien ressembler du code sexiste? C'est possible, j'en
ai fait un tuto pour la journée des droits des femmes 2015. Allez voir
<a href="https://tykayn.fr/?post/2015/des-femmes-codeuses">par ici sur
le tykayn blog</a>.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

201
html-websites/cipherbliss_blog/2015/cipherbliss_blog_42_digital-learning-day-2015/index.html Normal file
View File

@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 228</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-03-16 09:24:50&gt;</li>
<li>modifié: &lt;2015-03-16 09:24:59&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="digital-learning-day-2015-1">digital learning day 2015</h2>
<p>Hey, après un Pi Day épique célébrons le digital learning day! <a
href="https://www.digitallearningday.org/">https://www.digitallearningday.org/</a>
allez zou, plus vite que ça, hop hop!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

220
html-websites/cipherbliss_blog/2015/cipherbliss_blog_43_paye-ton-explication/index.html Normal file
View File

@ -0,0 +1,220 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 229</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2015-03-04 15:02:12&gt;</li>
<li>modifié: &lt;2015-11-08 11:12:54&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="paye-ton-explication-1">paye ton explication</h2>
<p>ce qu'il y a de bien quand on veut expliquer des choses plus ou moins
complexes c'est qu'on peut toujours les comparer à une voiture, ou à une
femme si vous êtes aventureux. Quand on veut se payer un site web, on
trouve un développeur, et on lui demande combien ça coûte.</p>
<p>Eh bien comme une voiture, ou comme un appartement: ça dépend de
comment vous le voulez et de votre budget. Il ne suffit pas d'avoir un
beau costume et d'aller chez notre concessionnaire pour que celui ci
vous fasse essayer une voiture de luxe, il faut justifier d'un certain
apport financier et de votre assurance en cas d'accident.</p>
<p>Ce n'est pas la peine de faire perdre son temps à un concessionnaire
si vous voulez faire du lèche vitrine. Il est des choses qui coûtent de
l'argent, beaucoup d'argent. Et ce n'est pas toujours lié à leur
complexité. Vous pouvez trouver des voitures coûtant plus d'un million
d'euros, et leur seule compétence sera d'avoir un aspect esthétique qui
a coûté cher ainsi qu'un nombre incroyable de chevaux sous le capot,
elle sera cependant incapable de vous faire écouter de la radio, à moins
que vous ne payiez 10 000 € de plus. ça fait un peu cher l'auto radio
non?</p>
<p>Et bien c'est une question de priorités, c'est pourquoi il est
PRIMORDIAL de définir vos besoins et votre budget avant de pouvoir
entrer dans les détails de la création d'une charte graphique ou d'un
site web.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

266
html-websites/cipherbliss_blog/2016/cipherbliss_blog_10_gestion-de-projet/index.html Normal file
View File

@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li><p>ID: 196</p></li>
<li><p>guid:</p></li>
<li><p>status: publish</p></li>
<li><p>publié le: &lt;2016-01-02 11:07:25&gt;</p></li>
<li><p>modifié: &lt;2018-08-22 15:09:59&gt;</p></li>
<li><p>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></p>
<p><a href="id:53ffed85-03d0-4fb2-90b5-af2ffbcc3a0d">méthode
gtd</a></p></li>
</ul>
<h2 id="gestion-de-projet">Gestion de projet</h2>
<p>(image de chez <a href="https://www.hteumeuleu.fr/">Hteumeuleu</a>)
Vous avez sans doute réalisé quelques projets et réalisé la déconvenue
qu'entraîne une gestion de projet inexistante quand la bise fut venue.
Voici donc une série de posts sur mon expérience de la gestion de
projets web de plusieurs mois en petites équipes jusqu'a une quinzaine
de personnes, applicable également à d'autres domaines que le web comme
par example la publication de livres collectifs auto édités auquel j'ai
pu contribuer dans une équipe entre ving et trente contributeurs.</p>
<h2 dir="ltr" style="line-height: 1.38;"
id="causes-générales-de-retard-dans-un-projet">Causes générales de
retard dans un projet</h2>
<p>Un projet s'étire dans le temps bien souvent pour ces raisons:</p>
<ul>
<li>des réponses trop lentes entre les parties, client et autres équipes
sans cesse en congés.</li>
<li>des personnes incapables de se débrouiller seules un minimum.</li>
<li>deux personnes ont travaillé sur la même chose sans le savoir et se
marchent sur les pieds.</li>
<li>on ne sait pas à qui s'adresser ni ce dont nos collègues
s'occupent.</li>
<li>le présentéisme tuant la productivité et la motivation des troupes
en leur faisant croire que rester longtemps sur son lieu de travail (et
donc ne plus avoir de vie privée ou de sommeil) est une bonne
chose.</li>
<li>les membres n'ont pas les informations dont ils ont besoin pour
travailler.</li>
<li>rester avec des pratiques dépassées de plusieurs années.</li>
<li>empêcher les gens de travailler pour des raisons de politiques
d'entreprise.</li>
<li>n'avoir aucune formation aux outils utilisés, ou ne pas avoir
d'outils mis en place pour faire gagner du temps.</li>
<li>pas de tests automatisés. Vous n'avez donc aucune idée de ce que les
dernières modifications impactent dans le reste du code.</li>
<li>pas de retour utilisateur. Vous ne pouvez donc pas deviner que ce
que vous trouviez très joli est en fait un frein à l'utilisabilité de
votre site en plus d'énerver ses utilisateurs.</li>
<li>un réseau pourri qui vous empêche de transmettre de gros fichiers en
un clin d'oeil</li>
<li>du matériel trop vieux pour travailler sans attendre qu'il réagisse.
Si vous radinez sur le matériel, vous le paierez en rallongeant le temps
que prendra le projet, ce qui coûte en général bien plus cher.</li>
<li>pas de backups ni de gestion de version, au moindre disque dur qui
meurt vous perdez des semaines de travail.</li>
<li>des mises en production peu fréquentes.</li>
<li>des boites noires avec lequelles on doit interagir mais dont on a
aucun moyen de deviner le fonctionnement.</li>
<li>des priorités indéfinies ou incorrectes, un mauvais ordre des
tâches.</li>
<li>des tâches trop grosses ou trop vagues pour savoir par où commencer,
il faut les découper en des étapes bien plus petites.</li>
<li>n'avoir aucune vue d'ensemble de l'avancement du projet.</li>
<li>croire que tout est urgent, c'est manquer cruellement de
discernement.</li>
<li>la documentation laisse à désirer, le code n'est pas commenté.</li>
<li>on ne retrouve pas des infos que l'on cherche</li>
<li>des estimations à trop long terme, ne prévoyez que pour la semaine
en cours.</li>
<li>l'illusion que l'on peut tout prévoir et que tout se passera sans la
moindre difficulté ou changement de cap.</li>
<li>accepter toutes les modifications demandées par le client parce
qu'on ne veut pas dire non, et vouloir donc faire davantage de boulot
dans le même délai.</li>
</ul>
<p>Nous allons voir plus en détail comment résoudre ces problèmes
courants dans les posts suivants.</p>
<p>Et bonne nanée 2016!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

212
html-websites/cipherbliss_blog/2016/cipherbliss_blog_121_changer-lediteur-de-texte-associe-a-git/index.html Normal file
View File

@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 316</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-08-24 15:39:18&gt;</li>
<li>modifié: &lt;2016-08-24 15:39:18&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="changer-léditeur-de-texte-associé-à-git">changer l'éditeur de
texte associé à git</h2>
<p>J'utilise beaucoup Nano comme éditeur de texte en ligne de commande,
certains fous furieux utilisent Vi ou Vim, mais vous pouvez être encore
plus un hipster en utilisant carrément gedit sur votre bureau perso
lorsque vous voulez faire une bidouille de message de commit ou un
<em>git rebase interactif</em> sans vous embêter à retenir des
raccourcis chelous pour déplacer des lignes ou faire des
remplacements.</p>
<pre class="example"><code>git config --global core.editor gedit
</code></pre>
<p>notez aussi que gedit peut faire de la mise en couleur de code avec
plusieurs profils au choix (menu edition/préférence/couleurs) pour se
faire moins éblouir à la longue, ce qui peut aider quand on passe plein
de temps devant un écran.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

286
html-websites/cipherbliss_blog/2016/cipherbliss_blog_124_ne-vous-dites-pas-programmeur/index.html Normal file
View File

@ -0,0 +1,286 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 339</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-09-25 22:07:50&gt;</li>
<li>modifié: &lt;2018-07-25 12:52:19&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="ne-vous-dites-pas-programmeur-1">ne vous dites pas
programmeur</h2>
<p>  Dans son article <a
href="https://www.kalzumeus.com/2011/10/28/dont-call-yourself-a-programmer/">Don't
call yourself a programmer</a>, <a
href="https://www.kalzumeus.com/">Patrick McKenzie</a> donne des
conseils de gestion de carrière pour toute personne exerçant dans le
métier, en comparant les légendes scolaires et le marché de la vraie vie
de Auchan où parler d'argent est une phobie et savoir négocier fait
peur. Voici quelques sujets abordés: 90% des boulots de programmation
sont des programmes réservés à l'usage interne d'entreprises. Ils
consistent principalement à faire des CRUD plus ou moins ennuyeux. Ne
vous attendez donc pas à des challenges techniques à tout bout de champ.
Les ingénieurs sont embauchés pour apporter de la valeur à un business,
soit en lui faisant gagner de l'argent soit en lui permettant d'en
dépenser moins. pas pour programmer des trucs. Ne vous appelez pas un
programmeur. "programmeur" sonne comme "péon anonyme qui coûte cher pour
taper du biduule-chose dans un autre bidule-chose ". Vous n'êtes pas
défini par la stack logicielle que vous connaissez. Les personnes qui
ont besoin de vos services n'ont que faire du langage et des frameworks
que vous utilisez du moment que vous améliorez leur business. Vos
collègues et supérieurs ne seront habituellement pas des amis, et en
conséquence vous demanderont de faire des choses que jamais des amis ne
vous demanderaient. Vous surestimez radicalement le talent moyen dans la
compétition à cause des personnes qui vous entourent
professionnellement. "Voir une annonce, envoyer un CV, aller à un
entretien, recevoir une offre" est l'exception, pas la règle, pour
obtenir un emploi. Le réseau, ce n'est pas que pour les paquets TCP. Les
études supérieures ne sont pas représentatives du monde réel. (Comme
dirait Coluche "le commissaire de l'armée il me dit: on ne vous apprend
rien à l'école? j'y répond : ben non, mais si vous y aviez été vous le
sauriez) <img
src="https://www.cipherbliss.com/wp-content/uploads/2016/09/popopo_antoine_daniel_wtc.jpg" />
(PO PO POOOOOOO!!) Combien gagnent les ingénieurs? Mauvaise question. La
bonne question c'est "<em>pour quels genres d'offres est ce que les
ingénieurs travaillent-ils?</em>", car le salaire est un des nombreux
leviers que les gens peuvent utiliser pour vous motiver. La réponse à
cela, pas des plus utiles est, "les opportunités sont aux quatre coins
de la rue". Les personnes douées en négociation gagnent plus que celles
qui ne le sont pas. Patrick ajoute que si il était un complotiste
Marxiste, il dirait que c'est une construction sociale en faveur des
entreprises afin de toujours gagner plus sur le dos de leurs employés en
toute impunité. :D [caption id="" align="aligncenter" width="640"]<a
href="https://laughingsquid.com/marxist-utopia-a-t-shirt-design-uniting-yo-mamma-jokes-marxism/">[[<span>https://laughingsquid.com/wp-content/uploads/2013/05/shirtFrontBig.jpg</span></a>]]
un t-shirt de marx dessiné par Zach Weiner[/caption] Comment devenir
meilleur en négociation? (large sujet que Patrick développe dans
plusieurs autres posts) En lisant des manuels sur le sujet, en
améliorant ses compétences verbales, en écrivant, en croyant en ce que
l'on a à offrir, en étant curieux. C'est une compétence qui vaut jusqu'à
plusieurs (centaines de) milliers d'euros chaque année de toute votre
vie. Est ce que les startups sont géniales pour commencer votre carrière
juste après les études? non. il vaut mieux commencer par des grosses
entreprises qui vous permettront d'améliorer votre réseau sans faire
peser sur votre dos tout le poids de la structure statup qui a 80% de
chances de faire faillite dans les trois ans sans en avoir les
avantages. Les startups peuvent être géniales, mais clairement pas pour
commencer une carrière en sortant de l'école. <a
href="https://www.cipherbliss.com/wp-content/uploads/2016/09/office-monkey.jpg">[[<span>https://www.cipherbliss.com/wp-content/uploads/2016/09/office-monkey-1024x708.jpg</span></a>]]
Votre compétence professionnelle la plus importante est la
communication: Vous vous rappelez que <a
href="https://www.cipherbliss.com/inspirer-les-femmes-prendre-les-postes-qui-faconnent-le-monde/">les
ingénieur-e-s</a> ne sont pas embauchés pour créer des programmes mais
pour créer de la valeur dans un business? La qualité dominante qui vous
donne les boulots est votre habilité à donner aux gens la perception que
vous allez créer cette valeur. Ce qui n'est pas nécessairement
corollaire de votre habilité à créer de la valeur. Vous pouvez être un
dieu du programme super efficace, si vous ne savez bien vendre vos idées
personne ne voudra vous les acheter. (L'auteur déplore d'ailleurs que
les ingénieurs ont pour la plupart énormément de mal à tenir une simple
conversation entre collègues tant ils ont des difficultés orales
handicapantes. on tombe un peu dans un trope de mauvais film mettant en
scène des informaticiens clichés, mais c'est vrai que c'est peu fréquent
de croiser des gens très à l'aise en expression orale) On vous
appellera fréquemment pour faire le vendeur d'entreprise et d'autres
trucs que vous cherchiez précisément à ne pas faire en étant ingénieur.
La modestie n'est pas un trait de caractère permettant d'améliorer votre
carrière. Si vous avez contribué à quelque chose de bien pour votre
carrière, ne vous en cachez pas, et ne réduisez pas l'importance de
votre rôle. Toutes les décisions de business sont faites au final par un
ou une poignée d'organismes multi-cellulaires proches du chimpanzés, par
par des règles ou des algorithmes. (à une vache près, il suffit de voir
combien pèsent les algos de google dans le monde. ce que veut dire notre
ami c'est que les décisions sont toujours politiques, mêmes quand elles
n'en ont pas l'air ou qu'on vous dit que ça n'a rien de politique) Au
bout du compte, la joie que vous ressentez dans votre vie n'est pas
dominée par votre carrière. S'épanouir dans son boulot est important,
mais par pitié ayez une vie en dehors de votre travail sans attendre que
ça tombe du ciel. <img
src="https://www.theloop.ca/wp-content/uploads/2015/06/Shia-LaBeouf-really-wants-you-to-justdoit.jpg" /></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

397
html-websites/cipherbliss_blog/2016/cipherbliss_blog_127_faire-ses-factures-avec-libreoffice-ou-google-sheet/index.html Normal file
View File

@ -0,0 +1,397 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 365</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-12-26 17:42:42&gt;</li>
<li>modifié: &lt;2016-12-27 14:02:20&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="faire-ses-factures-avec-libreoffice-ou-google-sheet-1">faire ses
factures avec libreOffice ou google sheet</h2>
<p><a
href="https://www.libreoffice.org/download/libreoffice-fresh/"><strong>Libre
office</strong></a> est la suite bureautique gratuite fournie de base
sur ubuntu et disponible pour toutes les plateformes. Si comme moi vous
avez longtemps galéré a trouver le logiciel ultime pour faire des
factures un tant soit peu sérieuses, sachez qu'il est tout a fait
valable d'utiliser un simple tableur capable d'exporter en pdf ses
fichiers. Faire des factures constitue des calculs simples mais relou à
reporter dans un fichier. Pour une AE ça va, mais quand vous changez de
structure pour une SARL ou une EIRL, ou une EI, ou une SAS, ou JEEJ,
vous aurez sans doute a faire de savants calculs de TVA. D'aucuns vous
diraient d'investir dans des service de comptabilité en ligne, mais vous
pouvez faire déjà énormément de choses avec un seul fichier de calcul.
Faire ses feuilles de calcul n'exclue pas de faire appel à un pro de la
comptabilité, c'est d'ailleurs ce que je fais régulièrement et c'est
ultra conseillé dès qu'on a une structure qui sort de l'auto entreprise.
Si vous êtes en AE, ça pourrait aussi vous servir. Dans tous les cas
commencez à trier vos paperasses administratives minutieusement sur
votre ordi, et faites vraiment des backups. Ce que j'ai donc fait c'est
un fichier de calcul sur <a
href="https://www.google.com/sheets/about/"><strong>google
sheets</strong></a> afin de pouvoir le modifier de plusieurs gens à la
fois, mais surtout de plusieurs endroits différents avec de merveilleux
graphiques et l'exporter en format ouvert .odt , lisible par libre
office par exemple. Ce fichier contient plusieurs feuilles dont chacune
a un seul but:</p>
<ul>
<li>statistifier mes dépenses perso et pro sur le long terme (en
utilisant les cellules des autres feuilles du classeur)</li>
<li>compter mes kilomètres parcourus au nom de mon activité</li>
<li>compter mes déjeuners</li>
<li>compter mes factures</li>
<li>mes paiements trimestriels à l'URSSAF</li>
<li>mes achats au nom de l'entreprise</li>
<li>prévoir la disponibilité de ma trésorerie sur le long terme en
majorant mes dépenses moyennes</li>
<li>exporter une facture en pdf.</li>
</ul>
<p>On va surtout s'intéresser aujourd'hui au contenu de la feuille
permettant de remplir les infos pour faire les factures et les envoyer à
votre client avant la fin du mois. les lignes se présentent ainsi:</p>
<table>
<tbody>
<tr class="odd">
<td>objet</td>
<td>N° client dans l'année</td>
<td>majuscule de clients</td>
<td>commentaire</td>
<td>tarif jour HT</td>
<td>tarif jour TTC</td>
<td>jours facturés</td>
<td>congés</td>
<td>jours ouvrés</td>
<td>date start</td>
<td>date end</td>
<td>ce mois</td>
<td>à venir</td>
<td>HT</td>
<td>TVA</td>
<td>TTC</td>
<td>prévu</td>
<td>fait</td>
<td>reçu</td>
<td>retard</td>
<td>val charges</td>
<td>facture envoyée le</td>
<td>délai jours</td>
<td>attendu</td>
<td>reçu</td>
<td>diff date</td>
<td>mois</td>
<td>trimestre</td>
<td>n° facture</td>
<td>moyen</td>
</tr>
</tbody>
</table>
<p>Dans cette première feuille, une ligne correspond à une facture.
Petite subtilité chez google drive, les dates ne sont pas écrites de
façon classique (croissante) jour/mois/année , mais de façon bourrée
dégueulasse signée Murica mois/jour/année. Quelques fonctions vachement
bien (/à chaque fois je vous donne la version google sheet, puis la
version libre office en français si c'est différent, qui traduit aussi
ses fonctions et a quelques différences de notation, notamment des
virgules qui deviennent des points virgules, et des noms de fonctions
découpées par des points/): <strong>Avoir le nombre de jours
ouvrés</strong> entre deux choix dans la date:</p>
<blockquote>
<p>=NETWORKDAYS( date<sub>début</sub>, date<sub>fin</sub> )
=NB.JOURS.OUVRES( date<sub>début</sub> ; date<sub>fin</sub>)</p>
</blockquote>
<p><strong>Utiliser SI, pour ne pas avoir des cases provoquant des
erreurs.</strong> par exemple si on a des jours ouvrés à facturer,
calculer le tarif hors taxes, sinon afficher du vide.</p>
<blockquote>
<p>=IF( nombre<sub>dejoursouvrés</sub> ,
nombre<sub>dejoursouvrés</sub>*tarif<sub>jourhorstaxes</sub> , "")</p>
<p>=SI( nombre<sub>dejoursouvrés</sub> ,
nombre<sub>dejoursouvrés</sub>*tarif<sub>jourhorstaxes</sub> , "")</p>
</blockquote>
<p><strong>Calculer la date prévue d'arrivée du paiement</strong> est
plus facile que ce qu'on pourrait croire. Enfin, une fois le calcul fait
il reste a bien formater le résultat sous forme de date.</p>
<blockquote>
<p>=date<sub>envoi</sub>+délai<sub>paiementenjours</sub></p>
</blockquote>
<p>N'oubliez pas qu'un délai de paiement est toujours un truc
négociable, qu'il est en moyenne de 30 jours continus (c'est pas pareil
que des jours ouvrés) après l'envoi de votre facture à la fin du mois
ouvré. Mais il peut aussi plus étendu jusqu'à 60 jours, ou être bien
plus rapide: "à date", voire être réglé en partie ou en totalité (plus
rare) en avance. Il arrive par exemple que je demande 30% d'avance pour
des missions très courtes. <strong>Ajouter 20% au tarif hors
taxes</strong> (ma TVA reste a 20% car je fais de la prestation de
service, et non de la vente de marchandises)</p>
<blockquote>
<p>=tarif<sub>ht</sub>+tarif<sub>ht</sub>*0.2</p>
</blockquote>
<p>Voilà, avec ça vous avez déjà tout ce qu'il vous faut pour faire des
lignes de facture. Plus complexe, on va <strong>trouver le trimestre
correspondant à la date de réception d'un paiement</strong> pour une
facture.</p>
<blockquote>
<p>=ROUNDUP( MONTH(date<sub>reception</sub>)/3,0 ) =ARRONDI.SUP(
MOIS(date<sub>reception</sub>)/3;0 )</p>
</blockquote>
<p>Avec ce trimestre on va ensuite pouvoir faire des sommes
conditionnelles des paiements reçus par trimestre avec la fonction
Somme.si.</p>
<p>=SUMIF( plage<sub>pourcritère</sub> ; critère ;
plage<sub>desommesicritèrevrai</sub> )</p>
<p>=SOMME.SI( plage<sub>pourcritère</sub> ; critère ;
plage<sub>desommesicritèrevrai</sub> )</p>
<p>Faites gaffe à ne pas utiliser la même colonne pour la date
d'estimation de la réception et la réception réelle. Vous pourrez ainsi
déduire les retards de paiement et savoir à qui vous devez mener la vie
dure facilement et faire valoir vos <a
href="https://www.service-public.fr/professionnels-entreprises/vosdroits/F23211">indemnités
de retard au tarif légal</a>. (Ne bossez jamais avec de mauvais payeurs.
Indiquez clairement la date d'exigibilité sur vos factures, car des
surplus pour cause de retard, l'URSSAF ne se gênera pas de vous en
donner) Pour mettre à jour le contenu de cette feuille j'ai utilisé
plusieurs fonctions qui font références a des concaténations de contenus
d'autres cellules afin de faire par exemple, une phrase rassemblant
"facture n°" et le n° de la ligne dont je souhaite exporter une
facture.</p>
<blockquote>
<p>si F1 est le numéro de facture contenant 1234 =CONCATENATE("Facture
n° ",F1) =CONCATENER("Facture n° ";F1) cela vaut facture n° 1234</p>
</blockquote>
<p>Mettons que la ligne de ma facture à faire pour ce mois ci soit la
42e sur ma feuille nommée compta. Je dois donc placer dans ma facture
une référence vers le tarif TTC total de la ligne 42, qui se trouve donc
dans la cellule T42. Mais comme je suis dans une autre feuille il faut
dire aussi dans quelle feuille prendre notre numéro de cellule.</p>
<blockquote>
<p>="compta!T42" ="compta.T42"</p>
</blockquote>
<p>Mais je devrai aussi l'écrire pour les autres mentions obligatoires
d'une facture. la quantité de jours ouvrés, le tarif hors taxes, le
tarif ttc, la tva, le total hors taxe, la date du jour… =TODAY()
=AUJOURDHUI() Mais ce serait un peu trop fatiguant de modifier une
dizaine de références à chaque fois que je veux faire une facture. j'ai
donc utilisé la fonction INDIRECT() afin de variabiliser les références
dans ces formules dans ma facture. de cette façon je n'ai qu'une seule
cellule à mettre à jour pour changer toutes les références de ma
facture. Pour cela je me fais une cellule remplie de la ligne de la
facture que je veux réaliser, je prends une case, L1, et je mets
dedans</p>
<ol>
<li>Ensuite, avec indirect() je vais pouvoir utiliser le résultat
de</li>
</ol>
<p>cette cellule pour fabriquer une formule. Je n'aurai plus qu'a réunir
<em>compta!T</em> et <em>42</em> pour obtenir le résultat de
<em>compta!T42.</em></p>
<blockquote>
<p>=INDIRECT(CONCATENATE("compta!T", L1)) ce qui calculera:
="compta!T42"</p>
</blockquote>
<p>et si je change la case avec marqué 42 dedans en 43 pour voir la
facture suivante, ça calculera</p>
<blockquote>
<p>="compta!T43"</p>
</blockquote>
<p>nickel non? Vous pouvez aussi faire les choses encore plus proprement
en créant une feuille exprès pour ces calculs à placer dans la facture
pour ne pas encombrer la page de facture. Il ne reste plus qu'a faire
"fichier &gt; exporter en pdf" et choisir de limiter a la feuille
courante (celle de la facture) cacher le quadrillage dans les options
d'export, choisir l'orientation en portrait pour avoir votre facture
toute belle toute calculée les doigts dans le nez. Bon, il faudra sans
doute que vous joueiez sur les tailles des cellules afin de remplir une
feuille A4 pour que ça soit propre, mais à tâtons d'exportation vous y
arriverez en deux minutes maxi. Et si vous êtes un warrior des feuilles
de calcul vous pouvez auto remplir la ligne désignant la facture selon
la date courante en utilisant des comparaisons entre TODAY() et les
dates de début et de fin des jours ouvrés. Joyeux noël!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

223
html-websites/cipherbliss_blog/2016/cipherbliss_blog_1_la-galaxie-des-fanzines/index.html Normal file
View File

@ -0,0 +1,223 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 187</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-07-26 20:48:35&gt;</li>
<li>modifié: &lt;2016-08-19 10:53:01&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="la-galaxie-des-fanzines-1">la galaxie des fanzines</h2>
<p><a
href="https://tykayn.fr/wp-content/uploads/i/2016/fanzines_melu.png?1395265948918018947">[[<span>https://tykayn.fr/wp-content/uploads/i/2016/.fanzines_melu_m.png?652419532881844912</span></a>]]
Je me suis essayé à la visualisation de données avec Gephi, un logiciel
libre connu pour être le photoshop de la DataViz, tout en étant gratuit.
J'en ai profité d'avoir la main sur la base de données de fanzines de <a
href="www.meluzine.org">file:www.meluzine.org</a> pour proposer des
exportations en csv, un format de feuille de calcul ouverte (lisible
avec Libre Office par exemple). Après avoir suivi le rapide tour
d'horizon de la doc officielle, j'ai rajouté une colonne Souce, et une
colonne Target à l'export de la page de fanzines pour faire des liens
entre les noms des associations et les titres des fanzines. Quelques
ajustements de couleur par propriété sur les liens, la taille des labels
correspond aux séries de fanzines ayant plein de titres en commun avec
les autres (donc en tête de file des titres de numéros de fanzines, le
nom "1", puis le nom "2", puis "3", etc…) Les liens entre les noeuds en
vert représentent les fanzines toujours disponible, et en rouge ceux qui
sont épuisés. Les tas de liens forment des petites galaxies rapprochées
par des choses communes entre les fanzines, telles que leur prix et leur
nombre de pages, non affichés pour ne pas alourdir la visualisation.
Cette infographie montre qu'il y a une bonne partie de rouge, surtout
sur les séries extérieures. Ce qu'on ne voit pas ici c'est que moins
d'un pour cent des fanzines enregistrés sont sortis cette année. Et 9%
sont sortis en 1991, première année de production du site. Donc, si vous
êtes un fanzineux, inscrivez vos productions en créant un compte sur <a
href="www.meluzine.org">file:www.meluzine.org</a> :) Enjoy!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

252
html-websites/cipherbliss_blog/2016/cipherbliss_blog_2_ubuntu-party-15-10/index.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 188</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-07-26 09:26:48&gt;</li>
<li>modifié: &lt;2016-09-06 21:52:35&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="ubuntu-party-15.10">ubuntu party 15.10</h2>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2016/07/DSC09195-1024x768.jpg" />Y'a
pas longtemps j'ai découvert les Ubuntu Party de Paris. C'est super
sympa et convivial. J'étais étonné de voir que les install party
pouvaient ameuter autant de gens, et surtout, pas seulement des mecs
barbus. Justement y'a une grande diversité d'interessés par la culture
du libre et ubuntu. La communauté est inclusive et c'est super cool!
<img
src="https://www.cipherbliss.com/wp-content/uploads/2016/07/notion_geek-1024x554.jpg" />
J'ai bien aimé la conférence d'Androsème sur le sacré et le profane.
Elle y réfléchit à la notion de geek, on y voit comment ce concept est
exclusif des profanes, et ce qui se passe lorsque le profane essaie de
toucher au sacré. On y voit aussi comment le harcèlement en ligne est
rendu possible via facebook et autres choses, mais que ça ne tient pas
spécifiquement aux outils en ligne et qu'on retrouve ces comportements
d'exclusion hors ligne. <a
href="https://twitter.com/androseme">https://twitter.com/androseme</a>
<img
src="https://www.cipherbliss.com/wp-content/uploads/2016/07/harcelement_sacre_profane-1024x554.jpg" />
La conférence interactive sur le projet Do Not Track d'Arte était super
bien pour expliquer les enjeux de l'espionnage de masse légalisé, on y a
vu qu'avoir des choses à cacher est parfaitement naturel et n'est pas
réservé aux gens louches. Le suivi de toutes vos données vaut de l'or,
vous devez vous protéger vous même ainsi que les personnes avec qui vous
communiquez. Surtout que dans ces histoires de suivi vous n'avez pas
autorité pour savoir ce qui est retenu contre vous, qui détient ces
informations, pour combien de temps, ce qui en sera fait, et à fortiori
dans les mains de qui elles tomberont par inadvertance. vous ne
manquerez pas d'en entendre parler dans les mois qui suivent. <a
href="https://donottrack-doc.com/fr/">https://donottrack-doc.com/fr/</a>
<img
src="https://www.cipherbliss.com/wp-content/uploads/2016/07/internet_des_objets-1024x565.jpg" />
Il y a eu aussi une conférence sur Mycroft, un projet ouvert
d'intelligence artificielle ayant pour but d'être installée dans des
objets. un projet qui a l'air vachement chouette, et compatible Arduino
entre autre. de quoi fabriquer mille bidules utiles ou simplement pour
le plaisir d'apprendre comment fonctionnent les choses. <a
href="https://github.com/MycroftAI/mycroft-core"><span>https://github.com/MycroftAI/mycrof</span>…</a><a
href="https://github.com/MycroftAI/mycroft-core">[[<span>https://www.cipherbliss.com/wp-content/uploads/2016/07/internet_objets_mycroft-1024x565.jpg</span></a>]]
Donc wouala, ubuntu party ce sont des évènements à la cité des sciences
de paris qui se produisent deux fois par an, pour chaque sortie de
version d'ubuntu. en Octobre et en Avril. Vous pouvez y venir avec vos
parents et leur faire essayer le système dans sa version la plus
récente. N'oubliez pas de faire une sauvegarde de vos fichiers sur un
disque externe avant, par précaution ;) Perso, ubuntu 15.10 installé sur
mon vieux EeePC 1005HA a permis de lui redonner une certaine jeunesse,
nickel pour faire du développement arduino sans se trimballer un gros
ordi. Et surtout, il a une autonomie incroyable pour un ordi de 2009, on
peut bien le laisser allumé 6 heures et bidouiller dessus sans avoir à
le brancher. suivez la communauté ubuntu-fr sur twouiteur :3 <a
href="https://twitter.com/ubuntuparty">https://twitter.com/ubuntuparty</a>
Retrouvez les vidéos des conférences ubuntu party sur le site officiel
:) <a
href="https://media.ubuntu-paris.org/">https://media.ubuntu-paris.org/</a></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

217
html-websites/cipherbliss_blog/2016/cipherbliss_blog_3_exporter-une-visualisation-de-son-schma-sql/index.html Normal file
View File

@ -0,0 +1,217 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 189</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-07-26 08:47:00&gt;</li>
<li>modifié: &lt;2016-08-24 14:23:30&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="exporter-une-visualisation-de-son-schéma-sql">exporter une
visualisation de son schéma SQL</h2>
<p><a
href="https://nsaunders.files.wordpress.com/2009/01/bio.png?w=300&amp;h=129">https://nsaunders.files.wordpress.com/2009/01/bio.png?w=300&amp;h=129</a>
Vous voulez visualiser les relations entre vos tables SQL assez
facilement? vous pouvez le faire avec phpmyadmin, ou en ligne de
commande avec un dump de votre base (en exportant seulement le schéma,
sans données)</p>
<pre class="example"><code>#! /bin/bash DBNAME = $1; FILENAME = $2; mysqldump $DBNAME $(mysql -D DBNAME -Bse &quot;show tables like &#39;wp_%&#39;&quot;) &gt; FILENAME.sql
</code></pre>
<p>Vous pouvez utiliser SQLfairy sur votre dump de base pour en sortir
un png.</p>
<pre class="example"><code>sudo apt-get install sqlfairy
</code></pre>
<p> </p>
<pre class="example"><code>sqlt-graph -f MySQL -o mydatabase.png -t png FILENAME.sql
</code></pre>
<p>astuce trouvée sur <a
href="https://nsaunders.wordpress.com/2009/01/11/easy-visualisation-of-database-schemas-using-sqlfairy">ce
post de nsaunders</a></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

30
sources/cipherbliss_blog/lang_fr/converted/20241108151758-ça-déménage.html → html-websites/cipherbliss_blog/2016/cipherbliss_blog_4_le-dysoon-de-djo/index.html
View File

@ -1,4 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -168,8 +175,25 @@
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1> <h1 class="title">cipherbliss_blog</h1>
</header> </header>
<h1 id="ça-déménage-1">Ça déménage</h1> <h1 id="article">Article</h1>
<p>Oui ce blog fait bouger les lignes avec son générateur statique fait <ul>
maison. La peinture est fraîche.</p> <li>ID: 190</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-07-26 08:27:22&gt;</li>
<li>modifié: &lt;2016-07-26 08:32:32&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="le-dysoon-de-djo-1">le dysoon de djo</h2>
<p>Quel déconneur ce Djo :D</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body> </body>
</html> </html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

287
html-websites/cipherbliss_blog/2016/cipherbliss_blog_5_conversion-de-pdf-en-image-et-ocr/index.html Normal file
View File

@ -0,0 +1,287 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 191</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-05-11 19:25:05&gt;</li>
<li>modifié: &lt;2020-08-03 11:55:32&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="conversion-de-pdf-en-image-et-ocr-1">Conversion de pdf en image
et OCR</h2>
<p><img
src="https://www.clubdesmonstres.com/best/img/disc_world9jpg.jpg" /> <a
href="https://imagemagick.org">ImageMagick</a> permet de convertir des
tas de fichiers en des tas d'autres. Il est fourni de base dans pas mal
de <a
href="https://fr.wikipedia.org/wiki/Distribution_Linux">distributions
linux</a>. convertir un pdf en un jpg par page de 300dpi c'est aussi
simple que lancer cette commande: (dans un terminal, dans le dossier de
votre fichier pdf, par exemple, mon dossier de Téléchargements)</p>
<pre class="example"><code>convert -density 300 -quality 100 monFichierPDF.pdf mesFichiersJpg.jpg
</code></pre>
<p>Et boum! aussitôt plopent dans le même dossier des jpg mesFichiersJpg
(1).jpg pour chaque page. Trop magique. L'option <strong>-density
300</strong> donne une résolution de 300dpi. L'option <strong>-quality
100</strong> compresse la sortie au meilleur de sa qualité. Il faut
nommer le fichier d'entrée et celui de sortie, j'aurai pu marquer
mesFichiersJpg.png ça aurait fait des vrais png, mais ça supporte aussi
des tas d'autres formats.</p>
<h2 id="option-de-sécurité-dimagemagick">Option de sécurité
d'ImageMagick</h2>
<p>Il est possible que vous ayez une version d'ImageMagick avec des
restrictions de conversion qui ont été mises en place pour des raisons
de sécurité à une époque où GhostScript avait un problème, corrigé
depuis. Si la commande convert ne veut pas convertir votre pdf, regardez
dans la config du fichier de police: <code
class="verbatim">sudo editor /etc/ImageMagick-7/policy.xml</code> (le
dossier peut se nommer ImageMagick-6 ou autre selon votre version), et
changez la ligne concernant les pdf:</p>
<pre class="example"><code>&lt;policy domain=&quot;coder&quot; rights=&quot;none&quot; pattern=&quot;PDF&quot; /&gt;
</code></pre>
<p>En ceci:</p>
<pre class="example"><code>&lt;policy domain=&quot;coder&quot; rights=&quot;read | write&quot; pattern=&quot;PDF&quot; /&gt;
</code></pre>
<p>Relancez votre terminal et ça devrait bien vouloir convertir votre
pdf en jpg.</p>
<h2 id="une-commande-en-alias-de-bash">Une commande en alias de
bash</h2>
<p>Vous pouvez vous en faire un alias dans votre fichier
<em>~</em>.bash<sub>aliases</sub>/</p>
<pre class="example"><code>alias pdf2jpg=&#39;convert -density 300 -trim -quality 100&#39;
</code></pre>
<p>Ainsi vous pourrez lancer:</p>
<pre class="example"><code>pdf2jpg machin.pdf machin.jpg
</code></pre>
<p>Et paf, ça fait des images de jolie qualité pour chaque page.</p>
<h2 id="le-cube-qui-sait-lire">Le cube qui sait lire</h2>
<p>Et donc voilà, il arrive aussi qu'on vous file un pdf contenant un
contrat ou un texte (avec ou sans images) qui serait bien plus efficace
en format texte pour y faire des recherches par exemple. vous avez bien
entendu autre chose à faire de votre vie que de recopier tout le texte.
aint nobody got time for that. <img
src="https://static.skynetblogs.be/media/80918/4017077379.jpg" /></p>
<pre class="example"><code>Il convient donc d&#39;utiliser un soft qui sait faire de l&#39;Optical Character Recognition, de la reconnaissance de caractères optiques.
</code></pre>
<p><img
src="https://pbs.twimg.com/profile_images/3311637316/fa2e60c43dea540aa029bd9f9596d674_400x400.png" />
Le Tesseract, ce n'est pas un cube produisant une énergie infinie au
pays d'Iron Man, c'est un soft capable de lire des caractères dans une
image et de pondre un texte en conséquence. Bien sûr il faut relire le
texte ensuite pour corriger quelques typos, mais il fait déjà un boulot
impressionnant. installez le avec son extension pour le français avec
apt-get:</p>
<pre class="example"><code>sudo apt-get install tesseract-ocr tesseract-ocr-fra
</code></pre>
<p>Une fois que c'est fait revenons à nos animaux laineux. Vous avez
donc plein de fichiers jpg dans un dossier. Dans un terminal, mettez
vous dans le dossier en question. Nous allons donc faire une boucle sur
tous les fichiers du dossier courant se terminant par jpg, les lire et
en ressortir dans un fichier page<sub>truc</sub>.txt pour chaque
image.</p>
<pre class="example"><code>a=0
for i in $(ls -v *.jpg); do
echo &quot;$i page_${a}.txt&quot;
# on affiche ce qu&#39;on fait
tesseract $i page_${a}.txt
let a=a+1
done
</code></pre>
<p>l'option -l fra sert à dire qu'on traite un texte en français et
maintenant on concatène les sorties de chaque image en un seul
fichier</p>
<pre class="example"><code>cat page_* &gt; all_pages.txt
</code></pre>
<p>Et vous pourrez maintenant avoir un texte sur lequel vous pouvez
faire une recherche intégrale avec votre éditeur de texte préféré, à la
recherche de l'arnaque contractuelle qui va bien. Astuce de l'OCR
trouvée sur <a href="https://doc.ubuntu-fr.org/tesseract-ocr">la doc
ubuntu</a> Enjoy!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

217
html-websites/cipherbliss_blog/2016/cipherbliss_blog_6_retour-d-exprience/index.html Normal file
View File

@ -0,0 +1,217 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 192</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-05-10 14:56:57&gt;</li>
<li>modifié: &lt;2016-06-06 13:02:32&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="retour-dexpérience">Retour d'expérience</h2>
<p>Apprendre de son expérience est une capacité trop souvent laissée de
côté. avez vous déjà essayé d'identifier les éléments qui vous ont fait
perdre du temps dans vos anciens projets? Laissez de côté vos différents
entre collègues (si vous en avez, comme dans la plupart des boites), et
prenez le temps de leur demander ce qui les empêche de travailler,
quelles sont leur principales difficultés dernièrement, et comment les
résoudre selon leur avis. En tant que membre de l'équipe, lorsque vous
résolvez un souci après bien des recherches pour vous rendre compte que
c'était un truc tout simple, notez le dans un carnet. Vous verrez ainsi
quels sont les choses qui vous font perdre du temps et que ce sont
souvent les mêmes qui reviennent. Durant les démonstrations
d'avancement, il est bon de faire un tour de table de retour
d'expérience en évoquant des points positifs et des axes
d'améliorations. Notez cependant qu'en groupe on ose moins dénoncer
certaines choses ou désigner des fautifs. C'est pourquoi il est
nécessaire de se renseigner entre quatre zyeux auprès des autres gens.
Le but de la manoeuvre n'est pas le lynchage collectif, il convient donc
de rester courtois dans ses remarques. Vous serez surpris de voir comme
l'esprit d'équipe peut être amélioré juste de cette façon.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

391
html-websites/cipherbliss_blog/2016/cipherbliss_blog_7_le-petit-printf/index.html Normal file
View File

@ -0,0 +1,391 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 193</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2016-04-21 13:10:07&gt;</li>
<li>modifié: &lt;2016-05-12 14:30:14&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="le-petit-printf-1">Le petit Printf</h2>
<p>ont devenus un problème."<br />
Et tandis que l'homme se tenait là en silence (sur son nouveau bureau à
roulettes trop cool), le petit printf se dirigea hors de la salle.<br />
</p>
<h2 id="chapitre-8"><strong>Chapitre 8</strong></h2>
<p><img src="https://ferd.ca/static/img/printf/ops.png" /><br />
Dans le bureau d'à côté se trouvait un employé fatigué, avec des
dizaines de tasses à café vides, recroquevillée sur ton clavier, à taper
avec énervement.<br />
"Salut, dit le petit printf."<br />
La femme n'a pas arrêté ce qu'elle faisait. Elle a continué à taper
furieusement.<br />
"Bonjour?" demanda-t-il à nouveau.<br />
La femme s'arrêta d'un coup, pris un flacon d'un tiroir dans son bureau,
et a pris une gorgée.<br />
"J'ai un travail terrible, dit-elle. Je fais DevOps. ça avait bien
commencé, la plupart du temps je développais et puis parfois je
debuguais des choses, mais plus le temps passait, plus à a a empiré.
J'ai commencé à lutter contre les incendies dans notre pile, puis plus
d'incendies ont commencé à se produire. Je me suis débarrassé de la
plupart d'entre eux, tirant de petits miracles ici et là pour ensuite
respecter les délais de dev sur des choses que je devais aussi faire en
plus.<br />
-Et ont-ils embauché quelqu'un pour aider?<br />
-Non, c'est ça le truc. Les petits feux continuent de se produire ici et
là, et en raison du temps que je prends pour les combattre, je ne peux
pas être aussi prudente qu' avant avec le dev, donc je crée plus de feux
tout le temps. Maintenant, je lutte contre les incendies toute la
journée et toute la nuit et je déteste mon travail. -Pourquoi votre
employeur ne fait pas quelque chose?<br />
-Je suis douée à faire mon travail, et je suis parvenu à garder les
choses sous contrôle assez longtemps que tout le monde s'y soit habitué.
Lorsque vous prenez l'habitude de petits miracles, les gens sont
habitués. Ensuite, vous êtes coincé à faire des miracles tout le temps
ou ils vont penser que vous ne faites pas votre travail du tout.<br />
-Cela semble très triste<br />
-ça l'est; et parce que vous êtes la personne la plus familière avec ces
feux, vous obtenez seulement de travailler sur eux de plus en plus,
jusqu'à ce que votre employeur embauche quelqu'un d'autre pour couvrir
votre ancien emploi, celui que vous aimiez. Si vous vous souciez assez
dur sur votre travail pour être celui qui fait les choses que tout le
monde déteste, on vous remerciera en vous donnant de plus en plus de ce
travail qui ne vous plaît pas, jusqu'à ce que ce soit tout ce que vous
faites. Et puis il n'y a plus rien pour vous plaire dans votre
job.<br />
-Alors, vous êtes malchanceuse," dit le petit printf.<br />
Et son pager sonna encore.<br />
"Cette femme," dit le petit printf à lui-même, en continuant plus loin
son voyage, "cette femme serait méprisée par tous les autres: par
l'expert spécialisé, par le développeur de rockstar, par l'adoptant
premier. Néanmoins, elle est la seule d'entre eux tous à sembler utile.
Peut-être est parce qu'elle pense à autre chose qu'à elle-même.</p>
<h2 id="chapitre-9"><strong>Chapitre 9</strong></h2>
<p><img src="https://ferd.ca/static/img/printf/architect.png" /> A
l'angle du bâtiment, printf trouvé un grand bureau avec de grandes
fenêtres donnant une vue imprenable sur la région. Dedans, est assis un
vieux monsieur avec des rames de documentation sur son bureau.<br />
"Ah, voici un développeur!" s'écria l'homme, alors que printf se tenait
à la porte. "Entrez!" En regardant à travers les fenêtres, le petit
printf a remarqué qu'ils étaient pleins d'écriture. Avec l'aide d'un
stylo effaçable à sec, la vue sur le monde extérieur a été masqué par
des tonnes de cercles, des flèches, des cylindres, et les nuages. Alors
qu'il était curieux les nuages ​​de l'homme nécessaire tirées où les vrais
pouvaient être vus à l'extérieur, tout l'ensemble était plus
intrigant.<br />
"Qu'est-ce que c'est ?," demanda notre ami, en montrant les
fenêtres.<br />
"Oh ça? Ceci est notre système de production!" Dit l'homme, en pensant
non pas une seule fois que la question portait sur le monde extérieur.
"Je suis un architecte logiciel.<br />
-Qu'est-ce qu'un architecte logiciel?<br />
-La plupart du temps, il est quelqu'un qui sait comment structurer au
mieux et coordonne les composants d'un grand système pour que tout aille
bien ensemble. Il est quelqu'un qui doit connaître les bases de données,
des langages, des framewords, des éditeurs de code, des formats de
sérialisation, des protocoles et des concepts tels que l'encapsulation
et la séparation des préoccupations.<br />
-Très intéressant! dit le petit printf, voici quelqu'un qui peut
répondre à toutes mes questions! Il regarda les diagrammes
d'architecture. Votre système est très impressionnant. Est-il très
rapide à fonctionner?<br />
-Je ne pouvais pas vous dire, dit l'architecte. ça doit être le cas, je
pense. -Comment est le code alors, est-il bon?<br />
-Je ne pouvais pas vous dire<br />
-les utilisateurs sont-ils heureux?<br />
-Je ne pouvais pas vous dire non plus, je crains<br />
-Mais vous êtes un architecte logiciel!<br />
-Exactement! Mais je ne suis pas un développeur. Ce n'est pas
l'architecte qui va et écrit les modules et les classes, combine les
bibliothèques. L'architecte logiciel est beaucoup trop important pour
aller toucher au code. Mais il parle avec les programmeurs et les
développeurs, leur pose des questions, leur donne des conseils. Et si le
problème se trouve être assez intéressant, l'architecte prend en charge
la planification.<br />
-Et pourquoi ça?<br />
-Parce que nous sommes plus expérimentés. Nous en savons plus sur les
systèmes et ce qui fonctionne ou non. Les développeurs peuvent alors
être une extension de nos connaissances pour produire de grands
systèmes!<br />
-Mais comment savez-vous si les choses vont bien sans s'impliquer avec
le code?<br />
-Nous faisons confiance aux développeurs<br />
-Donc, vous leur faites confiance pour mettre en œuvre vos idées
correctement, mais pas assez pour venir avec leurs propres idées?"<br />
L'architecte logiciel était visiblement ébranlé par ce commentaire. "Je
suppose que je pourrais avoir été un peu déconnecté," il a finalement
admis. "Le problème est que, après un certain temps, vous êtes invité à
travailler avec des idées tellement vous ne disposez pas d'un bon moyen
de les faire tester ou vérifier…" Il baissa les yeux, pensif. "Parfois,
un architecte logiciel ne fait ni logiciel, ni architecture, on
dirait."<br />
Le petit printf a quitté la salle, ayant terminé de sa visite, il quitta
le bâtiment.<br />
</p>
<h2 id="chapitre-10"><strong>Chapitre 10</strong></h2>
<p><img src="https://ferd.ca/static/img/printf/charity.png" /></p>
<p>le petit printf, une fois à l'extérieur, a rencontré un homme
collectant de l'argent pour la charité.<br />
"Salut, dit l'homme. Que diriez vous d'aider quelqu'un
aujourd'hui?<br />
-ça m'aiderait sans doute à me faire sentir mieux, répondit printf. Je
suis allé dans ce bureau toute la journée, et maintenant je suis plus
confus que jamais.<br />
-Ah, je vois. Ces personnes sont tous les développeurs. Ils ne sont pas
vraiment utiles, n'est-ce pas? Ce qu'ils aiment à dire est qu'ils
changent le monde, et ils ont pas mal réussir à à le faire, en
fait.<br />
-Pourquoi est ce que je me sens si gêné, alors? questionna le petit
printf.<br />
-Eh bien, le meilleur qu'ils font est souvent d'aider à convertir les
emplois de certaines personnes dans des programmes, ou de rendre les
loisirs de tout le monde plus tranquilles.<br />
Le logiciel est en train de manger le monde et de lui faire changer de
visage, c'est certain… mais au fond, c'est le même vieux monde, avec un
visage mutilé. La raison pour laquelle on se sent gêné est que le
changement de cette façon ne veut pas dire les choses deviennent mieux.
Nous avons les mêmes défauts et les problèmes que nous avons toujours
eu, les mêmes trous à combler à l'intérieur.<br />
-Alors, comment puis-je me sentir mieux?" le petit printf était
visiblement anxieux.<br />
L'homme a pensé pendant un certain temps, et a offert printf à venir
l'aider à aider les autres, car c'était la façon que cet homme avait de
se sentir mieux. Au cours de l'après-midi, printf raconta à l'homme ses
problèmes et son aventure. Après un long silence, l'homme dit:<br />
"Les jeux que les gens jouent, les rôles et les réputations qu'ils
poursuivent et entretiennent, le plaisir éphémère qu'ils tirent de la
résolution de problèmes complexes, c'est amusant pendant un certain
temps. En fin de compte, si vous ne résolvez pas quelque chose de
valable, si vous oubliez les personnes impliquées, ça ne va jamais être
vraiment satisfaisant.<br />
Et cela peut être très bien, ou ça pourrait ne pas l'être, et vous
pouvez ou ne pouvez pas obtenir cela par ailleurs que sur votre lieu de
travail quand vous grandissez. Le travail peut être un travail; il peut
être pour l'argent, il peut être pour le plaisir. C'est bon. Tant que
vous parvenez à obtenir de l'accomplissement quelque part dans votre
vie. À la fin cependant, il est seulement quand vous résoudre les
problèmes avec un visage humain que vous pouvez vraiment sentir bien; Ce
qui est essentiel est invisible pour l'ordinateur.<br />
C' est le temps que vous avez passé sur votre système qui le rend si
important », l'homme a ajouté," et quand vous avez perdu de vue pourquoi
il était logique de passer du temps là-dessus, quand il est devenu un
jeu d'orgueil, alors il a causé plus de douleur que de
soulagement.<br />
Les développeurs ont souvent oublié cette vérité; Si vous perdez de vue
des choses, travailler sur votre système devient son propre problème, et
la solution la plus efficace est de se débarrasser du système, étant
donné qu'il est le problème."<br />
"C'est seulement quand vous résolvez les problèmes avec un visage humain
que vous pouvez sentir vraiment bien", répéta le petit printf à
lui-même, de sorte qu'il s'en souvienne.</p>
<h2 id="chapitre-11"><strong>Chapitre 11</strong></h2>
<p><img src="https://ferd.ca/static/img/printf/printf-end.png" /></p>
<p><br />
Printf, qui est maintenant assis juste en face de moi, est sur le chemin
du retour. Parler avec lui m'a fait réaliser à quel point ce que je fais
m'éloigne ce que je voulais, ce pour quoi j'ai commencé à programmer.
Chacune des personnes que le petit Printf a rencontré sont les rôles que
je me vois prendre moi-même un jour ou l'autre au fil du temps. J'ai été
encouragé par eux pour devenir comme eux, et j'ai probablement encouragé
des gens à faire la même chose.<br />
Lorsque je me suis lancé dans le jeu d'essayer de devenir un véritable
programmeur, Printf ne l'a pas fait. Il a dit qu'il était correct de ne
pas être un vrai programmeur, qu'il préférait être un programmeur avec
un visage humain.<br />
Aujourd'hui, je suis coincé dans la situation où je regarde en arrière,
je dois comprendre si je peux, aussi, devenir un programmeur avec un
visage humain ; ou si tout ce que je fais est juste un emploi. Il ne
semble pas y avoir tellement de choses qui vaille la peine
entre-deux.<br />
En tous les cas, là où printf a estimé qu'il n'a pas besoin d'être un
vrai programmeur, je pense que je ressens la même chose
maintenant.<br />
</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

279
html-websites/cipherbliss_blog/2017/cipherbliss_blog_129_comment-facebook-choisit-vos-amis-a-votre-place/index.html Normal file
View File

@ -0,0 +1,279 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 419</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2017-02-03 14:57:17&gt;</li>
<li>modifié: &lt;2018-10-29 10:18:01&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="comment-facebook-choisit-vos-amis-à-votre-place">comment
facebook choisit vos amis à votre place</h2>
<p>tml][Vous détagguer de toutes les photos]]. Vous pouvez <a
href="https://nickbriz.com/facebook/saveWallposts.html">faire un backup
de tout votre mur</a> personnel. <a
href="https://nickbriz.com/facebook/unfriend.html">Supprimer tous les
liens</a> avec vos amis Facebook. Ensuite, il ya <a
href="https://www.facebook.com/settings?tab=applications">toutes les
applications que vous avez utilisé, listées sur cette page</a>. C'est
l'une des meilleures failles de Facebook, car ils disent qu'ils ne
peuvent pas contrôler ce que les applications font avec vos données une
fois que vous leur donnez. Enregistrez donc la page des paramètres qui
montre quelles applications vous avez utilisé sur votre disque dur, et
supprimez l'accès à chacun d'eux manuellement. Chacune de ces
applications ont leur propre politique de confidentialité - la plupart
d'entre eux sont une cause perdue, réclamant des droits illimités à vos
données, donc il faudra juste les supprimer et continuer.</p>
<h2 id="supprimer-votre-compte">Supprimer votre compte</h2>
<p> <a
href="https://lifehacker.com/5813506/how-to-delete-your-facebook-account">Supprimez
votre compte Facebook</a> Ne laissez pas Facebook vous tromper en le
"désactivant" à la place.</p>
<h2 id="further-precautions">Autres précautions</h2>
<p>Facebook va toujours essayer de vous suivre avec un "profil furtif",
mais cela peut être évité. Pour empêcher Facebook (et d'autres) de
suivre ce que j'ai lu sur le web, j'utilise Firefox avec <a
href="https://www.mozilla.org/en-GB/firefox/47.0/tracking-protection/start/">la
protection de suivi</a> activée. (<a
href="https://lifehacker.com/turn-on-tracking-protection-in-firefox-to-make-pages-lo-1706946166">Voici
comment</a>. (Ils le font même si vous n'avez pas de compte Facebook) Si
vous n'utilisez pas Firefox, l'EFF dispose d'un plugin de navigateur
appelé <a href="https://www.eff.org/privacybadger">Privacy Badger.</a>
(Et pendant que vous y êtes, l'EFF a fait ce super plugin nommé <a
href="https://www.eff.org/https-everywhere">HTTPS everywhere</a> qui
choisit automatiquement la connexion Web la plus sécurisée, ce qui rend
plus difficile pour les entreprises Internet et autres de fouiner votre
activité sur le Web.) Puis il ya les données qui ont été divulguées aux
courtiers de données. <a
href="https://www.eff.stfi.re/deeplinks/2013/02/howto-opt-out-databrokers-showing-your-targeted-advertisements-facebook">Vous
pouvez demander à ce qu'elles soient supprimées</a>.</p>
<h2 id="les-alternatives-réelles-à-facebook">Les alternatives réelles à
Facebook</h2>
<p>Dans sa mise à jour de 2017, Salim poursuit en expliquant qu'il
s'attendait à utiliser tout autant <a
href="https://diasporafoundation.org/about#features">Diaspora</a> (que
l'on peut utiliser avec <a
href="https://www.framasphere.org">framasphère.org</a> si vous êtes
francophones) mais c'est le téléphone avec des conversations plus
intéressantes qui l'a remporté, ainsi que les échanges par e-mails. Tout
le monde a un numéro de téléphone, on l'a déjà pour les personnes auquel
on tient vraiment et on se dit qu'on avait oublié a quel point c'est
pratique. Notre héros recommande aussi <a
href="https://whispersystems.org/blog/signal/">Signal</a> sur smartphone
(<a
href="https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms">android</a>
, <a
href="https://itunes.apple.com/us/app/signal-private-messenger/id874139669">iphone</a>),
pour faire des conversations groupées, partager des images, des liens,
le tout chiffré et gratuit sans pistage.</p>
<blockquote>
<p>"en vérité c'est mieux que Facebook, plus immédiat et personnel"
Après un mois il n'a ressenti aucun besoin de remplacer facebook.</p>
</blockquote>
<p>Pour conclure, j'ai personnellement supprimé pas mal d'applications (
et ce qu'elles ont publié ) auxquelles j'avais donné accès via Facebook,
j'ai désinstallé les applis de facebook de mon téléphone et je teste
actuellement les alternatives avant de supprimer réellement mes contenus
sur facebook, en vous invitant à en faire autant.</p>
<blockquote>
<p>Rappelez-vous, ce n'est pas seulement à propos des choses techniques.
En restant sur Facebook, vous leur accordez la permission de recueillir
et d'utiliser des informations vous concernant, sans même que vous
utilisiez leur site. Et en restant dessus, les données qu'ils
recueillent sur vous s'évertuent à créer des modèles sur vos amis les
plus proches et votre famille, même ceux qui ont opté pour vivre en
dehors de leur filet.</p>
</blockquote>
<figure>
<img
src="https://www.cipherbliss.com/wp-content/uploads/2018/03/25qfe6.jpg" />
<figcaption>in the cloud, you are owned</figcaption>
</figure>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

205
html-websites/cipherbliss_blog/2017/cipherbliss_blog_131_lautohebergement-cest-tellement-bien/index.html Normal file
View File

@ -0,0 +1,205 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 450</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2017-09-27 22:20:54&gt;</li>
<li>modifié: &lt;2018-08-22 12:35:48&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="lautohébergement-cest-tellement-bien">l'autohébergement c'est
tellement bien</h2>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2017/02/ma_maison.jpg" /></p>
<p>L'auto hébergement, mangez en.</p>
<p>Installez un nextcloud, ou utilisez un cozy cloud sur <a
href="https://cozy.io">https://cozy.io</a> si vous n'êtes pas à l'aise
avec l'écriture de ligne de commande.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

336
html-websites/cipherbliss_blog/2018/cipherbliss_blog_150_comment-ne-pas-repartir-de-zero-a-chaque-nouvel-ordi/index.html Normal file
View File

@ -0,0 +1,336 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<p><a href="id:9f334a31-f81c-412f-a632-2bd23b4eeda6">initialisation</a>
<a href="id:ccf95cdf-2e6d-438b-83d6-418802bf58b8">ansible</a> <a
href="id:aa8865c0-53d7-444f-9119-4cfce73c27d1">tags sur noms de
fichiers</a> <a href="id:38277081-5b19-46eb-9e71-5887b902d7cf">les
sauvegardes aka backups</a> <a
href="id:bc6ab490-a315-4872-a36a-bf50ff6747d9">préparer la
réinstallation de son ordi</a></p>
<h1 id="article">Article</h1>
<ul>
<li>ID: 664</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2018-08-22 12:22:38&gt;</li>
<li>modifié: &lt;2018-08-29 10:02:05&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="comment-ne-pas-repartir-de-zéro-à-chaque-nouvel-ordi">comment ne
pas repartir de zéro à chaque nouvel ordi</h2>
<blockquote>
<p>vous vous souvenez quand vous avez changé de téléphone pour la
première fois et que vous aviez à retaper votre carnet d’adresses à la
main depuis l’ancien vers le nouveau? c’était bien désagréable et
chronophage. surtout que comme moi, ça vous est probablement arrivé
plusieurs fois avant que le moindre moyen de copier automatiquement ces
données n’existe pour le grand public</p>
</blockquote>
<p>et avec vos ordinateurs est ce que vous êtes toujours à l’âge de
pierre de la transmission de données ou bien est ce que vous avez appris
de vos erreurs?</p>
<p>ça tient en un concept simple:</p>
<h3
id="ranger-ses-fichiers-à-sauvegarder-dune-seule-façon-et-mettre-en-place-des-sauvegardes-automatiques-."><em>Ranger
ses fichiers à sauvegarder d’une seule façon et mettre en place des
sauvegardes <strong>automatiques</strong> .</em></h3>
<p>ça tombe bien, cozy cloud vient d’ouvrir au public des hébergements
qui respectent votre vie privée (contrairement à Dropbox ou bien Google
drive) de telle sorte que personne chez cozy cloud ne peut accéder à vos
données. <a href="https://www.cozy.io">www.cozy.io</a></p>
<p>gérer vos mots de passe avec un gestionnaire libre tel que KeePass et
stocker ses infos de sauvegarde sur votre cozy cloud.</p>
<ol>
<li><p>Archiver vos fichiers de travail et de loisirs</p>
<p>C’est un long boulot quand on a des années de bazar à ranger, et
qu’ils sont stockés de différentes manières sur plusieurs supports
(ordis, disque dur, clouds, mais aussi des supports non numériques:
vynils, cassettes audio, CD, DVD…) . Il convient donc de pouvoir les
ranger <strong>progressivement,</strong> car c’est une longue tâche.</p>
<p>Pour les supports non numériques je ne saurai que trop vous
recommander de mettre en carton vos bidules et les apporter à une petite
entreprise qui saura vous les numériser.</p>
<p>En premier lieu il va vous falloir probablement un ou deux Téra
octets de libre quelque part pour y créer votre dossier à
synchroniser.</p>
<ol>
<li><p>éliminer les doublons:</p>
<p>cibler les gros dossier avec <strong>Baobab</strong>, et ensuite plus
finement <a
href="https://www.cipherbliss.com/dedupliquer-ses-archives/">trouver les
doublons et les éliminer</a> via un logiciel fort sympatoche du type
<strong>FsLint</strong> .</p></li>
</ol></li>
<li><p>Créer un script d’initialisation en bash</p>
<p>pour installer vos programmes habituels et autres choses bien
pratiques.</p>
<p>J’ai fait le mien à partir de <a
href="https://gitlab.com/tykayn1/cipherbliss.com/blob/master/bash/postinstall/Ubuntu18.04_Bionic_Postinstall.sh">celui
de Simbd</a>, trouvé sur <a href="https://forum.ubuntu-fr.org/">le forum
ubuntu-fr</a>, et publié sur gitlab ici, que vous pouvez utiliser comme
bon vous semble:</p>
<p><a
href="https://gitlab.com/tykayn1/cipherbliss.com/tree/master/bash/postinstall"><span>https://gitlab.com/tykayn1/cipherbliss.com/tree/master/bash/postinstall</span></a></p>
<p>le fichier README détaille comment procéder à l’installation du
script.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="pp">#</span><span class="er">Script de PostInstall </span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>à lancer après une installation toute neuve d<span class="ch">&#39;u</span><span class="er">buntu 18.04 sur votre ordinateur perso.</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>mkdir script_postinstall \</span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a><span class="op">&amp;&amp;</span> cd script_postinstall \</span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a><span class="op">&amp;&amp;</span> wget https<span class="op">:</span><span class="co">//gitlab.com/tykayn1/cipherbliss.com/raw/master/bash/postinstall/tykayn_postinstall.sh \</span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a><span class="co">&amp;&amp; chmod +x tykayn_postinstall.sh</span></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="op">&amp;&amp;</span> sudo bash tykayn_postinstall<span class="op">.</span>sh</span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a></span></code></pre></div>
<p>Et voilà, à vous de faire le vôtre.</p></li>
</ol>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

275
html-websites/cipherbliss_blog/2018/cipherbliss_blog_153_cest-du-tres-loud-du-tres-tres-lourd/index.html Normal file
View File

@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 679</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2018-02-07 12:04:17&gt;</li>
<li>modifié: &lt;2018-08-22 17:49:46&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="cest-du-très-loud-du-très-très-lourd">c'est du très loud, du
très très lourd</h2>
<p>hier j'ai pu assister au décollage en direct (via youtube) du <a
href="https://fr.wikipedia.org/wiki/Falcon_Heavy">Falcon Heavy</a>,
fusée la plus puissante du monde, fabriquée par <a
href="https://www.spacex.com/">SpaceX</a>. <a
href="https://www.youtube.com/watch?v=bCc16uozHVE">https://www.youtube.com/watch?v=bCc16uozHVE</a>
<img
src="https://www.cipherbliss.com/wp-content/uploads/2018/02/sapceman-saloooo.png" /></p>
<blockquote>
<p>Falcon Heavy est un lanceur lourd développé par la société SpaceX
ayant la capacité de placer une charge utile de 63,8 tonnes en orbite
basse ou de 26,7 tonnes en orbite de transfert géostationnaire. . La <a
href="https://fr.wikipedia.org/wiki/Charge_utile_(astronautique)">charge
utile</a> dépend de l'orbite visée :</p>
<ul>
<li>Orbite basse : 63,8 tonnes</li>
<li>Orbite de transfert géostationnaire ; 26,7 tonnes</li>
<li>Orbite de transfert vers <a
href="https://fr.wikipedia.org/wiki/Mars_(plan%C3%A8te)">Mars</a> : 16,8
tonnes</li>
<li>Orbite de transfert vers <a
href="https://fr.wikipedia.org/wiki/Pluton_(plan%C3%A8te_naine)">Pluton</a> :
3,5 tonnes</li>
<li>Lanceurs réutilisables: oui</li>
</ul>
</blockquote>
<p>En comparaison, l'Ariane 5 qui détient 60% du marché des satellites
géostationnaires dispose de ces performances ci:</p>
<blockquote>
<ul>
<li>Orbite basse : 21 tonnes</li>
<li>Orbite de transfert géostationnaire ; 10.5 tonnes</li>
<li>Orbite de transfert vers <a
href="https://fr.wikipedia.org/wiki/Mars_(plan%C3%A8te)">Mars</a> : 
nope</li>
<li>Orbite de transfert vers <a
href="https://fr.wikipedia.org/wiki/Pluton_(plan%C3%A8te_naine)">Pluton</a> :
nope</li>
<li>Lanceurs réutilisables: non</li>
</ul>
</blockquote>
<p>[caption id="attachment<sub>689</sub>" align="aligncenter"
width="525"]<a
href="https://www.cipherbliss.com/wp-content/uploads/2018/02/Rocket-lineup-2.png">[[<span>https://www.cipherbliss.com/wp-content/uploads/2018/02/Rocket-lineup-2-1024x276.png</span></a>]]
comparatif des fusées existantes et de leur charge utile[/caption] On
peut voir ici en live la vie de StarMan sous différents angles de vue.
La Roadster couleur cerise va dériver dans l'espace en passant d'abord
près de Mars, lieu de future conquète de l'espèce humaine puis ira
rejoindre une orbite autour du soleil. Jamais l'autopilote de Tesla
n'aura été si loin. <a
href="https://www.youtube.com/watch?v=aBr2kKAHN6M">https://www.youtube.com/watch?v=aBr2kKAHN6M</a>
Le but de cette démo est de montrer que l'on peut envoyer du lourd tout
en se faisant une bonne pub, avec plus de puissance que n'importe quelle
fusée précédemment réalisée, pour une faction du prix - grâce à la
récupération d'une partie de la fusée pour les recharger en carburant.
Prochain objectif, une démo de la <a
href="https://waitbutwhy.com/2016/09/spacexs-big-fking-rocket-the-full-story.html">Big
Fucking Rocket</a> en 2020 visant le début de la conquête réelle de la
planète Mars par l'espèce humaine.  La Falcon Heavy visant l'apport de
matériel aux futurs astronautes. Ceux qui diront "hey mais pourquoi on a
pas de station lunaire alors qu'on est vingt ans après avoir mis le pied
humain sur la lune? Qu'est-ce que the fuck?"  </p>
<blockquote>
<p>It is high time that humanity went beyond Earth. Should have a moon
base by now and sent astronauts to Mars. The future needs to inspire. <a
href="https://t.co/6HjDQnRSA5">https://t.co/6HjDQnRSA5</a></p>
<p>— Elon Musk (@elonmusk) <a
href="https://twitter.com/elonmusk/status/941042298283966464?ref_src=twsrc%5Etfw">13
décembre 2017</a></p>
</blockquote>
<p>hébien sont aussi ceux qui ont entrepris de mettre en service une
conquête spatiale qui résout des tas de problèmes ici bas pour un tiers
du prix de l'année précédente. Disposer d'une station lunaire fait
partie des prochains objectifs qui servira de bras de levier à la
conquête, de la même façon que l'a fait la station internationale. Va y
avoir du boulot, mais on a enfin des gens qui se bougent pour ça. On vit
une époque formidable.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

236
html-websites/cipherbliss_blog/2018/cipherbliss_blog_167_la-detresse-emotionnelle-pour-installer-un-programme/index.html Normal file
View File

@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 826</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2018-07-13 15:39:58&gt;</li>
<li>modifié: &lt;2018-08-22 12:07:46&gt;</li>
<li>Index des articles du blog <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">cipherbliss</a></li>
</ul>
<h1 id="la-détresse-émotionnelle-pour-installer-un-programme">la
détresse émotionnelle pour installer un programme</h1>
<p>Quand vous avez l’habitude d’utiliser Windows, vous connaissez
probablement la terrible angoisse que représente l’idée même d’installer
un nouveau programme sur votre ordinateur.</p>
<h2
id="pourquoi-cest-si-stressant-dinstaller-un-programme-sous-windows">Pourquoi
c’est si stressant d’installer un programme sous windows?</h2>
<p>De nombreux écrans piégés dans l’installateur à analyser
minutieusement pour enlever tout programme néfaste qui serait installé à
cause d’une case cochée par défaut que vous auriez omis de dédocher.</p>
<p>Des installateurs de programme qui vont s’amuser à aller chercher
d’autres installateurs de programmes.</p>
<p>Des programmes qui se réinstallent tout seuls et changent vos
préférences sans vous en avertir.</p>
<p>Des programmes incompatibles avec d’autres que vous auriez installé,
et impossible à supprimer sans utiliser des techniques vaudou, voire
nécessitant l’installation d’un autre programme pour les supprimer.</p>
<p>Pas de gestionnaire de dépendances pour aller piocher les bonnes
versions et supprimer les paquets obsolètes ou orphelins.</p>
<p>Un registre windows avec plein de conneries inutiles dedans et aucun
programme capable de le nettoyer par défaut.</p>
<h2 id="quel-bordel.">Quel bordel.</h2>
<p>Toutes ces raisons augmentent le cout émotionnel (qui n’a rien à voir
avec <a
href="https://emmaclit.com/2017/05/09/repartition-des-taches-hommes-femmes/">la
charge mentale</a>) de l’installation d’un nouveau programme dans un
environnement windows et découragent ses utilisateurs de s’approprier
leur ordinateur. Il faut avoir tout cela en tête lorsque l’on souhaite
faire utiliser de meilleures solutions à des utilisateurs captifs.</p>
<p>Enfin, depuis que tout le monde souhaite installer Firefox au lieu
d’Internet Explorer, ou Libre Office au lieu de MS office, il semblerait
qu’un autre monde soit possible.</p>
<p>Y’a bien Charlie qui a sorti sa <a
href="https://chocolatey.org/">Chocolatery</a> (uniquement <a
href="https://www.cipherbliss.com/depasser-la-barriere-de-la-langue/">en
englishe bordel!</a>) pour windows, un vrai gestionnaire de dépendances
capable d’installer un programme en deux deux.</p>
<p>Mais pour cela, il faudra d’abord… l’installer.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

301
html-websites/cipherbliss_blog/2018/cipherbliss_blog_168_comment-ne-plus-perdre-de-temps-avec-ses-mots-de-passe/index.html Normal file
View File

@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 855</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2018-08-03 16:03:26&gt;</li>
<li>modifié: &lt;2018-08-03 16:17:25&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2
id="comment-ne-plus-perdre-de-temps-avec-ses-mots-de-passe-1">comment ne
plus perdre de temps avec ses mots de passe</h2>
<p>an que passe quelqu'un à rechercher ses mots de passe et à les taper
dans des formulaires de login. C'est aussi le temps que vous économisez
en ne les tapant pas vous même si vous adoptez un gestionnaire de mots
de passe.</p>
<p>Heureusement il existe des solutions très pratiques pour gérer vos
mots de passe sans devoir les confier à un tiers auquel vous ne faites
pas confiance, ou les écrire sur papier pour les recopier ensuite.</p>
<h2 id="les-solutions-à-la-gestion-de-mot-de-passe.">Les solutions à la
gestion de mot de passe.</h2>
<p>Si vous êtes ici vous avez bien deux minutes pour mettre en place une
meilleure gestion de vos mots de passe. Je ne saurais donc que trop vous
conseiller d'utiliser <strong>un gestionnaire de mot de passe</strong>
comme <a href="https://www.bitwarden.com">Bitwarden</a> (gratuit et
autohébergeable dont j'ai <a
href="https://www.cipherbliss.com/depasser-la-barriere-de-la-langue/">contribué
à la traduction en Français</a>), Keepass ou <a
href="https://www.lastpass.com">Lastpass</a> (payant et centralisé, 9€
par an mais ça vaut carrément le coup notamment pour sa fonction de
changement automatisé, propose une offre famille qui fait un prix de
groupe pour 6 personnes).</p>
<h2 id="un-gestionnaire-de-mots-de-pass-cest-beaucoup-mieux.">Un
gestionnaire de mots de pass c'est BEAUCOUP MIEUX.</h2>
<p>C'est capable de créer et de remplir vos identifiants sur demande /
automatiquement sur tous les sites web du monde sans avoir à retenir un
million de mots de passe différents, tout en étant capable d'utiliser ce
genre de mot de passe:</p>
<blockquote>
<p>exemple: pour ma boite mail pro j'utilise ce mot de passe:
identifiant: troubadourdudimanche@laboitemail.com pass:
!zswL*t0!X@3P9$OnCL$*jccJe9%kQ5SxWwgKRu0AjHKaaMddpO1onbU@%ln%1LOOj5DyO4otv0Atd6hfmY7nhfiX*
pour <a href="https://www.mamot.fr">mon réseau social préféré</a>
j'utilise celui ci: identifiant: bébertDuchmoll pass:
EMLocF9FgLesVW$RtJwbZG&amp;FuqvbC%9a&amp;3!4v8!!i@optNLmk5iZkvYMZQBpKkH94Qb4Nd@q&amp;tMYz<sup>p</sup>#RuXSi!iYvL&amp;UEIH^
pour mon blog j 'utilise ça: identifiant: leadmin<sub>Kivabien</sub>
pass:
sRpKuHwGZ9k!dkBWY$UBIHR#Q#WVYzzpzAy5Igr9gqPLRh@@3yoKj&amp;dgkBE4qAGzwyTGcm%ixHP*JBry@q9cjJbed*dS7t!</p>
</blockquote>
<p>Et aussi de prendre des notes de façon sécurisée. Vous allez donc me
dire: <em>Wololo! Mais comment c'est possible d'utiliser tout ça sans
avoir à se péter le crâne ?</em> C'est simple, c'est géré par le
gestionnaire de mot de passe qui est intégré à Firefox (ou autre
navigateur), qui stocke ces infos dans un fichier illisible jusqu'à ce
que je le déverrouille par <strong>une phrase de passe</strong>. Et une
phrase de passe c'est vachement mieux qu'un mot de passe ET plus facile
à retenir.   Prenez par exemple cette phrase:</p>
<blockquote>
<p><em>miaou le chat est un boulet qui ronfle</em></p>
</blockquote>
<p>Elle fait déjà un bon paquet de caractères et est donc de fait très
longue à deviner par un script qui essaierait toutes les combinaisons de
caractères (<a
href="https://fr.wikipedia.org/wiki/Attaque_par_force_brute">attaque par
force brute</a>). on personnalise un peu, et hop, on a une phrase de
pass longue et difficile à deviner, qui mettrait des millions de
milliards d'années à être trouvées par un ordinateur capable de faire un
trillion d'essai par seconde.</p>
<blockquote>
<p><em>miao*w!* le chat <strong>3*st un boulet qui
*RONFLE</strong></em></p>
</blockquote>
<p>Sérieusement, prenez dix secondes pour installer un gestionnaire de
mots de passe (il suffit de s'inscrire avec une phrase de passe, et
d'installer une extension firefox/chrome/autre et vous n'aurez jamais
plus besoin de réfléchir à plein de mots de passe différents tout le
temps pour chaque site que vous utilisez). Vous gagnerez énormément de
temps et d'argent à ne pas avoir à récupérer vos comptes ou à affronter
des situations douloureuses pour vous et vos proches (j'insiste)
évoquées ci dessus qui vous en prendront bien plus. Tous les
gestionnaires de mots de passe permettent la portabilité, c'est à dire
que si vous souhaitez changer de gestionnaire à un moment donné, vous
pourrez faire un export / import de vos données. Formidable non ? Voilà,
donc pour faire un premier pas, inscrivez vous sur <a
href="https://vault.bitwarden.com/#/register">bitwarden</a> et ensuite
ajoutez leur <a
href="https://addons.mozilla.org/fr/firefox/addon/bitwarden-password-manager/">extension
firefox</a>/<a
href="https://chrome.google.com/webstore/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb">chrome</a>/autre.
Puis utilisez l'application mobile (<a
href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden&amp;hl=en_US">android</a>
ou <a
href="https://itunes.apple.com/us/app/bitwarden-password-manager/id1137397744">pomme</a>)
qui synchronisera vos infos de passe et de notes sécurisées, et
proposera de remplir les champs dans les autres applis si vous le lui
permettez. Vous pouvez aussi installer votre coffre fort sur votre ordi
pour une utilisation hors ligne. Et utilisez le!     Pour aller plus
loin, des guides généraux: [[<a
href="https://www.ssi.gouv.fr/uploads/2017/01/guide_hygiene_informatique_anssi.pdf">https://www.ssi.gouv.fr/uploads/2017/01/guide_hygiene_informatique_anssi.pdf</a>][Le
guide de l'hygiène générique du gouvernement français en 42 mesures,
dispo en pdf.]] <a
href="https://duckduckgo.com/?q=hygiène+numérique">Recherchez "hygiène
numérique" avec duckduckgo</a>, un moteur de recherche à adopter car il
ne vous surveille pas, contrairement à google et beaucoup d'autres.
intéressez vous à l'authentification multi factorielle et activez la. Il
existe aussi des clés usb qui permettent de générer des mots de passe à
usage unique, qui ne nécessitent même pas de copier ces mots de passe,
yubikey étant une marque parmi d'autres. en englishe: <a
href="https://www.passwordday.org/">https://www.passwordday.org/</a> <a
href="https://www.lockdownyourlogin.org">https://www.lockdownyourlogin.org</a>
<a
href="https://stopthinkconnect.org/tips-advice/general-tips-and-advice">https://stopthinkconnect.org/tips-advice/general-tips-and-advice</a>
Enjaillez!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

276
html-websites/cipherbliss_blog/2018/cipherbliss_blog_175_10-raisons-pour-lesquelles-lopen-source-est-bon-pour-les-affaires/index.html Normal file
View File

@ -0,0 +1,276 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 957</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2018-10-09 14:36:17&gt;</li>
<li>modifié: &lt;2018-10-09 14:36:17&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2
id="raisons-pour-lesquelles-lopen-source-est-bon-pour-les-affaires-1">10
raisons pour lesquelles l'Open Source est bon pour les affaires</h2>
<p>iels à source fermée, vous n'avez rien d'autre que les affirmations
du fournisseur vous indiquant que le logiciel est sécurisé et conforme
aux normes, par exemple. C'est fondamentalement un acte de foi. La
visibilité du code derrière les logiciels open source, cependant,
signifie que vous pouvez voir par vous-même, ou faire auditer par des
experts indépendants, voir précisément comment fonctionne le logiciel,
et être confiant.</p>
<h2 id="options-de-support">8. Options de support</h2>
<p>Les logiciels open source sont généralement gratuits, tout comme [[<a
href="https://www.pcworld.com/businesscenter/article/207958/how_to_get_support_for_open_source_software.html">https://www.pcworld.com/businesscenter/article/207958/how_to_get_support_for_open_source_software.html</a>][leur
support (l'aide aux utilisateurs) via les communautés dynamiques
entourant chaque]] logiciel. La plupart des distributions Linux, par
exemple, ont une communauté en ligne avec une excellente documentation,
des forums, des listes de diffusion, des forges, des wikis, des groupes
de discussion et même un support par chat en direct avec des humains.
Pour les entreprises qui recherchent une assurance supplémentaire, il
existe désormais des options de support payant sur la plupart des
packages Open Source à des prix encore inférieurs à ceux que la plupart
des fournisseurs propriétaires facturent. Les fournisseurs de support
commercial pour les logiciels open source tendent également à être plus
réactifs, le support étant le centre de leurs revenus.</p>
<h2 id="coût">9. Coût</h2>
<p>Entre le prix d'achat du logiciel lui-même, le coût exorbitant de la
protection antivirus obligatoire, les frais de support, les dépenses de
mise à niveau en cours et les coûts associés à la captivité des clients,
les logiciels propriétaires retirent plus de votre entreprise que vous
ne le réalisez probablement. Et dans quel but? Vous pouvez obtenir <a
href="https://www.pcworld.com/businesscenter/article/202563/11_free_linux_apps_your_business_needs_now.html">une
meilleure qualité à une fraction du prix</a>.</p>
<h2 id="essayez-avant-dacheter">10. Essayez avant d'acheter</h2>
<p>Si vous envisagez d'utiliser un logiciel open source, il ne vous <a
href="https://www.pcworld.com/businesscenter/article/205640/4_ways_to_give_desktop_linux_a_testdrive.html">coûtera
généralement rien de l'essayer avant</a>. Cela est dû en partie au prix
gratuit du logiciel, et en partie à l'existence de LiveCD et de Live USB
pour de <a
href="https://www.pcworld.com/businesscenter/article/204310/how_to_choose_a_desktop_linux_distribution.html">nombreuses
distributions Linux</a>, par exemple. Aucun engagement n'est requis
jusqu'à ce que vous soyez sûr. Rien de tout cela ne veut dire, bien sûr,
que votre entreprise doit nécessairement utiliser un logiciel open
source pour tout. Mais avec tous les nombreux avantages que cela
comporte, vous seriez négligent de ne pas y penser sérieusement.</p>
<p><a
href="https://www.pcworld.com/article/209891/10_reasons_open_source_is_good_for_business.html">Katerine
Noyes</a></p>
<p><u>__</u> J'ajouterais que l'utilisation de logiciels privateurs vous
fait perdre la main sur les données utilisées par votre entreprise, ce
qui pose des problèmes de confidentialité et de fuites de données qui
vont toujours finir par avoir des conséquences graves. Surtout <a
href="https://jenairienacacher.fr">si vous imaginez que vous n'avez rien
à cacher</a>. Un bon point de départ pour tester des logiciels libres et
se passer des GAFAM+, c'est de regarder ce que fait Framasoft et sa
campagne de communication sur les logiciels libres permettant de
remplacer des tas de logiciels privateurs, sur <a
href="https://degooglisons-internet.org/fr/">degooglisons-internet.fr</a></p>
<h2 class="western"
id="pour-plus-dinfos-les-liens-dans-le-texte-an-anglais">Pour plus
d'infos, les liens dans le texte (an anglais):</h2>
<p><a
href="https://www.pcworld.com/businesscenter/article/207479/linux_is_on_the_rise_for_business.html">Linux
est en progression dans les entreprises</a> <a
href="https://www.pcworld.com/businesscenter/article/202452/why_linux_is_more_secure_than_windows.html">Pourquoi
linux est plus sécurisé que windows</a> <a
href="https://www.pcworld.com/businesscenter/article/209419/88_highrisk_defects_found_in_android_kernel.html">88
graves défauts trouvés dans le noyau android</a> <a
href="https://www.pcworld.com/businesscenter/article/205867/linux_kernel_exploit_gives_hackers_a_back_door.html">Un
exploit du kernel linux donne une porte dérobée à des crackers</a> <a
href="https://www.pcworld.com/businesscenter/article/209661/what_you_need_to_know_about_new_ie_zeroday.html">Ce
que vous devez savoir à propos du bug zéro day d'IE</a> <a
href="https://www.pcworld.com/businesscenter/article/207958/how_to_get_support_for_open_source_software.html">Comment
obtenir du support pour un logiciel open source</a> <a
href="https://www.pcworld.com/businesscenter/article/202563/11_free_linux_apps_your_business_needs_now.html">11
applis linux dont votre entreprise à besoin</a> <a
href="https://www.pcworld.com/businesscenter/article/205640/4_ways_to_give_desktop_linux_a_testdrive.html">4
façons d'essayer une distribution linux</a> <a
href="https://www.pcworld.com/businesscenter/article/204310/how_to_choose_a_desktop_linux_distribution.html">Comment
choisir une distribution linux pour sa station de travail</a>    </p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

250
html-websites/cipherbliss_blog/2018/cipherbliss_blog_177_les-obstacles-les-plus-frequents-au-travail-dequipe/index.html Normal file
View File

@ -0,0 +1,250 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 965</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2018-09-28 16:59:19&gt;</li>
<li>modifié: &lt;2019-01-08 16:49:07&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="les-obstacles-les-plus-fréquents-au-travail-déquipe">Les
obstacles les plus fréquents au travail d'équipe</h2>
<p>faire marcher le bouzin sur son propre site (sur un gitlab qui
recense aussi <a
href="https://framagit.org/tykayn/caisse-bliss/boards">l'avancement et
le plan des choses à faire</a> dans un tableau à colonnes),</p>
<figure>
<img
src="https://www.cipherbliss.com/wp-content/uploads/2018/09/tableau_caisse_bliss.png" />
<figcaption>tableau d'avancement de Caisse Bliss sur
Framagit</figcaption>
</figure>
<p>où se trouvent les actualités (ici), qui est à l'origine du projet
(Cipher bliss, mon entreprise perso), et comment joindre un humain (moi,
avec mon email et des liens vers des réseaux sociaux que j'utilise comme
<a href="https://mamot.fr/web/accounts/21297">mastodon sur mamot.fr</a>
).</p>
<p>Un point qui facilite grandement la collaboration est de rencontrer
les autres contributeurs relativement souvent, bien que ça ne soit pas
indispensable, ça aide beaucoup à clarifier des choses et les vues de
chacun.</p>
<h2 id="faire-appel-à-des-vrais-testeurs">Faire appel à des vrais
testeurs</h2>
<p>J'ai rameuté des gens qui exposent en festival (des gens pour qui est
pensé le truc) pour qu'ils testent et me fassent des retours en direct
(un big up à Agnès Loup!) afin que j'organise la roadmap en créant des
sujets à traiter dans le tableau du projet. Il me reste à démarcher des
gens en live, j'ai donc abordé quelques forums où les gens sont à priori
sensibles aux avantages des logiciels libres et ai demandé de l'aide en
présentant mon projet (tout en furetant sur les projets des autres pour
voir comment ça se passe et où est ce que je peux contribuer moi
aussi).<br />
C'est ainsi que sur <a
href="https://framacolibri.org">framacolibri.org</a>, le forum de
l'association framasoft, en une semaine seulement j'ai pu :</p>
<ul>
<li>recevoir de l'aide de plusieurs personnes pour m'aider à choisir une
licence à attribuer au projet qui lui permette de rester libre (GNU
Affero) tout en étant fidèle à ce que je souhaite</li>
<li>intégralement traduire le site en anglais en confiant des textes à
traduire sur une plateforme dédiée. Sus à <a
href="https://www.cipherbliss.com/depasser-la-barriere-de-la-langue/">la
barrière de la langue</a>!<br />
</li>
</ul>
<p>Comme quoi, il suffit de se lancer. ça tombe bien, <a
href="https://frama.site/">frama.site</a> vous permet de créer des sites
perso et un wiki facilement, sans savoir coder, sans vous surveiller et
gratos grâce aux dons des adhérents et bénévoles de l'association!</p>
<p>Si vous avez des astuces pour bosser à plusieurs, faites passer dans
les commentaires. Ou si vous connaissez des gens qui pourraient avoir
besoin de ces conseils
partagez-leurs-cet-article-abonnez-vous-popopopopo-amour-sur-vous!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

853
html-websites/cipherbliss_blog/2018/cipherbliss_blog_181_comment-se-delester-de-la-charge-mentale/index.html Normal file
View File

@ -0,0 +1,853 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1083</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2018-11-19 16:48:12&gt;</li>
<li>modifié: &lt;2018-11-19 16:58:30&gt;</li>
<li>Index des articles du blog <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">cipherbliss</a></li>
</ul>
<h1 id="blog-article---comment-se-délester-de-la-charge-mentale">Blog
article - Comment se délester de la charge mentale</h1>
<p><a
href="https://www.cipherbliss.com/comment-se-delester-de-la-charge-mentale/">https://www.cipherbliss.com/comment-se-delester-de-la-charge-mentale/</a></p>
<p>Vous avez probablement eu vent de ce qu’est la charge mentale et de
sa disproportion dans les couples hétéros, notamment via <a
href="https://emmaclit.com/2017/05/09/repartition-des-taches-hommes-femmes/">cette
BD d’emma Clit « Fallait demander »</a> qui explique très bien
l’incompréhension problème et le poids de ce fléau sur les femmes. Si
vous ne voyez pas de quoi je parle allez lire d’abord cette courte
BD.</p>
<p>Le problème de la charge mentale n’est pas une fatalité et nous
allons voir aujourd’hui deux moyens complémentaires à mettre en place
par les deux personnes du couple pour en venir à bout:</p>
<ul>
<li>La communication <strong>verbale</strong> claire et
<strong>précise</strong> .</li>
<li>Les outils numériques pour se défaire de la charge mentale.</li>
</ul>
<p>Vous noterez que le problème ne se situe pas uniquement chez des
couples hétéros, c’est pourquoi tout du long de cet article comme pour
ceux de chez qzine.fr je ne préciserai pas particulièrement que les
rôles doivent être mis en place spécifiquement par un des deux
partenaires, mais bien par les deux.</p>
<h2 id="communication-verbale">Communication verbale:</h2>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/aucun_sens.jpg" /></p>
<p>S’attribuer des rôles Claires et nets, et être flexible <strong>tous
les deux pour améliorer les choses</strong> .</p>
<h3
id="comment-se-passe-habituellement-la-répartition-des-tâches">Comment
se passe habituellement la répartition des tâches</h3>
<p>Quand je vivais seul, je m’occupais de toutes les tâches ménagères et
de toutes les choses à penser, qu’il s’agisse de trucs administratifs,
de choses à organiser, des potes à recevoir ou à visiter, de docteurs à
aller voir.</p>
<p>Mais aux moments où j’ai vécu en couple, jusqu’aux six dernières
années où je vis maintenant marié avec ma femme il faut constater que
dans notre culture, tout le monde fait en sorte que homme et femme aient
des tâches bien précises à faire par défaut, que ça leur plaise ou
non:</p>
<p>Tout le système utilise des procédés insidieux de telle sorte que les
femmes soient bien d’avantage contraintes (socialement, financièrement)
de s’occuper des gamins et de la tenue du foyer pendant que monsieur
doit aller gagner un max de pognon pour tout le foyer sans profiter de
la présence de ses enfants. Chacun des membres du système est à la fois
récompensé pour agir de la sorte, et découragé de dévier de ce
schéma.</p>
<p>ça commence bien avant la grossesse et se poursuit bien après, bien
qu’il soit admis qu’<a
href="https://waitbutwhy.com/2018/04/picking-career.html">une carrière
de nos jours n’a rien à voir avec la carrière de nos parents nés dans
les années 70</a>. Donc quand on ne met rien de spécial en place, on
tombe dans… le schéma sexiste classique.</p>
<h3 id="le-schéma-sexiste-classique">Le schéma sexiste classique</h3>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2017/11/aZlVaMZm_700w_0.jpg" /></p>
<p>Les femmes s’occupent de faire la bouffe, les courses, le ménage, les
couches, les rdv chez le médecin, s’arrêtent de bosser plus longuement
que les hommes et subissent un isolement social.</p>
<p>Les hommes vont s’occuper de sortir les poubelles, changer les
ampoules, réparer des trucs (parce que c’est compliqué et technique, et
que ça fait peur), faire des travaux, soulever des trucs lourds parce
qu’ils soulèvent de la fonte pour le fun, conduire la famille dans leur
grosse voiture et <a
href="https://www.securite-routiere.gouv.fr/en-parler-agir/info-intox/femmes/les-filles-reussissent-moins-a-l-examen-pratique-b-que-les-garcons.-vrai-ou-faux">avoir
plus d’accidents</a>.</p>
<p>Vous remarquerez d’ailleurs à quel point les femmes sont découragées
de conduire des voitures et qu’on les prend pour des grosses bécasses
dans les pubs en mettant l’accent sur la simplicité de conduite d’un
véhicule, et autres fadaises de couleur de vernis raccord avec la
carrosserie. ça et autres prétendues blagues du style « femme au volant
mort au tournant ». Super blague, top</p>
<p>résultat, si vous regardez, plus de 9 conducteurs sur 10 sont des
hommes.</p>
<p>Ainsi, la plupart du temps, c’est aux hommes que revient le rôle de
fournir des revenus afin de faire vivre toute la famille. Et si vous
croyez que ce sont les allocation familiales et le RSA qui vont vous
rendre riche et disponible à une vie oisive, c’est que vous n’avez
jamais essayé ce mode de vie et que vous êtes très mauvais en maths.
Désolé de vous le dire. (et si vous croyez que la fraude au RSA est plus
importante que la fraude des entreprises, désolé encore)</p>
<p><a
href="https://www.lsa-conso.fr/les-dinks-une-cible-de-choix-difficile-a-viser,68447">Les
familles à double revenu sans enfant</a> (ou <a
href="https://fr.wikipedia.org/wiki/DINK">DINK</a>) sont les familles
les plus aisées, à fort pouvoir d’achat et disponibles à une vie de
loisirs.</p>
<p>S’ils souhaitent s’absenter pour s’occuper de leurs enfants malades
c’est mal vu, toujours en 2018 on leur demandera pourquoi ce n’est pas
leur femme qui s’en occupe. Bon, sauf si vous êtes freelance les gens
s’en foutent, mais vous noterez que beaucoup de gens ne sont pas
freelance.</p>
<p>Les hommes devront passer le plus de temps possible sur leur lieu de
travail, des lieux d’ailleurs très souvent minoritaires en femmes, que
l’on retrouve d’avantage dans des métiers où l’on leur demande de « bien
présenter » comme dans les ressources humaines et la communication ou
les accueils, les tâches ménagères (vous avez déjà vu un homme de
ménage?), les métiers autour de l’enfance, ou ceux consistant à soigner
des patients.</p>
<p>Les femmes d’ailleurs sont plus souvent contraintes de choisir des
métiers à temps partiel et laisser tomber des carrières pour laisser du
temps à des tâches non rémunérées. voir à ce sujet les slogans
féministes « rémunération pour TOUS les travaux ».</p>
<p>Pour le reste, il y a mastercard, enfin non, les métiers d’hommes
quoi. Si vous regardez dans l’histoire, vous verrez des tas d’hommes
célèbres, et énormément moins de femmes. Voilà ce que ça donne quand on
empêche l’accès à l’instruction et à d’autres perspectives d’avenir à
plus de la moitié de la population, on se prive d’un énorme
potentiel.</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/has-science-gone-too-far.jpg" /></p>
<p>Dans les domaines scientifiques également, là où l’on étudie l’aspect
biologique on retrouve une grande proportion de femmes. Peut être
estime-t-on que la physique, l’exploration spatiale, ou les
mathématiques ne doivent pas être des domaines censés attirer les
femmes. Durant les études de lycée, vous remarquerez aussi que tout ce
qui a trait à la littérature ou aux sciences sociales (qu’on appelle
aussi « les sciences molles » vous remarquerez) implique d’énormes
proportions d’élèves femmes.</p>
<p>Chose notable: alors que la programmation informatique implique
énormément d’écriture (de code, mais pas seulement) et de notions
grammaticales et littéraires, c’est un domaine où l’on retrouve très peu
de femmes.</p>
<p>Bien qu’<a href="https://peerj.com/preprints/1733.pdf">elles
produisent des logiciels d’une qualité globalement meilleure que celle
des hommes</a>.</p>
<h3 id="lautomatisation">L’automatisation ?</h3>
<p>La faux-tomation, ou <a
href="https://logicmag.io/05-the-automation-charade/">l’escroquerie de
l’automation surévaluée</a>, est une chose intrigante. C’est quand on
vous vend par exemple qu’une machine va vous faire gagner du temps mais
qu’elle vous apporte à la place d’autres contraintes plus chronophages
encore. Comme les caisses automatiques aux supermarchés censées éviter
d’avoir plein d’hôtes de caisse (souvent des femmes d’ailleurs), mais
qui plantent tellement tout le temps que le gain de temps par
l’automatisation du procédé est négligeable. L’automatisation est
grandement surestimée dans de nombreux endroits où on la vend, bien que
l’intelligence artificielle et les progrès technologiques soient
réellement impressionnants, et dépassent tout le temps les attentes des
experts en la matière. En fait, le bénéfice de l’automatisation reste
toujours inhérent à la résilience de la chaîne d’action, toute la suite
d’actions est limitée par son maillon faible et la capacité de réaction
de l’ensemble pour ne pas empêcher toute la chaîne d’action de se
poursuivre.</p>
<p>Les réels progrès d’automatisation cachent de nombreux métiers de
l’ombre totalement abrutissants et aussi aliénants que les métiers
qu’ils tentent de faire disparaître. Les assistants vocaux, la conduite
autonome, la lutte contre le spam, les transitions numériques des
administrations demandent encore et toujours d’importants travaux
d’étiquetage, de vérifications, de support téléphonique, en grande
partie parce que ces produits automatisés sont bêtes comme leur pieds et
incapables de s’adapter à leurs utilisateurs.</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/user_experience_thinking_over_the_garden_wall.gif" /></p>
<p>l’UX dans son ensemble est grandement négligée dans la plupart des
produits. Il est souvent moins coûteux de livrer un produit mal foutu et
de se payer des opérateurs de support téléphonique à l’étranger à un
prix ridicule, que de consacrer un mois de plus à la conception et
l’amélioration d’un produit en le confrontant à ses utilisateurs finaux.
Mais c’est risqué pour vos fesses si vous basez tout votre business sur
la médiocrité de cette façon, vos utilisateurs iront tout simplement
voir ailleurs vers des produits qui juste-marchent, c’est vous qui
voyez.</p>
<p>Les automatisations sont pour beaucoup incomplètes de par leur
production mais aussi notamment parce que l’éducation qui devrait aller
avec ne suit pas, et fait par exemple que nous sommes tous analphabètes
de l’informatique. ou absolument infoutus de nettoyer le filtre de notre
lave-vaisselle parce qu’on s’imagine que c’est trop compliqué. Sans
parler des bugs que l’on a pas le droit de corriger du fait de lois et
de politiques obscurantistes absurdes qui enferment les
utilisateurs.</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/penguin_doge.jpg" /></p>
<p><a
href="https://lunatopia.fr/blog/les-gamins-ne-savent-pas-utiliser-les-ordinateurs">à
lire à ce sujet: Les gamins ne savent pas se servir de l’informatique,
et voilà pourquoi cela devrait vous inquiéter.</a></p>
<p>Mais revenons à nos moutons.</p>
<h3 id="quelle-est-lévolution-de-la-répartition-des-tâches">Quelle est
l’évolution de la répartition des tâches?</h3>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/11/screenshot-www.francetvinfo.fr-2018.11.19-14-55-28.png" /></p>
<p>Une légère évolution de <a
href="https://www.francetvinfo.fr/societe/egalite-homme-femme-la-repartition-des-taches-domestiques-en-trois-graphes_902569.html">la
répartition des tâches</a> se fait lorsqu’il s’agit d’emmener les
enfants à l’école et de les récupérer.</p>
<p><strong>Mais dans l’ensemble les choses ne bougent pas vraiment
depuis les années 1980. Les femmes passent toujours nettement plus de
temps à faire des tâches domestiques.</strong></p>
<p>C’est pourquoi il est vital de prendre un peu de temps pour
communiquer sur nos attentes et pourquoi pas <strong>les écrire</strong>
. <a href="id:c0091ec6-161b-430a-8af6-c06519fb479a">corvées</a></p>
<p>On habitue les femmes à communiquer de la façon la plus subtile
possible, et les hommes à ne pas laisser la place à la subtilité. C’est
pourquoi il convient de se mettre sur la même longueur d’onde. Si vous
reprochez à votre partenaire encore et toujours la même chose, en le
répétant plein de fois et que les choses ne changent pas, ce n’est pas
forcément parce que votre partenaire ignore ce que vous lui reprochez,
c’est probablement parce que ça lui est plus coûteux (en temps et
énergie ) de ne pas changer les habitudes car il/elle ne voit pas le
même tableau de contraintes et bénéfices que vous.</p>
<p>Ce n’est certainement pas la première fois que vous entendez le fait
que la communication est cruciale dans un couple ou ailleurs, mais avez
vous vraiment essayé de formuler de plusieurs façons différentes les
tenants et aboutissants de ce que vous souhaitez améliorer ? Ce n’est
pas évident, surtout quand on estime que c’est aux autres de s’adapter à
nous, et tout le monde n’a pas eu le même temps et le même droit
d’apprendre à s’exprimer.</p>
<p>On oublie souvent que notre partenaire n’a aucune connaissance de
<strong>tous</strong> les efforts que l’on fait parce que bien
évidemment il n’est pas H24 avec nous.</p>
<p>L’autre n’a jamais connu notre quotidien comme nous le connaissons de
l’intérieur, et c’est pareil pour lui.</p>
<h3 id="que-communiquer-en-particulier">Que communiquer en
particulier?</h3>
<p>Communiquer sur nos besoins et attentes n’est pas un concours de qui
souffre le plus.</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/no_from_monopoly.jpg" /></p>
<p>Il ne faut d’ailleurs pas espérer que notre conjoint puisse encaisser
tout seul l’intégralité de ce qui nous tourmente, et encore moins savoir
comment réagir correctement. Nous avons tous des attentes, à tort ou à
raison, forgées par l’ensemble de notre culture – et principalement par
les films et autres ouvrages dont on s’abreuve pas forcément par
choix.</p>
<p>Que ce soit parce que ce n’est pas forcément son rôle, mais aussi
parce que mal formuler les choses ferait plus de mal que de bien. Il est
vital d’avoir plusieurs oreilles à notre écoute. D’avoir des espaces de
liberté où l’on peut se concerter et échanger en prenant le temps de se
taire pour dégager de la clarté dans ce qui nous préoccupe.</p>
<h3 id="diversifier-ses-interlocuteurs">Diversifier ses
interlocuteurs</h3>
<p>S’en remettre à un professionnel de l’écoute n’est pas réservé qu’aux
personnes atteintes de troubles psychologiques, et la société en
sortirait grandie si on cessait de faire croire de pareilles
énormités.</p>
<p>Ce partage nécessaire trouvera ses solutions sous des formes
diverses. ça peut être en discutant entre collègues, entre parents
d’enfants, en famille, entre amis proches ou lointains, entre joueurs
d’un club de sport ou de cuisine, sur un chantier, sur un forum, dans un
festival, sur un banc dans un parc… c’est à vous de voir.</p>
<p>Si vous ne savez pas ce que vous attendez de votre relation, soyez en
tous cas certain que ce ne sera pas votre partenaire le mieux qualifié
pour le savoir et ouvrez votre horizon.</p>
<h3 id="lister-les-tâches-et-vos-besoins">Lister les tâches et vos
besoins</h3>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/04/The-Expert-Short-Comedy-Sketch.jpg" /></p>
<p>Un bon moyen de communiquer de façon plus calme consiste à passer par
l’écrit. Concentrons nous sur les choses à faire chez vous.</p>
<p>Prenez chacun une feuille de papier et un crayon.</p>
<p>Faites la liste des tâches, notez combien de fois par mois vous les
faites. (hé oui, ça demande réflexion mais ça vaut le coup vous allez
voir).</p>
<p>par exemple:</p>
<blockquote>
<ul>
<li>les courses</li>
<li>la lessive</li>
<li>gérer les paperasses</li>
<li>sortir les poubelles</li>
<li>enmener les enfants à la crèche / à l’école</li>
<li>aller chercher les enfants à la crèche / à l’école</li>
<li>passer l’aspi</li>
<li>faire la cuisine</li>
<li>faire la vaisselle</li>
<li>nettoyer les plans de travail</li>
<li>sortir les poubelles</li>
<li>nettoyer les chiottes</li>
<li>nettoyer la douche</li>
<li>aller chez le véto pour le chat/le chien</li>
<li>chercher du pain</li>
<li>prendre rdv chez le doc/le dentiste</li>
<li>ranger le salon</li>
<li>négocier avec les grands parents pour garder le bébé</li>
<li>donner le bain</li>
<li>changer la couche</li>
<li>allez au garage pour la voiture</li>
<li>réparer le toit</li>
<li>changer les bouteille de gaz</li>
<li>aller chercher du bois pour la cheminée</li>
<li>etc…</li>
</ul>
</blockquote>
<p>Puis marquez ce que vous aimeriez améliorer à côté de chaque genre de
tâche.</p>
<p>C’est la base de la base pour obtenir quelque chose de factuel et
détaché des tempêtes de caca de l’émotion et des engueulades que l’on
pourrait éviter avec une meilleure communication.</p>
<p>Enfin, retenez qu’il vaut bien mieux mettre au clair les raisons de
notre désaccord que de tout le temps faire mine que tout va bien,
endurer dans son coin, haïr son/sa partenaire pour des raisons idiotes
et entrer en dépression. Rendez vous service à vous-même et à tous ceux
qui vous entourent: exprimez vous!</p>
<p>C’est aussi l’occasion de mettre en avant ce que vous aimeriez faire
ensemble et à domicile qui ne soit pas des tâches ménagères.</p>
<p>Réservez vous du temps pour casser le quotidien assez souvent, passer
du temps uniquement entre vous deux, passer du temps uniquement avec vos
amis, prendre soin de vous, prendre du temps uniquement avec vos
enfants, ou sur ces fameux projets et choses que vous souhaitez lire ou
pratiquer que vous gardez au placard mais qui vous donnent le sentiment
d’avoir vraiment rempli votre journée.</p>
<p>Notez ces choses par écrit, et nous allons voir dans la seconde
partie comment garder une vue d’ensemble sur tout cela.</p>
<h2
id="les-outils-numériques-pour-récupérer-son-attention-et-limiter-les-dispersions.">Les
outils numériques pour récupérer son attention et limiter les
dispersions.</h2>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/terminator_liquid_dog.gif" /></p>
<p>Un des problèmes de la charge mentale vient du fait que nous devons
penser à tout un tas de choses, à aller faire des vérifications avec
diverses personnes et services à des moments précis. Trier ses idées, se
rendre disponible, tout ça.</p>
<p>ça revient en gros à gérer des projets, pour plus d’infos je vous
renvoie à ce billet sur <a
href="https://www.cipherbliss.com/techniques-de-gestion-de-temps-sur-projets-personnels/">mes
méthodes de gestion de projet</a> que je préconise en fonction de
l’ampleur du truc. Spoiler: le bullet journal c’est pourri.</p>
<p>Si vous utilisez ce dont je vais vous parler vous n’aurez plus quinze
millions d’onglets qui fusent sur votre navigateur, vous n’aurez plus
peur de les fermer, et vous saurez comment vous y retrouver retrouver
entre vie pro et vie perso.</p>
<p>Vous ne serez pas surpris d’apprendre que plus on avance dans l’âge,
plus les choses demandent des efforts, et je ne parle pas ici de monter
des escaliers. Vos amis déménagent et fondent leurs familles, les gens
que vous connaissiez auparavant maturent et changent de centres
d’intérêts, tout comme vous. Vous refaites votre vie dans un autre
département, dans un autre pays, vous passez beaucoup moins de temps
dans des « soirées », vos cercles de contacts changent du tout au tout,
vos responsabilités évoluent, vous ne faites plus attention aux mêmes
détails, vous ne pensez plus les choses selon les mêmes critères. Ce
n’est plus forcément que la contrainte du prix le plus bas ou de
l’économie d’effort qu vous guide dans vos choix, vous voulez essayez
des choses qui étaient jusqu’alors impossible à envisager, vous faites
évoluer ce que vous considérez être du temps de qualité, et vous
connaissez mieux vos goûts. J’ai récemment par exemple lancé de quoi
bien gérer ma retraite, ça donne un bon un coup de vieux.</p>
<p>Au moins autant que quand on apprend que sonic a eu 30 ans. Ou autant
que quand on se met à porter des lunettes alors qu’on en a jamais porté
pendant plus de vingt cinq ans.</p>
<p>Et donc, fatalement, presque tout demande un peu plus de
préparation.</p>
<p>Surtout si vous avez un enfant, la moindre chose à faire prend bien
plus de temps, et c’est bien normal. Par exemple il est probable que
vous preniez plus de temps à préparer vos affaires et celles de vos
enfants que ne prend le temps de la plupart de vos trajets.</p>
<p>Mais ce n’est pas grave, car il existe…</p>
<p>Des solutions pour reprendre le contrôle.</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/surprise_guy_door.gif" /></p>
<p>En finir avec les liens putaclic.</p>
<p>On est sans cesse sollicité pour cliquer sur des liens qui nous
promettent de nous changer la vie, ou de nous émouvoir tellement face à
la morosité de notre quotidien qu’on se sent obligé d’aller voir. On
peut aussi se prétexter que c’est pour mourir moins bête. Mais les liens
putaclics et autres conneries sponsorisées qu’on a jamais demandé n’en
ont pas fini de nous faire perdre notre temps.</p>
<p>Voici d’ailleurs <a href="https://incroyabl.eu">un générateur de
titres putaclic</a> pour que vous sachiez les sniffer à 10 kilomètres de
distance et les éviter.</p>
<p>« Ces façons de mettre un rateau vont égailler votre journée. J’ai
laisser couler une larme ! », « Top 30 des taoutages ratés. C’était si
simple ! », « Nous somme choqués par ce témoignage. Franchement
décevant. » etc…</p>
<p>Alors il existe une méthode simple quand on est tenté de suivre un
lien: le mettre dans sa poche pour le lire éventuellement plus tard.</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/sevrus_snape_bus.jpg" /></p>
<p>Dans firefox, vous avez Pocket qui fait cela. Perso j’utilise
Framabag. C’est simple, quand vous souhaitez lire un truc ou voir une
vidéo vous faites un clic droit dessus et vous choisissez « ajouter à <a
href="https://getpocket.com/">pocket</a>/ <a
href="https://www.framabag.org">framabag</a>« . Comme ça, un peu plus
tard, quand vous aurez le temps de vous poser vous pourrez prendre votre
temps en consultant des choses que vous souhaitiez réellement lire à la
base.</p>
<p>Vous pourrez ainsi vous rendre compte que la plupart de ces fameux
liens qui vous demandaient avec force de les consulter tout de suite ne
sont pas si importants et n’ont pas changé votre vie pour quelque chose
de meilleur.</p>
<p>Un autre bon moyen d’être moins sollicité par des trucs dont vous
n’avez que faire, c’est de vous installer un adblocker, comme ublock
Origin (pour <a
href="https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm">chrome</a>/
<a
href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">firefox</a>)</p>
<p>Vous pourrez alors commencer à vous demander pourquoi vous passez
tellement de temps sur des flux d’actualités infinis qui capturent toute
votre attention sans vous demander votre avis, et vous laissent sur
votre faim à la fin de la journée. <a
href="https://tykayn.fr/2018/chers-amis-disparus-dans-les-limbes-des-casinos-sociaux/">C’est
ce que font les réseaux sociaux et les casinos</a>.</p>
<p>Et plus vite vous vous en rendrez compte, plus vite vous pourrez
commencer à les utiliser de façon consciente et vous en détacher à votre
convenance pour enfin faire des choses qui vous intéressent.</p>
<h3
id="avoir-une-vision-globale-de-ce-à-quoi-lon-doit-penser-grâce-à-un-agenda-en-ligne.">Avoir
une vision globale de ce à quoi l’on doit penser grâce à un agenda en
ligne.</h3>
<p>Et si c’était les évènements qui se rappelaient à nous au bon moment,
au lieu d’avoir tout le temps à y penser?</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2017/11/odgn4Ry_700wa_0.jpg" /></p>
<p>Beaucoup de gens ont un smartphone, mais assez peu utilisent des
agendas numériques sur leur téléphone. C’est bien dommage. Alors créez
un agenda numérique et faites en sorte de le partager avec votre
conjoint de sorte que lui/elle aussi puisse le mettre à jour sur des
choses qui vous concernent tous les deux. les options de partage se
trouvent dans les propriétés d’agenda, sur google calendar et d’autres
c’est pareil.</p>
<p>Comme ça vous n’aurez pas en plus à penser à rappeler à l’autre que
vous avez des choses qui arrivent bientôt.</p>
<p>Votre smartphone se chargera pour vous de ce boulot de rappel. Vous
venez d’avoir rendez-vous avec votre médecin et il vous propose de vous
revoir dans trois mois? Notez-le tout de suite dans votre agenda. Votre
chat doit se faire revisiter tous les ans? faites un évènement
récurrent.</p>
<p>Faites plusieurs agendas afin de ne pas polluer votre partenaire de
notifications qui ne le concernent pas.</p>
<p>Ne mettez pas vos réunions de boulot dans votre agenda partagé.</p>
<p>Mais c’est un bon endroit pour prévoir de recevoir des amis ou de
partir en vacances.</p>
<p>Créez un agenda spécifique à la gestion des RDV et évènements
relatifs à vos enfants, que vous pourrez partager également. Utiliser
DES agendas évite énormément de charge mentale inutile.</p>
<h3
id="pour-les-tâches-nayant-pas-spécialement-de-date-utiliser-un-tableau-kanban">Pour
les tâches n’ayant pas spécialement de date, utiliser un tableau
kanban</h3>
<p>Ce que je vous conseille, c’est <a
href="https://www.framaboard.org">framaboard</a>, mais beaucoup de
choses existent dans le genre comme Trello.</p>
<p><img src="https://framaboard.org/img/slide-tableau.png" /></p>
<p>Si vous utilisez le tableau de chez <a
href="https://nextcloud.com/">nextcloud</a> (qui se nomme Deck), il
permet d’être relié à votre agenda, ce qui est top top. L’agenda google
ne vous le permet pas, en plus d’être chez gougeul, ce qui est sale.
Donc, un tableau kanban, c’est comme un tableau sur lequel on aurait des
post-it, mais sans abattre des arbres, et que vous pouvez gérer sur
votre smartphone aussi bien que sur ordi.</p>
<p>Avoir un tableau en ligne vous présentant ces trois catégories :</p>
<ul>
<li>les choses à faire</li>
<li>les choses en cours</li>
<li>et les choses faites</li>
</ul>
<p>Vous permettra de gagner énormément en visibilité. Il vous suffira
d’alimenter ces colonnes par des cartes décrivant des choses que vous
pouvez faire séparément, de glisser déposer ces cartes d’une colonne à
l’autre, compléter les informations des cartes au fur et à mesure.</p>
<p>Et quand vous cherchez à savoir ce qui est le plus urgent à régler
vous n’aurez pas à fouiller parmi douze millions d’emails différents, le
plus urgent dans vos trucs à faire, ce sont les tâches les plus haut
placées.</p>
<p>Donc, rangez vos tâches par glisser déposer de telle sorte que le
haut de la pile soit ce dont vous devez vous occuper en premier.</p>
<h3 id="prendre-des-notes-pour-ne-plus-avoir-à-y-penser.">Prendre des
notes pour ne plus avoir à y penser.</h3>
<p>Pour les notes, nextcloud dispose d’une appli interne, et il existe
bien entendu une solution libre et respectueuse de la vie privée -comme
toujours chez framasoft- : <a
href="https://framanotes.org/">framanotes</a> accessible aussi via une
application mobile nommée Turl. Mais bien entendu d’autres choses du
genre existent.</p>
<h3 id="se-donner-une-discipline.">Se donner une discipline.</h3>
<p>C’est la chose la plus compliquée à mettre en place: de la
discipline.</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/ill_be_back_terminator.jpg" /></p>
<p>C’est pourquoi je la mentionne en dernier, utiliser les outils
précédemment mentionné vous fera gagner du temps et de la qualité de
vie, mais avoir de la régularité dans vos occupation est une chose d’un
autre niveau. Du moins, en apparence. Einstein disait qu’il est plus
facile de casser un atome qu’un préjugé. Rompre une habitude est plus
difficile que ce préjugé.</p>
<p>quand j’étais gosse, à l’école primaire,  j’avais pris pour habitude
de me mâchouiller les articulations sur l’arrière de la main en étant
concentré sur un truc à faire. Pour d’autres, c’est se ronger les
ongles, ou les peaux de doigt. Ce qui est mal.</p>
<p>Se débarrasser de cette habitude a été plus facile que ce à quoi je
ne m’attendais.</p>
<p>C’est pareil pour beaucoup de choses en fait.</p>
<p>Siraj Raval, un type qui vulgarise l’intelligence artificielle et a
fondé l’école de l’AI parle de discipline en mettant en avant que la
chose qui vous donnera plus de pouvoir sur votre quotidien est votre
capacité à refuser de faire ce que d’autres vous demandent, savoir dire
non.</p>
<p><strong>Pour être réellement concentré sur ce que l’on veut faire, il
faut savoir dire non aux autres, mais aussi se dire non à
soi-même.</strong></p>
<p>Refuser d’aller consulter des sites qui vont nous fournir une petite
récompense d’endorphine immédiate à la vue d’une image marrante ou d’une
vidéo, puis une autre, puis une autre…</p>
<p>ou bien de répondre un commentaire dithyrambique sur un sujet qui
vous énerve, et passer votre vie à tenter de convaincre quelqu’un qu’il
a tort d’avoir un point de vue différent du vôtre. Facebook et twitter
sont très forts à ce jeu là, ils considèrent que si vous argumentez sur
un post ou une photo, c’est que ça vous intéresse de voir d’avantage de
choses dans ce genre. ça fait partie de la fonction de musculation de
l’algo qui détermine ce que vous devez voir dans vos fils d’actu, parce
que ça vous permet d’afficher plus de pub.</p>
<p>Les réponses en actions diverses à des stimuli qui nous énervent sont
plus fortes que pour les autres émotions. C’est moche. Mais si ça permet
de faire son beurre, un réseau social qui souhaite gagner de l’argent ne
va pas s’en priver. <a
href="https://ploum.net/comment-facebook-gagne-de-largent/">Si vous
croyez que Facebook gagne de l’argent honnêtement</a>, ça risque de vous
décevoir.</p>
<p>En fait, si vous ne souhaitez plus voir de choses qui vous
insupportent, le mieux que vous pouvez faire sur un réseau social est de
ne pas interagir avec.</p>
<p>S’éloigner des fast-food de l’attention, petit à petit, ou d’un seul
coup, ne peut vous être que bénéfique.</p>
<p>Cette image est donc tout à fait à propos:<img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/invisible_sandwich.jpg" /></p>
<p>Une technique très couillue consiste à se coucher et se lever à des
heures assez constantes.</p>
<p>Faciliter l’endormissement en ne regardant pas de série, de film, ou
d’écran pendant 3 heures avant de se mettre au lit. Il est tentant de
s’abrutir de niaiseries pour « se vider la tête », ou de vouloir régler
« encore deux trois trucs et faire un email » aux heures où l’on est le
plus fatigué de sa journée, mais croyez-moi c’est vraiment une idée de
merde.</p>
<p>Vous risquez de devoir ensuite corriger vos erreurs d’inattention le
lendemain et les jours qui suivent.</p>
<p>C’est l’occasion de jouer en famille, de vraiment discuter, de lire
des vrais bouquins, pourquoi pas de sortir de chez soi, se bouger le cul
en faisant un brin de sport, sociabiliser, voir des gens en live, ou
tout simplement profiter d’un moment de calme.</p>
<p><strong>Vous devez tolérer d’arriver à ne pas achever vos projets en
une seule fois et d’une seule traite.</strong></p>
<p>Il vous faut découper vos ambitions en de nombreux petits pas faciles
à achever.</p>
<p>Vous devez faire d’avantage confiance en vos lendemains.</p>
<p>Essayez donc et devenez <em>fabulous</em> !</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2018/10/absolutely_fabulous.jpg" /></p>
<p>Et si vous avez des astuces pour améliorer votre gestion du quotidien
et réduire la charge mentale, engagez vous avec Cipher Bliss, et faites
les tourner en commentaire</p>
<h1 id="old-version">Old version:</h1>
<h2 id="comment-se-délester-de-la-charge-mentale">comment se délester de
la charge mentale</h2>
<p>arrivent bientôt. Votre smartphone se chargera pour vous de ce boulot
de rappel. Vous venez d'avoir rendez-vous avec votre médecin et il vous
propose de vous revoir dans trois mois? Notez-le tout de suite dans
votre agenda. Votre chat doit se faire revisiter tous les ans? faites un
évènement récurrent. Faites plusieurs agendas afin de ne pas polluer
votre partenaire de notifications qui ne le concernent pas. Ne mettez
pas vos réunions de boulot dans votre agenda partagé. Mais c'est un bon
endroit pour prévoir de recevoir des amis ou de partir en vacances.
Créez un agenda spécifique à la gestion des RDV et évènements relatifs à
vos enfants, que vous pourrez partager également. Utiliser DES agendas
évite énormément de charge mentale inutile.</p>
<h3
id="pour-les-tâches-nayant-pas-spécialement-de-date-utiliser-un-tableau-kanban">Pour
les tâches n'ayant pas spécialement de date, utiliser un tableau
kanban</h3>
<p>Ce que je vous conseille, c'est <a
href="https://www.framaboard.org">framaboard</a>, mais beaucoup de
choses existent dans le genre comme Trello. <img
src="https://framaboard.org/img/slide-tableau.png" /> Si vous utilisez
le tableau de chez <a href="https://nextcloud.com/">nextcloud</a> (qui
se nomme Deck), il permet d'être relié à votre agenda, ce qui est top
top. L'agenda google ne vous le permet pas, en plus d'être chez gougeul,
ce qui est sale. Donc, un tableau kanban, c'est comme un tableau sur
lequel on aurait des post-it, mais sans abattre des arbres, et que vous
pouvez gérer sur votre smartphone aussi bien que sur ordi. Avoir un
tableau en ligne vous présentant ces trois catégories :</p>
<ul>
<li>les choses à faire</li>
<li>les choses en cours</li>
<li>et les choses faites</li>
</ul>
<p>Vous permettra de gagner énormément en visibilité. Il vous suffira
d'alimenter ces colonnes par des cartes décrivant des choses que vous
pouvez faire séparément, de glisser déposer ces cartes d'une colonne à
l'autre, compléter les informations des cartes au fur et à mesure. Et
quand vous cherchez à savoir ce qui est le plus urgent à régler vous
n'aurez pas à fouiller parmi douze millions d'emails différents, le plus
urgent dans vos trucs à faire, ce sont les tâches les plus haut placées.
Donc, rangez vos tâches par glisser déposer de telle sorte que le haut
de la pile soit ce dont vous devez vous occuper en premier.</p>
<h3 id="prendre-des-notes-pour-ne-plus-avoir-à-y-penser.">Prendre des
notes pour ne plus avoir à y penser.</h3>
<p>Pour les notes, nextcloud dispose d'une appli interne, et il existe
bien entendu une solution libre et respectueuse de la vie privée -comme
toujours chez framasoft- : <a
href="https://framanotes.org/">framanotes</a> accessible aussi via une
application mobile nommée Turl. Mais bien entendu d'autres choses du
genre existent.</p>
<h3 id="se-donner-une-discipline.">Se donner une discipline.</h3>
<p>C'est la chose la plus compliquée à mettre en place: de la
discipline. <a
href="https://www.cipherbliss.com/wp-content/uploads/2018/10/ill_be_back_terminator.jpg">[[<span>https://www.cipherbliss.com/wp-content/uploads/2018/10/ill_be_back_terminator.jpg</span></a>]]
C'est pourquoi je la mentionne en dernier, utiliser les outils
précédemment mentionné vous fera gagner du temps et de la qualité de
vie, mais avoir de la régularité dans vos occupation est une chose d'un
autre niveau. Du moins, en apparence. Einstein disait qu'il est plus
facile de casser un atome qu'un préjugé. Rompre une habitude est plus
difficile que ce préjugé. quand j'étais gosse, à l'école primaire, 
j'avais pris pour habitude de me mâchouiller les articulations sur
l'arrière de la main en étant concentré sur un truc à faire. Pour
d'autres, c'est se ronger les ongles, ou les peaux de doigt. Ce qui est
mal. Se débarrasser de cette habitude a été plus facile que ce à quoi je
ne m'attendais. C'est pareil pour beaucoup de choses en fait. Siraj
Raval, un type qui vulgarise l'intelligence artificielle et a fondé
l'école de l'AI parle de discipline en mettant en avant que la chose qui
vous donnera plus de pouvoir sur votre quotidien est votre capacité à
refuser de faire ce que d'autres vous demandent, savoir dire non. *Pour
être réellement concentré sur ce que l'on veut faire, il faut savoir
dire non aux autres, mais aussi se dire non à soi-même.* Refuser d'aller
consulter des sites qui vont nous fournir une petite récompense
d'endorphine immédiate à la vue d'une image marrante ou d'une vidéo,
puis une autre, puis une autre… ou bien de répondre un commentaire
dithyrambique sur un sujet qui vous énerve, et passer votre vie à tenter
de convaincre quelqu'un qu'il a tort d'avoir un point de vue différent
du vôtre. Facebook et twitter sont très forts à ce jeu là, ils
considèrent que si vous argumentez sur un post ou une photo, c'est que
ça vous intéresse de voir d'avantage de choses dans ce genre. ça fait
partie de la fonction de musculation de l'algo qui détermine ce que vous
devez voir dans vos fils d'actu, parce que ça vous permet d'afficher
plus de pub. Les réponses en actions diverses à des stimuli qui nous
énervent sont plus fortes que pour les autres émotions. C'est moche.
Mais si ça permet de faire son beurre, un réseau social qui souhaite
gagner de l'argent ne va pas s'en priver. <a
href="https://ploum.net/comment-facebook-gagne-de-largent/">Si vous
croyez que Facebook gagne de l'argent honnêtement</a>, ça risque de vous
décevoir. En fait, si vous ne souhaitez plus voir de choses qui vous
insupportent, le mieux que vous pouvez faire sur un réseau social est de
ne pas interagir avec.   S'éloigner des fast-food de l'attention, petit
à petit, ou d'un seul coup, ne peut vous être que bénéfique. Cette image
est donc tout à fait à propos:<a
href="https://www.cipherbliss.com/wp-content/uploads/2018/10/invisible_sandwich.jpg">[[<span>https://www.cipherbliss.com/wp-content/uploads/2018/10/invisible_sandwich.jpg</span></a>]]
Une technique très couillue consiste à se coucher et se lever à des
heures assez constantes. Faciliter l'endormissement en ne regardant pas
de série, de film, ou d'écran pendant 3 heures avant de se mettre au
lit. Il est tentant de s'abrutir de niaiseries pour "se vider la tête",
ou de vouloir régler "encore deux trois trucs et faire un email" aux
heures où l'on est le plus fatigué de sa journée, mais croyez-moi c'est
vraiment une idée de merde. Vous risquez de devoir ensuite corriger vos
erreurs d'inattention le lendemain et les jours qui suivent. C'est
l'occasion de jouer en famille, de vraiment discuter, de lire des vrais
bouquins, pourquoi pas de sortir de chez soi, se bouger le cul en
faisant un brin de sport, sociabiliser, voir des gens en live, ou tout
simplement profiter d'un moment de calme. <strong>Vous devez tolérer
d'arriver à ne pas achever vos projets en une seule fois et d'une seule
traite.</strong> Il vous faut découper vos ambitions en de nombreux
petits pas faciles à achever. Vous devez faire d'avantage confiance en
vos lendemains. Essayez donc et devenez <em>fabulous</em>! <a
href="https://www.cipherbliss.com/wp-content/uploads/2018/10/absolutely_fabulous.jpg">[[<span>https://www.cipherbliss.com/wp-content/uploads/2018/10/absolutely_fabulous.jpg</span></a>]]
Et si vous avez des astuces pour améliorer votre gestion du quotidien et
réduire la charge mentale, engagez vous avec Cipher Bliss, et faites les
tourner en commentaire :D</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

360
html-websites/cipherbliss_blog/2019/cipherbliss_blog_186_debuter-sur-openstreetmaps/index.html Normal file
View File

@ -0,0 +1,360 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1119</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2019-02-22 13:46:40&gt;</li>
<li>modifié: &lt;2019-02-25 15:17:35&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="débuter-sur-openstreetmap">Débuter sur openstreetmap</h2>
<blockquote>
<p>L'information a de la valeur. Avec la bonne information et une bonne
compréhension, les individus et communautés sont plus à même d'améliorer
leurs vies et mieux anticiper l'avenir.</p>
<p>-<a
href="https://learnosm.org/fr/beginner/introduction/">LearnOSM</a>,
guide du débutant pour openstreetmap</p>
</blockquote>
<p>OpenStreetMap c'est trop fun, et c'est surtout un logiciel libre
ainsi qu'une base de données ouverte. C'est aussi une meilleure source
de vérité sourcée et vérifiée par des millions de gens - amateurs et
professionels - que ne le sera jamais Google Maps et les autres services
du genre qui ne permettent pas tellement de les corriger.</p>
<p>Petit exemple de l'ignorance de Gmaps avec le tag #googleKnowsNothing
sur <a href="https://mastodon.cipherbliss.com">mastodon</a>:</p>
<p>En Décembre j'ai donc décidé de me lancer dans la cartographie de
lieux que je connaissais bien pour mettre ma pierre à l'édifice. *La
pratique recommandée consiste à ne modifier sur les cartes que les
éléments que l'on est certain de connaître et à demander de l'aide aux
autres dès qu'on en a besoin*.</p>
<p>En fait, contribuer à OSM est très simple à faire sans avoir à
utiliser autre chose qu'un navigateur web tel que Firefox.</p>
<p>Il suffit de créer un compte et d'aller dans l'éditeur de carte en
ligne (qui se nomme ID), de zoomer assez près (un niveau de zoom de 18
est correct) pour afficher les détails, de faire ses modifs comme
rajouter des points, des chemins, ou des polygones, puis de les
enregistrer. Le principe de base c'est ça, et ça reste pas plus
compliqué que ça.</p>
<h2 id="où-trouver-de-laide">Où <a
href="https://wiki.openstreetmap.org/wiki/FR:Aide">trouver de
l'aide</a>:</h2>
<ul>
<li>Sur <a
href="https://wiki.openstreetmap.org/wiki/FR:Page_principale">le wiki
OSM</a>, qui est une mine d'or ouverte tout autant à la contribution que
les cartes. Il répondra à la plupart de vos questions, et en plusieurs
langues. Attention, votre compte OSM n'est pas le même que celui pour le
wiki, ce sont deux choses différentes.</li>
<li>sur <a href="https://t.me/osmfr">le canal Telegram francophone</a>
que j'ai créé en Décembre 2018 et où je squatte,</li>
<li>ou <a href="https://t.me/openstreetmap">le canal OpenSreetMap
international</a> anglophone qui comporte à peu près 500 personnes
prêtes à s'entraider.</li>
<li>Trouvez de l'aide avec des gens via <a
href="https://forum.openstreetmap.fr">le forum français</a>,</li>
<li>Ou encore sur d'autres endroits répertoriés dans le wiki.</li>
</ul>
<h2 id="premières-choses-à-connaître">Premières choses à connaître</h2>
<p>Maintenant que vous savez où trouver de l'aide avec des vrais gens,
vous pourrez sans doute cartographier des choses basiques près de chez
vous. Les boutiques, les centres culturels, les maisons. Vous serez
surpris de voir combien de personnes ont déjà contribué aux cartes près
de chez vous, même si c'est un trou paumé comme chez moi au fin fond de
l'Essonne. Et vous serez également surpris de voir comme dans des
grosses villes on peut trouver des énormités dans Gmaps qui sont déjà
corrigées dans OSM.</p>
<p>Beaucoup de commerces n'ont pas leurs horaires indiquées sur le net,
c'est pourtant très pratique, surtout si vous voulez encourager le
commerce local par exemple, ou animer la vie culturelle de votre
quartier. Je vous conseille grandement de rentrer des heures
d'ouvertures avec l'outil <a
href="https://projets.pavie.info/yohours/">YoHours</a></p>
<p>C'est une page web super pratique qui permet de ne pas avoir à écrire
les heures dans un format précis mais juste de sélectionner des plages
horaires, pour les copier coller dans l'attribut de notre point
d'intérêt.</p>
<p> </p>
<h2 id="les-décalages-dimage-satellite">Les décalages d'image
satellite</h2>
<p>Une chose perturbante quand on commence à faire de la cartographie
est de voir comme pas mal de bâtiments sont décalés par rapport à leur
image satellite. Il faut savoir que vous pouvez afficher des fonds de
plan en provenance de plusieurs ressources de satellites ou de cadastre
officiel, et que <strong>vous avez le droit de les décaler, ça
n'affectera pas tout le monde</strong>.</p>
<p><img
src="https://learnosm.org/images/beginner/id-editor_image15.png" /></p>
<p>Les gens éditant les cartes n'utiliseront pas forcément le même fond
de plan et les mêmes décalages localement et c'est ainsi que l'on peut
se retrouver à voir un groupe de maisons alignées avec l'image sattelite
que l'on voit, alors que la rue d'a côté à un décalage de 5 mètres. Les
fonds de plan satellites sont mis à jour régulièrement et vous serez
d'ailleurs ravis d'apprendre que le méridien de greenwitch change lui
aussi de place tous les ans.</p>
<p>Le déplacement de nombreux ensembles de points n'est pas recommandé
avec l'éditeur web nommé ID, je vous recommande de ne pas vous plonger
là dedans pour le moment et de faire au plus cohérent avec les éléments
voisins.</p>
<h2 id="applications-mobiles"><br />
Applications mobiles</h2>
<p><img src="https://osmand.net/images/logo.png" /></p>
<p><a href="https://maps.me">Maps.me</a> ou <a
href="https://osmand.net/">OSMand+</a> permettent de lier son compte
openstreetmap (ou non) et de trouver des itinéraires hors ligne et en
ligne, afficher différents fonds et éléments de cartes, des points
d'intérêts, dessiner des traces GPS en marchant, à vélo ou autre, et de
contribuer à OSM directement dans l'application. ce qui reste bien moins
rapide que si on le fait depuis un ordinateur à écran plus grand avec
une souris et un logiciel adapté comme <a
href="https://josm.openstreetmap.de/">JOSM</a> (qui nécessite un
téléchargement de logiciel en Java) ou <a
href="https://www.openstreetmap.org/edit?editor=id">ID</a> (l'éditeur en
page web par défaut qui apparait quand on clique sur "modifier" sur
openstreetmap.org, il y en a bien sûr plein d'autres). Perso j'ai une
bonne préférence pour OSMand+, choppé via <a
href="https://f-droid.org/">f-droid</a> au lieu du playstore.</p>
<p>Pour contribuer aux chemins de photos géolocalisées il existe <a
href="https://www.mapillary.com">Mapillary</a>. Pas mal de cyclistes
l'utilisent pour cartographier partout où une goueul car ne saurait
aller, mais ça fonctionne aussi en voiture avec des kits de montage. On
peut régler les intervalle entre images, prendre juste une image, et
s'en servir pour contribuer ensuite aux plans. Mapillary propose
d'ailleurs des ensembles de reconnaissances d'image pour trouver des
éléments, et va automatiquement flouter les plaques d'immatriculation et
les visages des gens.</p>
<h2 id="traces-gps"><br />
Traces GPS</h2>
<p> </p>
<p><img
src="https://photographyontherun.com/content/binary/TrailerCynTrippetGoogleEarth.jpg" /></p>
<p>Vous pouvez par exemple faire un tracé de chemin ou de ruisseau en
forêt en suivant une trace GPS, mais ce n'est pas seulement utile pour
les endroits difficile d'accès en véhicules motorisés ou non. Sur mobile
vous pouvez utiliser votre GPS et l'appli OSMand par exemple, vous allez
dans les pramètres, et activez les traces GPX. une fois votre chemin
terminé vous pouvez cliquer sur "enregistrer". l'appli ne vous proposera
pas d'enregistrer votre chemin si vous n'avez pas le GPS activé.</p>
<p>Après avoir bien compris que selon ce que l'on a sélectionné (point,
chemin, ou polygone) on ne peut pas mettre n'importe quel
attribut,<br />
la plupart de mes questions ont le plus souvent concerné la recherche de
nom correct pour qualifier un point d'intérêt <a
href="https://wiki.openstreetmap.org/wiki/FR:Comment_cartographier_un...">"comment
cartographier un …"</a></p>
<p> </p>
<p>OSM vous permet de communiquer avec les autres auteurs</p>
<p>Il m'est arrivé de recevoir des demandes d'informations
supplémentaires sur une contribution (un ensemble de plusieurs
modifications) que j'aurai fait. La personne me remerciait d'avoir
contribué dans une ville que je connais bien et me demandais si j'avais
des infos sur telle ou telle piste cyclable de cette ville.</p>
<p>Cette facilité de communication est une des grandes forces d'OSM
permettant une réelle qualité des données.</p>
<h2 id="aller-plus-loin-avec-josm">Aller plus loin avec JOSM</h2>
<p>il vous suffira de télécharger <a
href="https://josm.openstreetmap.de/">le logiciel JOSM</a>, vous
connecter avec votre compte OSM, et de <a
href="https://learnosm.org/fr/beginner/">suivre le guide du débutant</a>
qui est très clair et concis.</p>
<p>Apprennez à corriger vos erreurs et celles des autres avec le
validateur Osmose</p>
<p>La validation de vos modifications se fait automatiquement dans
n'importe quel éditeur. Mais Osmose vous permet de voir sur une région
donnée quelles erreurs ont été commises et pourquoi. Vous pouvez filtrer
les contrôles de validation pour vous concentrer sur les erreurs plus ou
moins importantes, ou sur certaines d'un genre particulier. Cela vous
permettra de vous améliorer plus rapidement.</p>
<p> </p>
<p>Venez donc me faire coucou sur <a href="https://t.me/osmfr">le canal
Telegram OSMfr</a>.</p>
<p>Bon mappage ;)</p>
<p></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

297
html-websites/cipherbliss_blog/2019/cipherbliss_blog_187_une-vraie-matiere-de-programmation-informatique-au-lycee/index.html Normal file
View File

@ -0,0 +1,297 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1137</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2019-01-09 15:44:42&gt;</li>
<li>modifié: &lt;2019-01-09 15:44:42&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="une-vraie-matière-de-programmation-informatique-au-lycée">Une
vraie matière de programmation informatique au lycée</h2>
<p>ça a fait jazzer pas mal de monde, mais l'apprentissage de la
programmation informatique arrive au lycée. Et <a
href="https://www.cipherbliss.com/wp-content/uploads/2019/01/PPL18_Sciences-numeriques-technologie_COM_2e_1025713.pdf">le
programme de seconde est disponible en ligne.</a></p>
<h2 id="parmi-ces-objections">Parmi ces objections:</h2>
<p>la méthode d'apprentissage qui comme dans beaucoup de matières ne
valorise pas l'apprentissage par l'erreur et décourage la créativité. La
méthode de la régurgitation de trucs appris "par coeur" étant la norme.
Les objectifs de l'éducation nationale étant d'inculquer des valeurs
bourgeoises aux pégus tout en leur apprenant à ne pas faire de remous,
et de faire office de crèche pendant que leurs parents prolétaires
permettent aux plus riches de rester les plus riches génération après
génération, on a du mal à imaginer que la mise en place d'un tel cours
dans la conformité de ces deux principes soit bien adaptée. L'ingénierie
nécessite des aprentissages qui s'adaptent dans le temps, de la logique,
de la créativité artistique, de l'éloquence pour défendre ses idées, du
dialogue, des choix multiples, la compréhension des conséquences
politiques aux choix techniques et de l'esprit critique. J'ai
principalement lu le but de faire de la main d'œuvre bêtement comme on
en fait dans les autres matières, (des pisseurs de code sans éthique,
formatés et corvéables). Jusque là, pas de prof compétent car pas de
réelle matière, pas de diplôme spécialisé contrairement aux autres
matières. Le tout relégué à quelques profs qui se trouvent avoir comme
matière un truc qu'on peut assimiler à l'informatique quand on y connaît
rien, (un peu comme on refile l'éducation civique aux profs d'histoire à
qui on distribue une version de l'histoire qui glorifie le pays en
mettant de côté les aspects bien sales des relations internationales
passées et présentes. Souvenez vous du sujet des colonies françaises)
L'utilisation de Windows comme seul exemple laissant comme toujours le
monopole à des logiciels privateurs de libertés et une mainmise de
Microsoft, aucune vision de l'impact des décisions politiques qui
considère les utilisateurs d'internet comme de simples consommateurs,
alors que tout le monde sait bien que sur internet on peut y faire bien
d'autres choses que juste des achats en ligne. C'est un espace de vie,
un lieu d'échanges, une source de connaissances, un lieu de rencontre,
de communication. La confusion entre page et ressource. La différence
est de taille. Pas de notion de travail d'équipe, ce qui est déjà
vachement dommage dans les autres matières car la notion de société, de
prises de décisions à plusieurs et de travail sont bien plus souvent des
histoires de travail en équipe que d'égocentrisme et de réussite
"personnelle". Vous pouvez étudier Bourdieu à propos de l'égalité des
chances, et la notion de classe sociale pour comprendre à quel point on
se fout de votre gueule quand vous entendrez parler du mythe du
"self-made man". La prétendue neutralité politique (au sens des
décisions concernant la vie de la cité) de l'aspect technique et de ses
importantes conséquences. Quand vous décidez de mettre en place du
réseau qui permet de télécharger (download) mais pas de téléverser
(upload) correctement, vous limitez techniquement l'envie des gens de
contribuer, par exemple. Et plus vous êtes dépendant d'un gros acteur,
plus vous pâtissez de ses décisions de censure, ainsi que de ses
failles. Pour aller plus loin dans cet aspect je vous recommande
chaudement le livre <a
href="https://www.cyberstructure.fr">Cyberstructure</a> de Bortzmeyer
que j'ai dévoré récemment. L'internet que l'on vous vend via des
machin-box et des services tenus en quasi monopole par des GAFAM est
aussi moisi que celui du minitel et accroît démesurément l'emprise
néfaste de ces quelques sociétés sur de nombreux aspects de notre vie.
Alors que si on allait vers plus de décentralisation comme c'était le
cas au débuts d'internet, et que c'est toujours techniquement jouable,
on sortirait enfin du modèle du minitel qui est asservissant. Benjamin
Bayard l'expliquait très bien dans sa conférence qui vaut de l'or: <a
href="https://peertube.cipherbliss.com/videos/watch/9a8642c0-62f0-4060-95e4-088de9c5db00">Benjamin
Bayart - Internet libre ou Minitel 2.0 - CipherBliss PeerTube</a>
Revenons donc à nos moutons concernant la découverte de la culture des
interweb selon l'éducation nationale.</p>
<h2 id="en-fait-le-programme-est-plein-de-bonnes-nouvelles-que-je-ne">En
fait le programme est plein de bonnes nouvelles que je ne</h2>
<p>m'attendais pas à voir:</p>
<ul>
<li>l'aspect éthique est abordé,</li>
<li>l'histoire d'internet et son fonctionnement (il manque cependant la
notion importante de logiciel libre dans la réussite de déploiement
international du protocole BGP, car d'autres choses avaient été tentées
avant mais comme elles n'étaient pas libres elles n'avaient jamais
permis le partage du protocole au niveau mondial. Et un internet qui
n'est pas mondial ce n'est tout simplement pas un internet)</li>
<li>la distinction entre web et internet.</li>
<li>de la vraie littératie numérique, car nous ne savons pas nous servir
d'un ordinateur, et que nous échouons à voir les ordinateurs qui sont
dans nos téléphones et autres objets de l'<a
href="https://boingboing.net/2017/05/03/bad-design-thinking.html">internet
of shit</a>.</li>
<li>le sujet des "logiciels libres multi-auteurs"</li>
<li>la notion de vie privée, les traces laissées par notre passage en
ligne chez d'autres machines,</li>
<li>les bulles de filtrage dénoncées</li>
<li>un bout d'éducation à l'esprit critique, si si</li>
<li>des travaux pratiques avec Open Street Maps</li>
<li>l'autodéfense numérique.</li>
</ul>
<p>  Petits bémols: Bon, on a toutefois des gens dans l'éducation
nationale qui mettent dans des cryptes des trucs que les gens normaux
chiffrent. je vous jure que ça a son importance, surtout quand on
prétend éduquer les gens, si on s'embrouille dans le vocabulaire c'est
pas bien sérieux.   Bref, ne jettons pas le bébé avec l'eau du bain pour
l'instant, ça s'annonce mieux que ce à quoi je m'attendais et mieux que
ce que j'ai pu connaître quand j'étais au lycée il y a fort
longtemps.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

280
html-websites/cipherbliss_blog/2019/cipherbliss_blog_201_lappel-du-collectif-nofakescience-sur-le-traitement-desastreux-de-la-science-dans-les-medias/index.html Normal file
View File

@ -0,0 +1,280 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1302</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2019-07-21 11:01:10&gt;</li>
<li>modifié: &lt;2019-07-21 11:30:12&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2
id="lappel-du-collectif-nofakescience-sur-le-traitement-désastreux-de-la-science-dans-les-médias">l'appel
du collectif noFakeScience sur le traitement désastreux de la science
dans les médias</h2>
<p>; Le Bars Hervé, Ingénieur, membre de l'Association française pour
l'information scientifique ; Lecarpentier Justin, Documentariste -
Docteur en Histoire ; Ledolley Étienne, Journaliste scientifique ;
Lefebvre Marie Docteure en géochimie ; Lefeuvre Jean-Denis Ingénieur
ISEP , juriste ; Lehn Jean-Marie Prix Nobel de Chimie ; Lemoine Régis
Ingénieur Généraliste, Directeur Général Industrie Agroalimentaire ; Le
Pen Janic, Docteur en Biologie Cellulaire, Cancérologie ; Leray Clément
Ingénieur en vibroacoustique ; Lesage Nelly, Journaliste ; Lesggy Mac,
Ingénieur Agronome, animateur de e=m6 ; Leulier François, Docteur en
biologie ; Locatelli Nicolas, Professeur agrégé &amp; Docteur en
Physique ; Louis Tania, Docteure en biologie et médiatrice scientifique
; Maignen Francois, Pharmacien statisticien ; Maillard Julien,
Coordinateur technique d'expositions scientifiques ; Majeri Kasmaei Sam,
Etudiant en médecine ; Malabirade Antoine, Ingénieur, docteur en chimie
; Mangin Thomas Doctorant en Psychologie ; Maniere Sandrine, Médecin ;
Marcel Baptiste Ingénieur informatique, Docteur en électronique ; Martin
Florent Ingénieur en Informatique, membre de l'Observatoire Zététique ;
Mathurin Théo, Ingénieur de recherche à l'Université d'Artois ; Ménard
Gerbold Chercheur post-doctoral en électrodynamique quantique ; Merlier
Elodie, Docteure en Ecologie ; Mesnage Robin, Docteur en Biologie
Cellulaire et Moléculaire ; Messina Aletheia Marina, Doctorante en
Bioingénierie microfluidique, Vice-présidente de l'Observatoire
Zététique ; Meyer Rodolphe Vulgarisateur scientifique ; Michel
Christophe Vidéaste du projet Hygiène Mental ; Midoux Cédric,
Bioinformaticien ; Monmarché Pierre, Maître de conférences en
mathématiques ; Montigaud Yoann, Doctorant/pharmacien ; Montpetit
Jonatan, Scientifique en biologie/agronomie ; Morel François,
Chirurgien/vulgarisateur ; Mouden Charlotte, Docteur en biologie ;
Moulin Cécile, Doctorante en bioinformatique ; Moussaid Mehdi, Chercheur
en sciences cognitives ; Muller Quentin, Chercheur post-doctoral en
biologie ; Naud Michel, Ancient président l'Association française pour
l'information scientifique ; Negrel Jean Chercheur en sciences polaires
et vulgarisateur ; Noirel Josselin Maître de conférences ; Otten Leon,
Professeur de biologie moléculaire végétale émérite ; Panet Marie Anne,
Médecin ; Paris Alexandre, Doctorant en mécanique des fluides ; Pérez
Noémie Médecin ; Perrin Anne Expert-conseil scientifique Science risque
et société ; Petigny Loïc, Docteur en Chimie ; Periot Robert, Ingénieur
; Placet Alexis Président de l'Association du Scepticisme Scientifique
de l'Ouest ; Potiron Aline Docteur en microbiologie ; Pronost Guillaume,
Chercheur post-doctoral en physique des particules ; Ramus Franck
Chercheur en sciences cognitives ; Razimbaud Fabrice Vétérinaire ;
Rebeaud Jean-Edouard Docteur en Biologie Végétale ; Renoux Gaël
Ingénieur logiciel ; Reteau Alexandre Mediateur et redacteur
scientifique ; Ricou Georges, Psychiatre des Hôpitaux honoraire,
retraité-actif ; Ricou-Mazé Marie-Paule, Médecin des Hôpitaux Honoraire
; Robin Rémy, Agriculteur retraité ; Ropars Vincent , Docteur en
Médecine Générale ; Roux Julien, Conseiller en communication, membre de
l'Observatoire Zététique ; Rudloff Mathieu, Docteur en Sciences pour
l'Ingénieur, Ingénieur Aéronautique ; Rulleau Thomas, Kinésithérapeute,
docteur en Staps-cognition ingénieur de recherche ; Rünneburger Estelle,
Docteure en biologie et médiatrice scientifique ; Rybak Alexis, Médecin
; Sadier Alexa, Chercheuse en biologie ; Saudreau Bernard, Ingénieur ;
Sauvage Jean Pierre, Professeur, Université de Strasbourg (France) ;
Sauvaget Tabatha Chargée des partenariats chez Esprit Sorcier ;
Schaeffer Laurent chercheur, professeur de biologie cellulaire (faculté
de medecine, Lyon) ; Schütz Frédéric Statisticien, maître d'enseignement
et de recherche à l'Université de Lausanne ; Schwander Tanja,
Professeure d'université en biologie ; Sibileau Benoit,
Kinésithérapeute, Formateur Directeur scientifique kobustech ; Simon
Chistian, Enseignant-chercheur Sorbonne Université ; Suchet Daniel,
Enseignant-chercheur en photovoltaïque ; Suffert Frédéric Chercheur en
épidémiologie végétale, INRA ; Swezey Robin, Responsable scientifique de
recherche, Docteur en Informatique ; Thadee Anne-Laure, Docteur en
Sciences Exactes et leurs Applications et journaliste scientifique ;
Thiry Arnaud Vulgarisateur Scientifique ; This Alexandre Ingénieur
R&amp;D : mathématiques appliquées et mécanique des fluides ; Tissier
Véronique, Médecin généraliste ; Tissot Tazzio ,Chercheur en biologie de
l'évolution ; Treiner Jacques, Chercheur associé au LIED, Université
Paris-Diderot ; Tripathi Myrto, Présidente des Voix du Nucléaire ;
Uyttendaele Nathan, Vulgarisateur scientifique, professeur ; Van den
Bossche Kevin, Vulgarisateur sur Youtube ; Vastine Clémence, Journaliste
; Vayssière Jean-Luc, Professeur de Biologie cellulaire ; Verger Alexis,
Chargé de recherche au CNRS ; Viault Benoit, Médecin urgentiste ;
Villard Franck, Président de l'Observatoire Zététique ; Vincourt
Patrick, Directeur de Recherche INRA en retraite ; Vioix Jean-Baptiste
Maitre de conférences en électronique et informatique ; Visdominé Anne,
Médecin généraliste ; Waksman Guy Académie d'agriculture de France ;
Wautier Anne, Médecin ; Wautier Francis, Ingenieur ; Woessner Géraldine,
Journaliste ; Zryd Jean-Pierre, Professeur honoraire UNIL (Suisse)/</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

346
html-websites/cipherbliss_blog/2019/cipherbliss_blog_205_comment-devenir-un-artiste-a-succes-sur-mastodon/index.html Normal file
View File

@ -0,0 +1,346 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1322</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2019-08-19 14:45:21&gt;</li>
<li>modifié: &lt;2019-08-21 15:35:34&gt;</li>
<li>Index des articles du blog <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">cipherbliss</a></li>
</ul>
<h1 id="comment-devenir-un-artiste-à-succès-sur-mastodon">Comment
devenir un artiste à succès sur Mastodon</h1>
<h2 id="présentez-vous">Présentez-vous</h2>
<p>Beaucoup des toots qui sont largement diffusés sont des introductions
d'artistes. Cela peut sembler étrange venant de plates-formes plus
grandes et sans visage comme Twitter, mais les communautés de Mastodon
sont plus soudées, et un nouveau membre de la communauté disant bonjour
est vraiment apprécié. Vous pouvez décrire qui vous êtes, d'où vous
venez, faire le lien entre votre travail antérieur ou vos profils, et
inclure quelques exemples de votre travail. Comme partout ailleurs, les
belles images attirent les yeux.</p>
<h2 id="remplissez-votre-profil">Remplissez votre profil</h2>
<p>Vous pouvez télécharger un avatar et une image d'en-tête. Il est sage
de faire les deux, car les gens ont tendance à ignorer les messages des
comptes avec l'avatar par défaut, et les profils semblent beaucoup plus
jolis avec une image d'en-tête. Les avatars peuvent même être animés !
Les avatars animés seront affichés aux utilisateurs qui ont opté pour
des animations d'interface, qui sont désactivés par défaut pour des
raisons d'accessibilité. <strong>Décrivez brièvement qui vous
êtes.</strong> Le profil bio peut être affiché lorsque les messages
épinglés, tels que votre introduction, ne le sont pas, il est donc
logique d'ajouter des informations communes, importantes dans les deux.
Encore plus de descriptifs clés sont possibles sur votre page grâce aux
métadonnées de profil. Vous avez 4 paires d'étiquettes/contenus à
utiliser comme bon vous semble. Vous voulez dire aux gens de quel pays
vous venez, quelles langues vous parlez? Vous pouvez le faire. Vous
pouvez les utiliser pour faire référence au pseudo de votre moitié,
mettre des emoji, indiquer votre site pro, d'autres moyens de vous
contacter ou créditer l'auteur de votre avatar.</p>
<h2 id="utilisez-les-hashtags">Utilisez les #hashtags</h2>
<p>Cela sera familier à ceux qui viennent d'instagram ou twitter, mais
les hashtags sont vraiment importants sur Mastodon! Bien sûr,
contrairement à Instagram, il y a une autre façon de découvrir le
contenu : le « tuyau d'incendie » ou les flux d'actu locaux et fédérés.
Ils montrent une partie du contenu en temps réel tel qu'il apparaît.
Dans un sens, cela signifie que vous avez une chance d'être remarqué,
même si vous n'avez pas encore d'abonnés. Mais tout le monde ne peut pas
suivre cela! L'utilisation de hashtags permet aux gens de trouver votre
art quand ils le cherchent. Certains des hashtags que les gens utilisent
sont <a
href="https://mastodon.cipherbliss.com/web/timelines/tag/mastoart">#mastoart</a>,
<a
href="https://mastodon.cipherbliss.com/web/timelines/tag/creativetoots">#creativetoots</a>,
<a
href="https://mastodon.cipherbliss.com/web/timelines/tag/photography">#photography</a>,
<a
href="https://mastodon.cipherbliss.com/web/timelines/tag/catsofmastodon">#catsofmastodon</a>,
<a
href="https://mastodon.cipherbliss.com/web/timelines/tag/illustration">#illustration</a></p>
<p></p>
<h2 id="postez-des-pouets-de-qualité">Postez des pouets de qualité</h2>
<h3 id="définissez-le-point-de-focale-dans-vos-médias">Définissez le
point de focale dans vos médias</h3>
<p>Pour garder de la constance dans les hauteurs de pouets, les médias
ne sont pas affichés en grand partout par défaut, et peuvent se
retrouver à masquer des parties qui rendent l'aperçu de vos images
étrange. Pour éviter cela vous pouvez définir un point de focale, qui
définiera le centre de recadrage de votre image. Vous pouvez aussi le
faire sur les applis mobiles.</p>
<h3 id="répartissez-dans-le-temps-vos-posts">Répartissez dans le temps
vos posts</h3>
<p>Il peut être tentant de jeter tout votre portfolio immédiatement,
mais ne le faites pas ! Bien que vos messages apparaîtront toujours sur
votre profil, la présence de vos messages sur les flux personnels de vos
followers est éphémère, ils seront poussés dehors par de nouveaux
messages ! Prenez en compte le fait que des personnes de fuseaux
horaires différents sont en ligne à des moments différents. Il est
logique d'afficher à des jours différents, à des moments différents de
la journée, pour attirer le plus d'attention possible. Ne vous sentez
pas mal à l'aise de mélanger les messages d'art et les mises à jour
personnelles. Ce n'est pas une mauvaise chose,; au contraire, les gens
apprécient la personnalité derrière le travail. Montrez l'artiste
derrière l'art.</p>
<h3 id="marquez-les-médias-sensibles">Marquez les médias sensibles</h3>
<p>Mastodon vous permet de marquer les photos ou les vidéos comme
sensibles, elles sont donc cachées derrière un avertissement. C'est
formidable pour les gens qui ne peuvent pas ou ne veulent pas voir
d'images explicites, mais pour les artistes qui créent principalement
cela, cela peut être inhibant. L'art caché derrière un avertissement est
moins susceptible d'être remarqué sur les lignes du temps, et vous devez
être conscient de ce compromis. Ce que vous pouvez faire, c'est mélanger
votre art explicite et non explicite pour gagner plus d'abonnés. Il
existe également une préférence par défaut afin de toujours afficher les
médias sensibles sans avertissement, dans vos préférences de profil.
Vous et vos followers souhaiterez peut-être activer cette option.</p>
<h3 id="utilisez-les-content-warning-cw">Utilisez les Content Warning
(CW)</h3>
<p>L'une des meilleures fonctionnalités de Mastodon est ce bouton qui
indique «CW» à l'endroit où vous écrivez vos pouets. Cliquez sur pour
ajouter un champ d'avertissement de contenu dans lequel vous pouvez
mettre des informations sur le contenu de la tâche (par exemple, santé
mentale, politique, discours obscène, nudité) afin que les personnes ne
soient pas obligées de voir le contenu qu'elles souhaitent éviter, pour
une raison quelconque. Bien sûr, il convient également aux spoilers de
séries ou de livres. Une convention courante consiste à mettre +, - ou ~
dans un avertissement de contenu pour indiquer si le contenu est
globalement positif, négatif ou mixte. Mon conseil est simple: si vous
n'êtes pas sûr de savoir si une tâche nécessite ou non une CW,
donnez-lui une CW. Les gens l'apprécient vraiment et c'est plutôt une
bonne chose que d'être trop prudent et trop respectueux des autres,
plutôt que pas assez. Vous pouvez également utiliser une CW pour résumer
un long post. Certains l'utilisent pour faire des blagues. Peut-être
penserez-vous à d'autres utilisations. Les possibilités sont infinies !
<strong>o</strong></p>
<h2 id="ayez-une-communication-humaine">Ayez une communication
humaine</h2>
<h3 id="interagissez-avec-les-autres">Interagissez avec les autres</h3>
<p>Remerciez les lorsqu'ils commentent vos posts, dites ce que vous
aimez sur les autres avec un minimum de détail quand vous ajoutez un
favori, aidez les gens qui en ont besoin. Repartagez les artistes qui
méritent d'être découverts, regardez sur le profil des dont vous
appréciez le travail à quels comptes elles sont abonnées, vous allez
trouver des perles rares!</p>
<h3 id="ne-postez-pas-que-des-images">Ne postez pas que des images</h3>
<p>Mastodon permet de poster aussi des vidéos, des gifs, des fichiers
audio, réaliser des sondages éphémères, profitez-en!</p>
<p></p>
<p>Publiez des actualités relatifs à votre activité d'artiste, les
évènements auxquels vous vous rendez, vos réflexions, vos astuces, vos
tutoriels. Si vous avez un blog sous wordpress vous pouvez installer
l'extension "wp post to mastodon" qui vous proposera de faire un Pouet
sur votre compte lors de la création d'un nouveau post. Très pratique
pour s'éviter des copier coller.</p>
<h3 id="transiter-depuis-twitter-ou-thumblr">Transiter depuis Twitter ou
Thumblr</h3>
<p>Beaucoup d'artistes ont un compte Twitter, mais se retrouvent
régulièrement refroidis pas sa modération qui censure des tétons dénudés
mais pas des insultes racistes ou homophobes, sans que les utilisateurs
n'aient leur mot à dire, en plus de se faire spamer de publicités et de
profilage liberticide. Rien de tout cela sur Mastodon, c'est vous qui
avez le contrôle, vous pouvez faire vos propres règles, modifier
l'apparence et fonctionnement de la plateforme, et déménager ailleurs
tout en conservant votre réseau de personnes suivies si vous le
souhaitez. Utilisez le bridge Mastodon/Twitter pour poster sur twitter
vos posts de Mastodon et inversement. Postez des toot sur votre blog
avec la fonctionnalité d'intégration, disponible dans les menu "trois
points" en bas des toots.</p>
<h3
id="conviez-dautres-artistes-à-prendre-le-mammouth-par-les-cornes">Conviez
d'autres artistes à prendre le mammouth par les cornes</h3>
<p>Le changement de paradigme proposé par la fédération de réseaux est
une réelle révolution dans les rapports de force entre les plateformes
sociales et leurs utilisateurs. Libérez vos contacts des plateformes
injustes que sont Twitter, Youtube ou Facebook, et faites leur découvrir
votre art au milieu d'un public d'amateurs nouveaux et libres. Amusez
vous! <u>_</u> Ce post a été inspiré par ce post sur le blog de Mastodon
<a
href="https://blog.joinmastodon.org/2018/06/how-to-become-a-successful-artist-on-mastodon/">https://blog.joinmastodon.org/2018/06/how-to-become-a-successful-artist-on-mastodon/</a>
 </p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

366
html-websites/cipherbliss_blog/2019/cipherbliss_blog_206_comment-se-faire-des-amis-sur-mastodon/index.html Normal file
View File

@ -0,0 +1,366 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1323</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2019-08-19 14:53:46&gt;</li>
<li>modifié: &lt;2019-08-26 21:56:23&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="comment-se-faire-des-amis-sur-mastodon-1">Comment se faire des
amis sur Mastodon</h2>
<ul>
<li>Qu'est-ce que c'est ?</li>
</ul>
<p>Mastodon est un réseau social utilisant des formats ouverts et des
logiciels libres. Comme le courriel, il est décentralisé.Vous êtes une
personne, pas un produit Mastodon n'est pas un réseau commercial. Ici,
pas de publicités, pas de prospection de données et pas d'environnement
fermés. Il n'y existe aucune autorité centrale.</p>
<p>Et le fédivers</p>
<h1
id="mastodon-a-été-conçu-pour-faire-disparaître-le-harcèlement-en-ligne">Mastodon
a été conçu pour faire disparaître le harcèlement en ligne</h1>
<h2 id="comment-masquer-ce-qui-vous-déplaît">Comment masquer ce qui vous
déplaît</h2>
<p>Il existe de nombreux moyens de ne pas être exposé à des choses
déplaisantes. Vous pouvez cacher les posts de personnes qui montrent des
choses déplaisantes en utilisant le bouton "trois points" sur les coins
des posts. Bloquer des utilisateurs est aussi une possibilité, qui vous
met à l'abri des posts mentionnant cette personne ainsi que des
notifications de celle-ci. Vous pouvez aussi masquer tous les comptes en
provenance d'une instance en particulier, certaines thématiques ne sont
pas à mettre sous tous les regards. Signaler les personnes aux
comportements désagréables (spam, harcèlement, contenus choquants sans
prévenir, ou choses gênantes mais pas forcément illégales) aux
administrateurs avec l'option de signalement permet d'améliorer la
qualité des choses publiées sur votre instance. Vous pouvez aussi vous
constituer des <strong>listes de mots filtrés</strong> que vous ne
souhaitez pas voir apparaître dans vos flux d'actualités, car nous ne
sommes pas tous égaux face aux sujets qui nous dérangent. Vous pouvez
aussi choisir de toujours afficher les posts, peu importe leurs messages
d'avertissement ou leur statut de média sensible.</p>
<h2 class="western" id="reprendre-le-contrôle">Reprendre le
contrôle</h2>
<p>Sur facebook ou twitter (ou le défunt GooglePlus), vous n'êtes pas en
droit de réclammer quoi que ce soit ou de personnaliser ce que vous
pouvez faire sur le site. Et le jour où vos contenus sont supprimés ou
que vos publications n'apparaissent pas dans les actus de vos amis, ou
que vous subissez du harcèlement vous n'avez que vos yeux pour pleurer
et aucun recours. Sur Mastodon c'est différent. Que vous soyez une
famille, un particulier, une entreprise, une association, un groupe
d'amis, vous pouvez vous faire votre propre réseau social régi selon vos
règles. ça élargit votre réseau social et ça change tout.</p>
<h2 class="western" id="le-principe-dinstances">Le principe
d'instances</h2>
<p>Une instance c'est une communauté, comme une page réunissant des gens
sur une thématique - ou pas. Vous pouvez être sur une instance de
Mastodon n'ayant que 3 personnes ou 600 millions d'utilisateurs, cela ne
vous empêchera pas d'interagir avec toutes les autres personnes des
autres instances du monde, et au delà. ça fonctionne comme une boite
email: vous pouvez être chez MachinMail et envoyer des messages a
BiduleMail, et TrucMail sans être inscrit chez eux. Les instances
Mastodon c'est pareil, tout le monde peut avoir la sienne ou utiliser
celle d'un autre pour communiquer avec n'importe laquelle. Et vous
pouvez donc partir d'une instance tout en gardant vos liens avec votre
sélection de gens qui s'y trouvent. Vous n'êtes plus pieds et poings
liés à vos amis dans un jardin muré, avec le fédivers vous êtes dans un
jardin ouvert.</p>
<h1 class="western" id="les-autres-moyens-daccès-au-fédivers">Les autres
moyens d'accès au Fédivers</h1>
<p>Mastodon vous permet de communiquer avec d'autres gens sur des sites
utilisant <a href="https://peertube.cipherbliss.com">Peertube (remplace
Youtube)</a>, <a href="https://www.joinmobilizon.org">Mobilizon (sotie
prévue Fin 2019 - remplace les évènements Facebook / Meetup)</a>, <a
href="https://www.framasphere.org">Diaspora (remplace Facebook comme
Mastodon)</a>, Plume (Plateforme de Blog textuel - remplace Medium)…
c'est un véritable réseau ouvert de communication, nommé le
<em>Fédivers</em>, raccourci signifiant "l'univers fédéré". Cela
signifie qu'avec votre seul compte <a
href="https://mastodon.cipherbliss.com">Mastodon sur Cipherbliss</a>,
vous  pouvez interagir avec des gens sur plusieurs plateformes
différentes sans même avoir besoin d'être inscrit partout. L'association
Framasoft a lancé son instance www.framapiaf.org, la quadrature du Net a
www.mamot.fr, l'équipe de dev Allemande de Mastodon a mastodon.social,
mastodon.art… mais je vous recommande de venir sur celui que
j'administre, parce que c'est la meilleure du monde - rien que ça.</p>
<h1 class="western"
id="pourquoi-le-mastodon-de-cipberbliss-est-la-meilleure-instance-du-monde">Pourquoi
le Mastodon de Cipberbliss est la meilleure instance du monde</h1>
<p>Parce que c'est à jour, avec des fonctionnalités que vous demandez,
hébergé en France, financé avec des fonds propres, et que contrairement
à d'autres je suis joignable et réactif, que je fais des backups
automatisés, que je m'engage a protéger la veuve et l'orphelin, que
j'administre et modère en équipe et que l'éthique du libre me tient à
coeur via des actes et pas seulement de belles paroles.</p>
<h2
id="migrer-dune-instance-à-une-autre-sans-perdre-ses-contacts-et-ses">Migrer
d'une instance à une autre sans perdre ses contacts et ses</h2>
<p>préférences.</p>
<p>Exporter et importer vos données est très facile pour passer d'une
instance mastodon à une autre. <img
src="https://blog.joinmastodon.org/2019/06/how-to-migrate-from-one-server-to-another/export.png" />
Dans votre espace utilisateur, demandez votre archive pour avoir un
export zip de tous vos posts et médias associés, ainsi que les listes de
gens que vous suivez et bloquez. Vous pourrez importer ces listes de
gens dans votre prochaine demeure, dans votre profil, dans la partie
import. Vous avez le choix entre fusionner les comptes suivis ou
remplacer totalement ceux de votre autre compte. <img
src="https://blog.joinmastodon.org/2019/06/how-to-migrate-from-one-server-to-another/import.png" />
Annoncez votre départ avec un post épinglé. Vous pouvez épingler 5 posts
maximum. Configurez votre profil pour indiquer que vous avez migré. <img
src="https://blog.joinmastodon.org/2019/06/how-to-migrate-from-one-server-to-another/migration.png" /></p>
<h2 class="western" id="cest-par-où-lentrée">C'est par où l'entrée?</h2>
<p>Cipherbliss a <a href="https://mastodon.cipherbliss.com">son propre
Mastodon</a> ouvert, relié au monde entier. Allez <a
href="https://mastodon.cipherbliss.com/auth/sign_up">venez vous
inscrire</a>, on est bien bien bien!</p>
<p></p>
<p>Avant toute chose, comme partout, pour vous faire des amis vous devez
être une personne fréquentable, <a
href="https://mastodon.cipherbliss.com/about/more">qui suit le code de
conduite</a>. Celui de <a
href="https://mastodon.cipherbliss.com">cipherbliss</a> se résume à :
ayez plus de 13 ans, et ne soyez pas un trou du cul. Et marquez les
médias sensibles / NSFW comme tels, ils sont bienvenus mais seulement si
vous les marquez comme médias sensibles. Soyez sympas, chacun de vos
posts fait par défaut jusqu'à maximum 7777 caractères, vous avez toute
la latitude nécessaire à une discussion apaisée. Ce code de conduite
régit la modération dans le coin, opérée par moi même <a
href="https://mastodon.cipherbliss.com/@tykayn">@tykayn</a> et <a
href="https://mastodon.cipherbliss.com/@damien_whirlpool">@damien</a>.
Je suis également joignable par d'autres moyens, listés sur <a
href="https://portfolio.cipherbliss.com/page/contact">ma page de
contact</a> Et si vous êtes un artiste, lisez <a
href="https://www.cipherbliss.com/comment-devenir-un-artiste-a-succes-sur-mastodon/">comment
devenir un artiste à succès sur Mastodon.</a></p>
<h1 id="découvrez-des-gens">Découvrez des gens</h1>
<p>Contrairement à ce que vous pourriez avoir l'habitude d'utiliser dans
des jardins murés comme Facebook, Twitter ou Youtube. Mastodon est une
des multiples porte d'entrée à une multitude de champs ouverts, et l<a
href="https://mastodon.cipherbliss.com">e Mastodon de Cipherbliss</a>
est un des moyens d'accéder à cette porte. vous ne trouverez pas de
publicités ou de tracking, car l'infrastructure est financée avec mes
propres deniers.</p>
<h2 id="découvrir-des-gens-selon-vos-centres-dintérêt">Découvrir des
gens selon vos centres d'intérêt</h2>
<ul>
<li>Recherchez des hashtags, cliquez sur ceux ci dans les messages qui
vous intéressent, explorez des profils en cliquant sur l'avatar des
autres personnes. Utilisez vous aussi des hashtags dans vos posts pour
les rendre découvrable par thématique, n'hésitez pas à en mettre
plusieurs.</li>
<li>Recherchez des gens par leur nom. Si vous avez un compte twitter,
utilisez le pont Twitter-Mastodon pour découvrir qui dans vos contacts a
déjà un compte dans le fédivers.</li>
<li>Vous pouvez utiliser la recherche de votre instance, ou celle de <a
href="https://instances.social">https://instances.social</a> qui va vous
en proposer une liste selon des critères que vous demandez (langue
parlées, centres d'intérêt, nombre de gens…)</li>
<li> Au détour d'une conversation, déroulez le fil et découvrez des
personnes.</li>
</ul>
<p> </p>
<h1 id="conclusion">Conclusion</h1>
<p>De nombreux moyens sont à votre disposition pour trouver des
personnes de qualité selon vos propres critères. Par conception,
Mastodon ne vous imposera pas qui sont vos amis selon leur popularité ou
leur compte en banque, et leur propension à générer du clic et des <a
href="https://www.cipherbliss.com/le-village-global-dinternet/">shitstorms</a>
comme c'est le cas sur twitter ou facebook. Votre réseau social s'en
retrouve étendu et <a
href="https://www.cipherbliss.com/rester-relie-a-son-passe-via-les-reseaux-sociaux/">sous
votre contrôle</a>. à vous de jouer! <u>_</u> ce post à été inspiré par
le blog du développement de Mastodon en Anglais: <a
href="https://blog.joinmastodon.org/2019/06/how-to-migrate-from-one-server-to-another/">https://blog.joinmastodon.org/2019/06/how-to-migrate-from-one-server-to-another/</a>
<a
href="https://blog.joinmastodon.org/2018/07/cage-the-mastodon/">https://blog.joinmastodon.org/2018/07/cage-the-mastodon/</a>
 </p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

316
html-websites/cipherbliss_blog/2019/cipherbliss_les-plateformes-sociales-privatives/index.html Normal file
View File

@ -0,0 +1,316 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1353</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2019-10-28 10:09:23&gt;</li>
<li>modifié: &lt;2019-10-28 10:09:23&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2
id="faut-il-avoir-une-présence-sur-les-plateformes-sociales-privatives-pour-en-libérer-ses-utilisateurs">Faut
il avoir une présence sur les plateformes sociales privatives pour en
libérer ses utilisateurs</h2>
<p>Suite à ce post, <a
href="https://framacolibri.org/t/mobilizon-et-technos-des-gafams/5461/9?u=tykayn">https://framacolibri.org/t/mobilizon-et-technos-des-gafams/5461/9?u=tykayn</a>
référant cette discussion sur Mastodon <a
href="https://diaspodon.fr/@dada/102643392155613739">https://diaspodon.fr/@dada/102643392155613739</a>
j'aimerais avoir vos réflexions sur des méthodes qui fonctionnent pour
inciter les gens les moins geek/ingénieurs/techniques du monde à se
libérer des effets de réseau des plateformes "sociales" centralisées.
J'en viens à me dire qu'on peut sans doute parler du fédiverse sans
avoir à faire comprendre aux gens la notion d'instance ou de
décentralisation. Ces notions viendront plus tard. ça parlera aux
techos, mais pas aux utilisateurs lambda qui attendent que d'autres
leurs montrent quoi faire. Par exemple, pour ceux qui s'attendent
uniquement à croiser plein de monde et qui ne comprennent pas les dégâts
sur la vie privée que fait facebook, on peut leur dire que l'audience
double tous les 6 mois, et qu'actuellement on a près de 4 millions de
gens dans le fédiverse (pas que sur Mastodon). Ou encore leur montrer
comment Fb nous éloigne de nos amis en filtrant les flux d'actus et nous
donne une illusion de proximité plutôt qu'une réelle proximité. On peut
dire a nos copains artistes qui font du crowdfunding régulièrement que
leurs appels aux dons ne seront pas pollués par de la pub. Aux militants
on peut leur dire que leurs messages ne seront pas censuré au gré des
décisions politiques des actionnaires gérant le site. Les exemples sont
nombreux. J'ai choisi plusieurs choses pour inciter les gens: L'exemple:
en supprimant mon compte Fb et Google. L'argumentatif écrit: en faisant
des posts de blog qui ne s'adressent pas à des techniciens.
&lt;strike&gt;Le témoin de jéhovah: en allant frapper à la porte des
gens pour leur prêcher la bonne parole.&lt;/strike&gt; Non, enfin, bon,
en causant à mes proches et moins proches. J'ai choisi d'utiliser
twitter (en crossposting de source mastodon perso <a
href="https://mastodon.cipherbliss.com">https://mastodon.cipherbliss.com</a>
) et (très peu) linkedin aussi. Tout en étant conscient des business
model de ces plateformes et de l'attention très limitée et filtrée des
gens qui sont dessus. <strong><strong>J'aimerais que l'on partage nos
retours d'expérience là dessus.</strong></strong> Jusqu'ici j'ai réussi
à faire en sorte que quelques uns de mes contacts s'inscrivent à
mamot.fr ou à mastodon.art à l'époque où Mastodon était par défaut en
multi colonne, ce qui gêne les nouveaux venus. Peu de gens parmi ceux là
n'ont rien que tenté de faire le moindre post. Un seul à réalisé plus de
dix posts pour faire découvrir ses illustrations. Les questions
relatives à la vie privée sont un argument qui est extrêmement compliqué
à faire entendre en peu de temps, c'est donc un angle argumentaire très
inefficace. Il parle cependant d'avantage aux femmes ayant connu du
harcèlement en ligne et des ex dangereux. Je connais pas mal de
dessineux / artistes / illustrateurs, qui sont assez réceptifs aux
problématiques de censure et de filtrage de leurs publications. -
L'angle argent parlera aussi à pas mal de monde quand on leur fait
comprendre que la publicité ciblée et le profilage constant leur coûtent
plus cher sur n'importe quel site et aussi en terme d'assurances et de
relations avec les banques. - On peut évoquer les scandales oubliés des
cartes de fidélité dans les supermarchés, dont le capitalisme de
surveillance n'est que l'extension. (Mais attention, c'est un terme qui
va souvent faire sortir des mots comme "paranoïa", ce à quoi vous pouvez
répondre que la paranoïa n'a pas de preuves, alors que là vous en avez)
- Pour les enthousiastes de la commande vocale on peut leur dire que
"pour que le micro de ton bidule connecté détecte que tu lui dis une
commande, il faut qu'il soit à l'écoute en permanence". Très souvent les
gens l'ignorent. Montrer l'historique des enregistrements "ok google" où
on a pas dit ok google permet une prise de conscience assez brusque qui
peut être utile. - Pour nos contacts engagés politiquement, les
révélations d'edward snowden, cambridge analytica, la censure politique,
le business model de la surveillance, sont des sujets qui auront leur
auditoire. - Les évènements facebook, une fonctionnalité très demandée
(qui pour certains restent la dernière raison de l'existence de leur
compte) permettent de faciliter les réunions militantes, mais les vident
de leur efficacité à cause du filtrage et du fichage. Les militants en
sont rarement conscients. (je vous ai dit que j'ai hâte que Mobilizon
sorte une version alpha?) - Les personnes conscientes que la limitation
de caractères de twitter ne peut engendrer que des arguments d'homme de
paille et des interjections violentes, dites leur qu'ils peuvent avoir
autant de texte qu'ils le veulent ailleurs (pleroma, plume, mastodon). -
Les artistes vidéastes, faites leur essayer d'importer leurs vidéos sur
peertube. Utilisez l'argument d'autorité de quelques comptes connus. -
Vous avez des amis LGBT+, montrez leur comment Mastodon permet de lutter
contre le harcèlement, permet l'inclusion, les havres de paix, et
redonne le contrôle aux gens les plus exposés aux risques de toutes
sortes. - Pour les gens souffrant de handicap, de maladies et autres
traumas, mettez en avant l'accessibiltié et le design respectueux. -
Eugen Rochko écrivait qu'en fait ce ne sont pas les fonctionnalités qui
comptent mais les personnes. Si un réseau social était fait de signes de
fumée mais qu'il y avait des gens suffisamment connus dessus, tout le
monde ferait des signes de fumée. Ce ne sont pas les fonctionnalités qui
priment. Je le concède, on est loin du gros succès migratoire. Mais ma
femme qui n'est pas du tout ingénieur commence à être à l'écoute des
problématiques de vie privée maintenant que ça fait 9 mois qu'elle ne me
voit plus sur facebook/messenger (et un an qu'on utilise Signal, qu'on a
réussi à faire adopter par pas mal de gens autour de nous) et me disait
récemment qu'elle envisageait de s'organiser un évènement en raid avec
d'autres de ses contacts facebook pour s'inscrire à mastodon et voir ce
que ça donne a plusieurs. On a commencé à écrire des textes pour les
nouveaux utilisateurs, et je constate que les arguments qui la font
réagir ne sont pas du tout les mêmes que moi, ce qui est fort
enrichissant. <a
href="https://www.cipherbliss.com/comment-se-faire-des-amis-sur-mastodon/">https://www.cipherbliss.com/comment-se-faire-des-amis-sur-mastodon/</a>
<a
href="https://www.cipherbliss.com/comment-devenir-un-artiste-a-succes-sur-mastodon/">https://www.cipherbliss.com/comment-devenir-un-artiste-a-succes-sur-mastodon/</a>
Principaux obstacles donc: - <strong>la langue</strong>. les infos sur
le fédivers se trouvent surtout en anglais, tout comme la vidéo de
présentation qui existe avec des sous titres français, mais pas de vocal
en français. Ce qui fait littéralement peur à toute personne de plus de
35 ans que je croise) - <strong>on s'imagine qu'adopter le fédivers est
compliqué</strong> (notion d'instance / décentralisation) alors qu'on
pourrait se passer de cette éducation dans un premier temps. -
<strong>créer un compte ne se fait pas en un click</strong> avec un
bouton "se connecter via une plateforme privative". C'est un truc
controversé, je comprends bien, mais je suis convaincu qu'on libérerait
énormément de gens bloqués en mettant ça en place, par exemple avec
IndieAuth ou d'autres fournisseurs d'identités. - coordonner deux ou
cent personnes à essayer en même temps serait très efficace pour
balancer l'effet de réseau. Mais c'est forcément plus compliqué de
coordoner cent personnes plutôt que deux. Demandez aux gens comment ils
sont arrivés sur Fb, ils vous diront que c'est parce qu'un de leurs
proches les y a invité. Utilisez les liens d'invitation Mastodon, et
organisez des raids. Pas sur la zone 51. ou alors si, montez un mammouth
nommé zone51, c'est à la mode en ce moment. Vous aussi, faites passer
vos compte rendus d'essai et quelles méthodes vous utilisez o/</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

382
html-websites/cipherbliss_blog/2020/cipherbliss_blog_218_entraide-locale-avec-des-affiches-et-un-pad-en-ligne/index.html Normal file
View File

@ -0,0 +1,382 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1390</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2020-06-21 10:47:59&gt;</li>
<li>modifié: &lt;2020-06-21 10:51:14&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="entraide-locale-avec-des-affiches-et-un-pad-en-ligne-1">Entraide
locale avec des affiches et un pad en ligne</h2>
<p>Stimuler l'entraide locale dans sa ville en placardant un pad
partagé, c'est facile à faire. Il vous suffit de créer une fiche avec un
lien, l'imprimer et la placarder, et tada! J'ai utilisé cryptpad.fr pour
faire ça, avec un frama link imprimé, pendant le confinement. vous
pouvez reprendre le modèle suivant: <u>_____________</u> <a
href="https://cryptpad.fr/pad/#/2/pad/edit/14deXQhN3ObKLYw4mdGUtQnE/">https://cryptpad.fr/pad/#/2/pad/edit/14deXQhN3ObKLYw4mdGUtQnE/</a></p>
<h1 id="nom-de-votre-ville---entraide-locale">[nom de votre ville] -
entraide locale</h1>
<p>Tou.tes les brissois.es sont invités à écrire dans ce document
collaboratif. Partagez le ! <a
href="https://frama.link/briis">https://frama.link/briis</a></p>
<ul>
<li>Mairie de Briis permanence téléphonique 24h/24 : <a
href="tel:06%2008%2058%2080%2094">06 08 58 80 94</a></li>
<li>La mairie organise le portage de repas à domicile (pour les + de 70
ans ?) inolscription 24h/24 : <a href="tel:06%2008%2058%2080%2094">06 08
58 80 94</a></li>
</ul>
<h2 id="a---questions-ouvertes"><span id="questions-ouvertes"></span>A -
Questions ouvertes</h2>
<ul>
<li>Comment donner des moyens directement aux hopitaux?</li>
</ul>
<h2 id="b---commerces-à-briis-et-alentours"><span
id="commerces"></span>B - Commerces à Briis et alentours</h2>
<ul>
<li><p>avoir des livraisons locales -</p>
<ul>
<li><p>superette de Briis , Cocci Market.</p></li>
<li><p>Boulangerie La brissoise</p></li>
<li><p>marché de Briis:</p>
<ul>
<li>Fruits et légumes : Laurent <a href="tel:0761802594">07 61 80 25
94</a> (commander avant mercredi soir pour une livraison le
vendredi.)</li>
</ul></li>
<li><p>AMAP <a
href="https://www.amap-idf.org/">www.amap-idf.org/</a></p></li>
<li><p><a
href="https://www.lepanierdupetitpotager.fr">www.lepanierdupetitpotager.fr</a></p></li>
</ul></li>
<li><p>Quels magasins restent ouvert et livrent à domicile à proximité ?
<a
href="https://www.caresteouvert.fr/@48.623772,2.123539,15.76">www.caresteouvert.fr/</a></p></li>
<li><p>pépinièriste (terres, paillages et bientôt plantes ) <a
href="mailto:levergerdebelair@gmail.com">levergerdebelair@gmail.com</a></p></li>
<li><p>Coup de pousse au jardin (livraison gratuite dès 30€ d'achats
d'arbres fruitiers, plants de légumes… 1200 references dispo ) : <a
href="tel:06%2038%2039%2089%2039">06 38 39 89 39</a> / <a
href="tel:06%2038%2039%2089%2039">06 99 94 32 15</a></p></li>
</ul>
<h2 id="c---santé"><span id="sante"></span>C - Santé</h2>
<ul>
<li><p>SOS violences conjugales. tel: <a href="tel:3919">3919</a>,
service spécialisé dans les violences faites aux femmes, <a
href="https://www.service-public.fr/particuliers/vosdroits/F12544">autres
moyens listés ici sur service-public.fr</a> . Association Paroles de
Femmes – Le Relais : Accueil téléphonique de 9h à 12h30 et de 13h30 à
17h30, au <a href="tel:01%2060%2011%2097%2097">01 60 11 97
97</a>.</p></li>
<li><p>Ligne d'écoute psychologique gratuite covid-19 Essonne (12 psy
dispo du lundi au samedi 10-18h) : <a
href="tel:08%2005%2003%2000%2091">08 05 03 00 91</a></p></li>
<li><p>[[<a
href="https://www.cipherbliss.com/boinc-le-calcul-collaboratif-pour-la-recherche-medicale/">https://www.cipherbliss.com/boinc-le-calcul-collaboratif-pour-la-recherche-medicale/</a>][Prêtez
un peu des capacités de calcul de vos ordinateurs et téléphones pour
accélérer la recherche médicale, sur le covid 19, entre autres.]]</p>
<ul>
<li><a href="https://boinc.berkeley.edu/">BOINC</a> - pour utilisateurs
plus expérimentés</li>
<li><a href="https://foldingathome.org/start-folding">Folding At
Home</a> - le plus simple à installer</li>
</ul></li>
<li></li>
<li><p>Désinfecter son masque en tissu :</p>
<ul>
<li>Ne pas tenter de désinfecter son masque chirurgical, FFP2 etc : à la
chaleur ils peuvent perdre leur pouvoir filtrant et / ou devenir
toxiques.</li>
<li>60 °C pendant 20/30 minutes à la machine à laver.</li>
<li>au four pendant 10 minutes à 70 °C (validé par plusieurs études
scientifiques)</li>
<li>Plus précisamment pour désinfecter le matériel médical : 56°C
pendant trente minutes ou à 65°C pendant dix minutes.</li>
<li>Attention, plus on chauffe fort, plus les élastiques vont en
souffrir / Repasser son masque ne suffit pas ! / le micro onde ne semble
pas indiqué.</li>
</ul></li>
</ul>
<h2 id="d---enfance"><span id="enfance"></span>D - Enfance</h2>
<p>Continuité pédagogique: <a
href="https://www.continuitepedagogique.org/">https://www.continuitepedagogique.org/</a></p>
<h2 id="e---protection-sur-internet-et-vie-privée"><span
id="protection-vie-privee"></span>E - Protection sur internet et vie
privée</h2>
<p>Installez le bloqueur de publicité et de tracking ublock origin, <a
href="https://addons.mozilla.org/fr/firefox/addon/ublock-origin/">sur
Firefox</a>, <a
href="https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm">sur
Chrome</a></p>
<h3
id="communication-conférences-audio-vidéo-télétravail">Communication,
conférences audio / vidéo, Télétravail</h3>
<ul>
<li><p><img src="https://about.riot.im/images/riot-logo-hero.svg" /> <a
href="https://riot.im/app/#/room/#briis:matrix.org">Riot, canal de
discussion instantanée de Briis sous Forges</a>: <a
href="https://riot.im/app/#/room/#briis:matrix.org">#briis:matrix.org</a></p></li>
<li><p><a href="https://riot.im">Riot: appli mobile et de
bureau.</a></p>
<p><a
href="https://riot.im">[[<span>https://about.riot.im/images/cta-browser.png</span></a><img
src="https://about.riot.im/images/cta-desktop.png" /><img
src="https://about.riot.im/images/cta-ios.png" /><img
src="https://about.riot.im/images/cta-googleplay.png" /><img
src="https://about.riot.im/images/cta-fdroid.png" />]]</p></li>
<li><p>Faire des pages de texte et des feuilles de calcul écrites à
plusieurs (comme ici): <a
href="https://cryptpad.fr">cryptpad.fr</a></p></li>
<li><p>envoyer des SMS depuis son ordinateur et son tel. -utilisez <a
href="https://signal.org/fr/download/">Signal Messenger.</a> installez
le sur votre téléphone et votre ordinateur <a
href="https://signal.org/fr/download/">https://signal.org/fr/download/</a>
[[<a
href="https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm">https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm</a>][]]</p></li>
</ul>
<p> </p>
<ul>
<li>N'utilisez pas Zoom, Whatsapp, Microsoft Teams, Facebook Messenger,
ou Skype, leurs failles de sécurité sont nombreuses, leur commerce se
fait au prix de vos libertés fondamentales tel que le droit à la vie
privée.</li>
<li>Faire des visio-conférences / audio-conférences privées facilement,
avec Jitsi ou Riot. <a
href="https://meet.jit.si/briis-sous-forges">https://meet.jit.si/briis-sous-forges</a></li>
<li><img src="https://framadate.org/images/date.png" /> organiser un RDV
en proposant plusieurs dates. <a
href="https://framadate.org/">https://framadate.org/</a></li>
<li>Comment préparer une réunion à distance et télétravailler librement
? <a href="https://framasoft.frama.io/teletravail/">Un guide de
l'association Framasoft.</a></li>
<li>Partage de fichiers sans inscription : <a
href="https://cloud.tykayn.fr/s/WS4d3QbLz5jxwWB">https://cloud.tykayn.fr/s/WS4d3QbLz5jxwWB</a></li>
<li></li>
</ul>
<h3 id="services-divers">Services divers</h3>
<ul>
<li>éviter les fuites d'informations grâce à des bonnes pratiques et un
<a
href="https://www.cipherbliss.com/comment-ne-plus-perdre-de-temps-avec-ses-mots-de-passe/">gestionnaire
de mots de passe très sécurisé comme Bitwarden</a>.</li>
<li>introduction aux logiciels libres collaboratifs: <a
href="https://www.cipherbliss.com">https://www.cipherbliss.com</a></li>
<li>Réseau social fédéré Mastodon (500 Millions de personnes) : <a
href="https://mastodon.cipherbliss.com">https://mastodon.cipherbliss.com</a></li>
<li>développement web: [[<a
href="mailto:contact@cipherbliss.com">mailto:contact@cipherbliss.com</a>][B.
Lemoine, entreprise CipheOu les conséquences insoupçonnées du
confinement.]]Défi du dimanche : foodporn Galerie publique : <a
href="https://www.facebook.com/groups/4101833913">https://www.facebook.com/groups/4101833913</a>
, dossier photo et dessins partagé: <a
href="https://cloud.tykayn.fr/s/5fKwoPmJgBCoPox">https://cloud.tykayn.fr/s/5fKwoPmJgBCoPox</a>
On se géolocalise…. <a
href="https://umap.openstreetmap.fr/fr/map/anonymous-edit/441832:An5XxDI8mwWio5VKLL7yODHo4VMr">https://umap.openstreetmap.fr/fr/map/anonymous-edit/441832:An5XxDI8mwWio5VKLL7yODHo4VMr</a>
Bliss.</li>
<li>Monnaie libre à dividende universel: <a
href="https://monnaie-libre.fr/">https://monnaie-libre.fr/</a></li>
<li>Hébergeurs neutres et solidaires, les CHATONS: <a
href="https://entraide.chatons.org/fr/">https://entraide.chatons.org/fr/</a></li>
<li>traduction de textes. <a href="https://www.deepl.com">www.deepl.com
,</a> Fr-&gt;En ou En-&gt;Fr, et bien d'autres - <a
href="mailto:contact@cipherbliss.com">contact@cipherbliss.com</a></li>
</ul>
<h2 id="divertissement">Divertissement:</h2>
<ul>
<li>Hébergement de vidéos: <a
href="https://peertube.cipherbliss.com">https://peertube.cipherbliss.com</a></li>
<li>Recettes de cuisine <a
href="https://cuisine-libre.fr">https://cuisine-libre.fr</a></li>
</ul>
<p><a
href="https://cuisine-libre.fr/local/cache-gd2/87/06f5a9a54480b19220f7ceddb26102.jpg?1586045957">https://cuisine-libre.fr/local/cache-gd2/87/06f5a9a54480b19220f7ceddb26102.jpg?1586045957</a>
     </p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

316
html-websites/cipherbliss_blog/2020/cipherbliss_blog_223_refonte-de-framadate-avec-api/index.html Normal file
View File

@ -0,0 +1,316 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1437</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2020-07-14 14:03:05&gt;</li>
<li>modifié: &lt;2020-07-14 14:03:10&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="refonte-de-framadate-avec-api-1">Refonte de Framadate avec
API</h2>
<p>Il était une fois Framadate, une petite histoire de télétravail hors
pandémie de Covid-19. Comme beaucoup de boulots collaboratifs de
logiciels libre, c'est une contribution faite à distance, par beaucoup
de personnes dans le monde, sur leur temps libre. De quoi apprendre des
choses utiles en ces temps où le télétravail semble être totalement
nouveau, alors que <strong>pour beaucoup de contributeurs au libre, le
travail de loin à plusieurs a toujours été l'unique façon de
faire</strong>. Donc Framadate, installé sur <a
href="https://framadate.org/">framadate.org</a>, c'est comme Doodle (qui
est devenu très cher pour le commun des mortels), mais en mieux du point
de vue éthique.</p>
<h2 id="quest-ce-que-cest-framadate">Qu'est-ce que c'est,
Framadate?</h2>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2020/04/framadate_date.jpg" />
<img
src="https://www.cipherbliss.com/wp-content/uploads/2020/04/framadate_classic.jpg" /></p>
<p>C'est un petit logiciel que vous pouvez installer sur votre serveur
afin de permettre à n'importe qui d'organiser des sondages pour se faire
des rendez-vous (au lieu d'utiliser la technique moisie des échanges
interminables d'email "moi je suis dispo tel jour" "ha moi non" "ah moi
oui" "oui mais toi on s'en fout Bébert!" … pauvre Bébert!), sans que les
gens que vous souhaitiez réunir n'aient besoin de s'sinscrire, de faire
chauffer la carte bleue, ou de se faire pister par les GAFAM.</p>
<p>C'est un logiciel très utilisé, mais qui souffre de problème
d'ergonomie énorme sur mobile. Comme beaucoup de projets libres, faits
par des gens qui ne sont pas experts en User eXperience, design,
accessibilité, traduction. Il était question de retaper son front end
depuis un bout de temps, et Maiwann s'est lancé dans la réunion d'idées
en 2018, a produit des design d'écrans en 2019, et fait un appel a
discuter du truc avec le hashtag #framadate, depuis un post Mastodon en
Aout 2019. Les maquettes étaient prêtes et n'attendaient qu'à être
traduites en logiciel.</p>
<p>Nouvelle tête de framadate, maquettes sur Zeplin, cette version n'est
pas encore en production:</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2020/04/Screenshot_2020-04-10-Zeplin-Project.png" /></p>
<h2 id="comment-on-fait-pour-contribuer-à-plusieurs-à-distance">Comment
on fait pour contribuer à plusieurs à distance?</h2>
<p>Avec d'autres gens recrutés de divers moyens avec des posts sur des
forums et des médias sociaux de toutes sortes. Des gens répondent à
l'appel, et c'est parti!</p>
<h2 id="communication-interne">Communication interne</h2>
<p>En premier lieu il faut savoir comment communiquer avec les autres
contributeurs. , on a discuté du truc d'abord sur les réseaux sociaux et
forums d'où ont été faits les appels. Quel moyen on devrait privilégier
pour échanger tout le long du projet? Celui qui convient à le plus de
gens motivés.</p>
<p>Riot, IRC, forum framacolibri, Wire, Mattermost, les possibilités
sont nombreuses, mais c'est le Mattermost de Framasoft, Framateam,
section UX &amp; Libre, canal framadate qui a remporté le plus de votes.
Grâce à mon gestionnaire de mots de passe, créer un compte avec un mot
de passe réellement complexe (une centaine de caractères divers et
variés) ne me fait pas peur. Mattermost ci propose en plus l'avantage de
pouvoir se connecter via le Gitlab de Framasoft, Framagit, qui héberge
tous les code sources des projets. C'est aussi un excellent moyen
d'avoir plusieurs autres outils utiles à un projet logiciel: disposer
d'un wiki, et d'un tableau de choses à faire avec les Issues, au sein
desquelles on peut aussi discuter des détails.</p>
<p>Il a été convenu aussi qu'on allait donner des informations pour
accueilir les nouveaux contributeurs dans la desciption du <a
href="https://framateam.org/ux-framatrucs/channels/framadate">canal
framateam nommé Framadate</a>, et que l'on allait cantonner les
discussions de dev dans un canal séparé pour ne pas faire fuir les gens
normaux, sur : <a
href="https://framateam.org/ux-framatrucs/channels/framadate-dev">framadate-dev</a>.</p>
<h3 id="quels-sont-les-objectifs-par-où-puis-je-commencer">Quels sont
les objectifs, par où puis-je commencer?</h3>
<p>Il nous faut aussi savoir ce qu'on veut faire, pour savoir quelles
compétences rechercher et comment indiquer aux gens qui le souhaitent
comment ils peuvent aider le projet. C'est un gros travail de discussion
et de communication. Certains ont l'habitude de faire ça en vrai, dans
des ateliers de contribution où des gens de tous âges et de tout poil
viennent discuter, sociabiliser, boire un coup, et des fois même,
écrire, dessiner, coder des trucs.</p>
<p>Les maquettes sont prêtes, on peut les faire évoluer, on est prêts
aussi à les confronter à la réalité.<br />
</p>
<h3 id="accueillir-les-gens-est-primordial">Accueillir les gens est
primordial</h3>
<p>c'est sur nos premiers ressenti que l'on va décider si on a envie
d'investir deux minutes dans un projet en ligne avec des gens que l'on
ne connaît ni d'ève ni d'adam. Ensuite, comprendre qu'on a le droit de
poser des questions et d'ignorer des choses, et qu'on peut aider sans
avoir aucune compétence logicielle, ça fait un bien fou.</p>
<p>Pour savoir ce que l'on peut faire on a créé au début un pad
collaboratif. Puis une fois qu'on a fait le ménage dans nos idées, on a
mis ça dans le wiki du dépot gitlab.</p>
<p>Au début on a envisagé de ne retaper que le style. Puis en discutant
avec des gens qui connaissaient bien le code existant, et en examinant
d'un côté ce que ça nous prendrait comme temps de retaper ce qui existe,
ou repartir de zéro avec un framework comme on a conclu qu'il valait
mieux partir de zéro et utiliser quelques bibliothèques logicielles à
assembler pour se concentrer sur le code métier.</p>
<p>Ensuite, ça se fait au fil de l'eau, l'important étant que chacun
trouve son compte et soit prêt à faire des concessions pour avancer. oui
moi aussi, c'est fou je sais.</p>
<h2 id="relancer-régulièrement-les-motivés">Relancer régulièrement les
motivés</h2>
<p>Une fois les gens mobilisés, il faut identifier ce qui les bloque,
car bien souvent on hésite à dire quand quelque chose ne va pas.
Relancer fait partie du boulot pour bosser en équipe, même si on a pas
du tout un statut d'animateur ou de manager officiel.</p>
<p>Un gros boulot de refacto pour bien séparer les concepts, les types,
faire des modèles documentés dans le code ont été réalisés pendant le
confinement de 2020. Quelques petites réunions vocales en équipe ont
permis d'avancer sur les points les plus techniques. La bêta n'est pas
encore sortie.</p>
<p>Mais vous pouvez déjà demander à l'API ce qu'elle fait, j'ai mis une
version de démo sur <a
href="https://framadate-api.cipherbliss.com">framadate-api.cipherbliss.com</a>/api/v1</p>
<p>voici le document qui liste la config au format JSON: <a
href="https://framadate-api.cipherbliss.com/api/doc.json">https://framadate-api.cipherbliss.com/api/doc.json</a></p>
<p>Vous pouvez venir voir comment on avance sur les dépots framagit, et
sur <a href="https://framateam.org/ux-framatrucs/channels/framadate">les
canaux de discussion de Framateam, section UX &amp; Design</a>.
Enjaillez!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

295
html-websites/cipherbliss_blog/2020/cipherbliss_blog_228_recuperer-de-la-musique-libre-de-lemission-cause-commune/index.html Normal file
View File

@ -0,0 +1,295 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1492</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2020-11-12 11:31:41&gt;</li>
<li>modifié: &lt;2020-11-15 16:35:43&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2
id="récupérer-de-la-musique-libre-de-lémission-libre-à-vous">Récupérer
de la musique libre de l'émission "Libre à vous !"</h2>
<p>Je vous ai dit que j'étais membre de <a
href="https://www.april.org">l'April</a> et du <a
href="https://www.chatons.org">CHATONS</a> qui y est associé, le <a
href="https://www.chapril.org">Chapril</a> ? ça c'est fait. <a
href="https://www.april.org">[[<span>https://www.april.org/sites/default/themes/zen_april/logo.png</span></a>]]Il
se trouve que cette association de défense du logiciel libre, qui est
aussi à l'origine du très utile <a
href="https://www.agendadulibre.org/">Agenda du libre</a>,  a près de
4000 membres et diffuse une nouvelle émission tous les Mardis après
midi, intitulée "<strong>Libre à vous</strong> !". <img
src="https://april.org/files/libre-a-vous/banniere-radio-libre-a-vous-256x.png" />
<a
href="https://april.org/files/libre-a-vous/bande-annonce/20190831-bande-annonce-libre-a-vous-video-version-courte-960x540.webm">https://april.org/files/libre-a-vous/bande-annonce/20190831-bande-annonce-libre-a-vous-video-version-courte-960x540.webm</a></p>
<blockquote>
<p>Prenez le contrôle de vos libertés informatiques et suivez
l'actualité du Libre. Retrouvez les dossiers politiques et juridiques
traités par l'April, les échanges avec des personnes invitées, et bien
entendu de la musique sous licence libre. <em>Libre à vous !</em> c'est
en direct <strong>chaque mardi de 15 h 30 à 17 h</strong>, sur les ondes
de la radio Cause Commune, <em>« la voix des possibles »</em>, 93.1 FM
en Île-de-France, partout dans le monde <a
href="https://causecommune.fm">sur le site de la radio</a>. (Comme
diraient les Fatals Picards, C'EST UN JEU DMOT! <strong>cause</strong>
comme discutailler, mais aussi comme comme cause à défendre! Habile!) Le
podcast de l'émission et les podcasts par sujets traitées sont
disponibles dès que possible, quelques jours après l'émission en
général.  </p>
</blockquote>
<h2 id="qui-dit-radio-libre-dit-aussi-musique-libre">Qui dit radio libre
dit aussi musique libre</h2>
<p>C'est aussi une émission qui diffuse des artistes publiant leur
musique sous une <a
href="https://fr.wikipedia.org/wiki/Licence_libre">licence libre</a>, ce
qui signifie que sous certaines conditions vous pouvez l'écouter et vous
en servir dans vos créations (vidéos par exemple) sans avoir à débourser
le moindre euro, du moment que vous créditez les artistes correctement.
En causant sur le canal IRC #april-chapril j'ai appris que l'on peut
retrouver la liste des musiques par ici pour les télécharger: <a
href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/musiques/">https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/musiques/</a>
Aussi, au lieu de cliquer sur les nombreux liens un par un j'ai réalisé
un petit script qui va s'occuper de récupérer la liste des liens fournis
par cette page et les télécharger ensuite dans un dossier dédié grâce à
la puissance des scripts bash. Il existe sûrement des moyens plus facile
de faire cela mais voici une recette assez rapide issue de plusieurs
recherches sur Saint Stack Overflow. D'abord on récupère la page html
présentant la liste de liens, on scanne ensuite le fichier html pour
extraire les liens dans les ancres html, on remplit un fichier listant
ces liens, et ensuite on scanne ce fichier de liens en demandant de
télécharger chacun de ces liens dans un dossier.</p>
<pre class="example"><code>#/bin/bash
cd ~
mkdir musique-libre-a-vous &amp;&amp; cd musique-libre-a-vous
wget https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/musiques/
sed -n &#39;s/.*href=&quot;\([^&quot;]*\).*/\1/p&#39; index.html &gt; liste_de_liens.txt
cat liste_de_liens.txt
cat output.txt| wc -l
</code></pre>
<p>une fois que vous avez fait le ménage dans votre liste de liens en ne
gardant que les fichiers audio, vous pouvez lancer le téléchargement de
la liste de fichiers ainsi:</p>
<pre class="example"><code>xargs -i wget &#39;https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/musiques/{}&#39; &lt; liste_de_liens.txt
</code></pre>
<p>Bon ce serait plus simple si l'asso mettait à disposition des
fichiers torrents listant les musiques par paquet, ça permettrait de
faire techniquement du partage entre les personnes interessés par les
téléchargement au lieu de tout demander depuis un seul serveur, mais ça
sera pour une prochaine fois ;) Si vous avez aussi de bonnes ressources
pour récupérer de la musique libre de droits et faire découvrir des
artistes de qualitay, faites passer les astuces dans les commentaires!
oh d'ailleurs vous pouvez leur parler de <a
href="https://funkwhale.audio/">Funkwhale</a> si vous connaissez des
artistes.</p>
<blockquote>
</blockquote>
<p><a href="https://music.cipherbliss.com/">j'en ai mis un en place
ici</a>: <a
href="https://music.cipherbliss.com/">https://music.cipherbliss.com/</a>
En attendant, profitez bien de la musique, et si vous voulez en savoir
plus sur l'April c'est par ici:</p>
<blockquote>
<p>Depuis 1996, l'April est animée par une ambition : <strong>« logiciel
libre, société libre »</strong>. Pionnière du <strong><a
href="https://www.april.org/articles/intro/ll.html">logiciel
libre</a></strong> en France, l'April, constituée de 3968 adhérents
(3666 personnes physiques, 302 entreprises, associations et
organisations), est depuis 1996 un acteur majeur de la
<strong>démocratisation</strong> et de la <strong>diffusion</strong> du
logiciel libre et des <strong>standards ouverts</strong> auprès du grand
public, des professionnels et des institutions dans l'espace
francophone. <a href="https://www.april.org/fr/association/">En savoir
plus…</a>.</p>
</blockquote>
<p> </p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

314
html-websites/cipherbliss_blog/2020/cipherbliss_blog_229_live-toot-de-la-conference-avec-etienne-klein/index.html Normal file
View File

@ -0,0 +1,314 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1504</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2020-11-18 11:03:46&gt;</li>
<li>modifié: &lt;2020-11-18 11:11:51&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="live-toot-de-la-conférence-avec-etienne-klein">Live toot de la
conférence avec Etienne Klein</h2>
<p>live toot de la conférence de l'<a
href="https://mastodon.cipherbliss.com/tags/AFIS">#AFIS</a> (asso
française pour l'information scientifique) avec Etienne Klein et la <a
href="https://mastodon.cipherbliss.com/tags/SFEN">#SFEN:</a></p>
<blockquote>
<p>Faire de la science ça ne veut pas dire qu'on ne peut pas se tromper.
Tous les scientifiques se trompent régulièrement. L'intérêt de la
science consiste à faire examiner nos connaissances avec une méthode
précise, afin de savoir comment on se trompe. Combien de personnes ayant
fait des déclarations qui se sont montrées erronées sont venues ensuite
dire qu'elles se sont trompées? Il est primordial de savoir reconnaître
que l'on se trompe quand c'est le cas pour faire avancer la
connaissance. Faire de la science, cultiver son esprit critique, c'est
penser contre son propre cerveau. "C'est pas une guéguerre entre les
scientifiques et la population, les scientifiques sont déjà eux-même
incultes en science. Si je vais voir un physicien du CEA où je
travaille, et que je lui demande "c'est quoi une cellule souche? c'est
quoi un OGM? c'est quoi la 5G?" il y a très peu de chances que
j'obtienne une bonne réponse. La compétence dans un domaine ne signifie
pas la compétence dans toute la science. Comment font alors les gens qui
n'ont pas la moindre formation scientifique pour faire le tri dans
toutes les informations qui leur sont proposées? Par des jeux
d'influence et d'arguments d'autorité. il nous faut restaurer l'idée
qu'il existe une différence entre une croyance et une connaissance. Et
qu'on ne peut pas être totalement dénué de croyance. On doit se poser la
question de "comment on a obtenu les connaissances que l'on a
aujourd'hui", dans l'histoire des idées? on peut tout à fait être
militant et ne pas du tout savoir comment défendre avec des arguments ce
que l'on revendique. C'est très grave, parce que ça veut dire qu'on peut
défendre tout et surtout n'importe quoi sans ne rien y comprendre. Quand
on est jeune on a beaucoup de temps pour apprendre, mais heureusement
après aussi. Encore faut il souhaiter davantage la recherche de la
vérité que de suivre aveuglément un groupe paradoxalement, la
propagation de la pensée critique - dans ce qu'elle est réellement, à
savoir, exercer sa réflexion contre nos propres biais cognitifs-
nécessite que l'on restaure des figures d'autorité scientifique.
Quelqu'un qui défend une thèse conspirationniste tout à fait farfelue en
invoquant sa pratique de l'esprit critique, ne pratique pas l'esprit
critique contre un certain ensemble de choses précises. Il faut aussi
comprendre que la science dit comment les choses sont, mais ne prescrit
pas ce que nous devons en faire. il faut faire la distinction avec ce
qui relève de l'éthique, de la prescription sociale, morale, et le rôle
de l'expert qui a une certaine connaissance de ce que les choses sont.
Prescrire une utilisation, appartient au registre du politique (et non
du politicien), dans son sens premier: les décisions relatives aux choix
de vie de la cité.</p>
</blockquote>
<p>La conférence était assez courte, et le live tooting est un exercice
qui consiste à rapporter les idées en même temps que la conférence se
fait. J'ai donc écrit ce qui suit après la fin de la conf: J'ajouterai
qu'il est primordial dans la réception de toute information de savoir
prendre du recul et se demander à quel point ce que l'on reçoit a fait
l'examen de vérifications par des gens compétents en amont. Spoiler
alert: c'est rarement le cas, et tout média vivant de la publicité ou
appartenant à des dirigeants de multinationales subissent de
l'autocensure et sont interdits de traîter énormément de sujets qui
feraient de l'ombre à leur employeur et à ses annonceurs. Ces
contraintes broient toute idée qui passe par de tels médias pour les
transformer en spectacle affriolant. C'est très différent de ce à quoi
tend la recherche de la vérité et du fonctionnement du monde empirique.
Il faut absolument cesser de croire que si quelqu'un est convaincant il
détient la vérité absolue et qu'il ne se trompe jamais. Il faut
absolument cesser de croire que toutes les opinions se valent, que tout
peut être remis en question n'importe comment (le relativisme absolu),
et que vous devez adopter n'importe quelle info sans devoir faire vous
même à un moment le tri. ça n'a jamais été une bonne idée et ça ne le
sera jamais. Au contraire, surtout si quelqu'un est incapable de
reconnaître quand il se trompe, ou qu'il ignore quelque chose, c'est
très mauvais signe quant à la fiabilité de ses communications et à son
approche du monde réel. L'indépendance des médias manque cruellement au
panorama de la communication scientifique, c'est le résultat d'un jeu de
pouvoirs qui privilégie la continuité d'une vision féodale de
l'information. Une vision que l'on peut aujourd'hui changer en
comprenant les travers actuels, les biais cognitifs, et en se servant de
l'horizontalité d'internet. Tout le monde peut se tromper, et c'est une
qualité que de reconnaître ses torts, c'est le seul moyen pour enfin
passer à autre chose et s'améliorer. La crise du <a
href="https://mastodon.cipherbliss.com/tags/COVID19">#COVID19</a> aura
permis de mettre sur le devant de la scène l'aspect catastrophique des
communications qui se revendiquent de "scientifique" alors qu'elles ne
font que se répandre dans le spectacle en donnant carte blanche et un
mégaphone aux pires charlatans qu'ils puissent trouver. Ce qui a des
conséquences sanitaires démesurées, pour lesquelles les responsables de
diffusion, ne subissent aucune ombre et font le moins de remise en
question possible. Bref, sortez couverts et bossez votre <a
href="https://skeptikon.fr/accounts/hygienementale">@hygienementale</a>
ou vous finirez par avoir La tronche en biais ;) Vous pouvez aller plus
loin dans les travaux des différentes personnes en place en visitant le
site de l' <a
href="https://mastodon.cipherbliss.com/tags/afis">#afis</a> ou en vous
procurant un des magazines "Science et Pseudo-science" <a
href="https://www.afis.org"><span>https://www.afis.org</span></a> et de
la <a href="https://mastodon.cipherbliss.com/tags/SFEN">#SFEN</a>
(société française de l'énergie nucléaire) <a
href="https://www.sfen.org"><span>https://www.sfen.org</span></a> ,
Etienne Klein a aussi son site est passe sur france culture tous les
Samedis à 16h. <a
href="https://etienneklein.fr/"><span>https://etienneklein.fr/</span></a>
Comme dirait Captain Disillusion, professionel des effets spéciaux vidéo
qui débunke des trucages: "Aimez avec votre cœur, mais pour tout le
reste, servez-vous de votre tête." je vous recommande aussi le court <a
href="https://mastodon.cipherbliss.com/tags/fanzine">#fanzine</a> à 3€
que M. Klein qualifie de tract, nommé "le goût du vrai". ça permet
d'apprendre un peu plus en détail comment mieux débattre avec des gens,
qu'ils soient des proches ou de parfaits inconnus. Voici les tags des
termes liés sur mastodon: <a
href="https://mastodon.cipherbliss.com/tags/debattonsMieux">#debattonsMieux </a><a
href="https://mastodon.cipherbliss.com/tags/communicationScientifique">#communicationScientifique</a>
<a
href="https://mastodon.cipherbliss.com/tags/nofakescience">#nofakescience</a>
<a href="https://mastodon.cipherbliss.com/tags/science">#science</a> <a
href="https://mastodon.cipherbliss.com/tags/COVID19">#COVID19</a></p>
<p><a
href="https://mastodon.cipherbliss.com/web/statuses/105225488898963210">publié
à l'origine sur Mastodon Cipherbliss</a></p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

274
html-websites/cipherbliss_blog/2020/cipherbliss_blog_230_passage-dans-lemission-libre-a-vous-le-17-novembre-2020/index.html Normal file
View File

@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1508</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2020-11-25 11:19:11&gt;</li>
<li>modifié: &lt;2020-11-25 11:31:54&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="passage-dans-lémission-libre-à-vous-le-17-novembre-2020">Passage
dans l'émission "Libre à vous !" le 17 novembre 2020</h2>
<p>Le 17 Novembre 2020 j'étais invité à l'Émission <em>Libre à
vous !</em> diffusée mardi 17 novembre 2020 sur radio Cause Commune. La
même émission pour laquelle j'ai proposé un script pour <a
href="https://www.cipherbliss.com/recuperer-de-la-musique-libre-de-lemission-cause-commune/">extraire
toutes les musiques libres mises à disposition par l'April</a>. J'ai
donc été invité par Frédéric Couchet pour causer de ce que je fais dans
le <a href="https://entraide.chatons.org">CHATONS</a> de l'<a
href="https://www.april.org">April</a> que l'on peut trouver sur
Chapril.org , comment j'y suis arrivé et quelles actions j'y mène pour
faire la promotion d'une solution d'organisation d'évènements en ligne
avec Mobilizon, et plus largement faire comprendre à tout un chacun les
dangers des GAFAM, et comment s'en émanciper concrètement. Voici le
fichier audio que <a
href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20201117/libre-a-vous-20201117.ogg">vous
pouvez télécharger</a>: [embed]<a
href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20201117/libre-a-vous-20201117.ogg%5B/embed%5D">https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20201117/libre-a-vous-20201117.ogg[/embed]</a>
La transcription texte de l'émission est aussi disponible ici grâce au
formidable boulot de l'équipe. <a
href="https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020">https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020</a></p>
<blockquote>
<p><strong>Intervenant·e·s :</strong> Noémie Bergez - Élodie
Déniel-Girodon - Fabrice Noël - Baptiste Lemoine - Jean-Christophe
Becquet - Isabella Vanni - Frédéric Couchet - Étienne Gonnu à la régie
<strong>Lieu :</strong> Radio Cause Commune <strong>Date :</strong> 17
novembre 2020 <strong>Durée :</strong> 1 h 30 min <strong>Sommaire de
l'émission:</strong></p>
<ol>
<li>[[<a
href="https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020#Chronique_In_code_we_trust_de_Noemie_Bergez_sur_le_theme_de_la_securisation_des_donnees">https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020#Chronique_In_code_we_trust_de_Noemie_Bergez_sur_le_theme_de_la_securisation_des_donnees</a>][Chronique
« In code we trust » de Noémie Bergez sur le thème de la sécurisation
des données]]</li>
<li>[[<a
href="https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020#Chronique_Pepites_libres_de_Jean-Christophe_Becquet_sur_Sounds_of_the_Forest">https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020#Chronique_Pepites_libres_de_Jean-Christophe_Becquet_sur_Sounds_of_the_Forest</a>][Chronique
« Pépites libres » de Jean-Christophe Becquet sur /Sounds of the
Forest/]]</li>
<li>[[<a
href="https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020#Au_coeur_de_l-April_deconfinee_._Plusieurs_personnes_actives_au_sein_de_l-April_parleront_des_groupes_de_travail_des_activites_de_l-April_son_fonctionnement._Nous_parlerons_egalement_des_coulisses_de_l-emission">https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020#Au_coeur_de_l-April_deconfinee_._Plusieurs_personnes_actives_au_sein_de_l-April_parleront_des_groupes_de_travail_des_activites_de_l-April_son_fonctionnement._Nous_parlerons_egalement_des_coulisses_de_l-emission</a>][« Au
cœur de l'April (dé)confinée ». Plusieurs personnes actives au sein de
l'April parleront des groupes de travail, des activités de l'April, son
fonctionnement. Nous parlerons également des coulisses de
l'émission]]</li>
<li>[[<a
href="https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020#Quoi_de_Libre_Actualites_et_annonces_concernant_l-April_et_le_monde_du_Libre">https://www.april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-17-novembre-2020#Quoi_de_Libre_Actualites_et_annonces_concernant_l-April_et_le_monde_du_Libre</a>][Quoi
de Libre ? Actualités et annonces concernant l'April et le monde du
Libre]]</li>
</ol>
</blockquote>
<p>J'ai été ravi de pouvoir m'exprimer dans cette émission et causer de
mon parcours qui a débuté avant l'apparition d'internet dans les
chaumières, de comment j'ai pu mixer l'aspect dessin collaboratif,
fanzinat (Mangastyl, E-kaki, Paintchat, flood IRC, contrib
Openstreetmap… rha zut j'ai oublié de parler de <a
href="https://www.qzine.fr">Qzine.fr</a>), sorties de petite vadrouille,
accompagnements divers à l'émancipation et l'éducation populaire comme
je peux la pratiquer sur ce blog, en contribuant à divers projets en
lien avec Framasoft et les CHATONS, ou avec des ateliers associatifs en
direct avec des gens de tous les âges et tous les niveaux. Des choses
qui seront bien plus faciles à pratiquer le jour où on pourra se réunir
en live avec des gens. En attendant on s'en sort en organisant des
ateliers à distance, ou juste des prises de nouvelles informelles pour
garder le contact, avec des solutions de chatons et du logiciel libre,
tout en cherchant à ne pas prêcher du convaincu. C'est une émission qui
parait tous les Mardis, on peut en écouter un paquet depuis le temps que
ça existe. J'avais déjà écouté quelques autres diffusions avant qu'on ne
me propose d'y prêter ma voix. On y aborde des sujets à propos de
féminisme, éducation, initiatives pour rendre aux femmes leur place dans
les métiers de la technologie en général, cartographie, encyclopédie
contributive, hackerspace, tiers lieux, bio hacking, projets montrant un
autre aspect du monde comme dans la section des pépites libres,
s'informer sur tout ce qui se fait de collaboratif, comprendre mieux les
textes juridiques, s'informer découvrir la culture du monde, entendre
des gens dont je vois passer les pseudos sur Mastodon ou dans des
conférences d'évènements auquel j'ai pu me rendre. à chaque fois on
découvre des choses interessantes. Mangez-en!! Comme dirait l'autre, la
route est longue mais la voie est libre!</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

274
html-websites/cipherbliss_blog/2021/cipherbliss_blog_211_plan-darchivage-et-de-backup/index.html Normal file
View File

@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1375</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2021-05-27 13:30:58&gt;</li>
<li>modifié: &lt;2021-05-27 13:30:58&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="plan-darchivage-et-de-backup-1">Plan d'archivage et de
backup</h2>
<p>plan<sub>darchivage20200531093512</sub></p>
<h3 id="définir-ce-que-lon-veut-sauvegarder">Définir ce que l'on veut
sauvegarder</h3>
<p>des fichiers de serveurs et sites web, ce qui inclut des sauvegardes
de bases de données régulières, des documens perso comprenant boulot et
loisirs, des copies de choses produites par d'autres gens, mon tel,</p>
<h3 id="concentrer-le-bazar">Concentrer le bazar</h3>
<p>Ranger ensemble ce qui n'est pas rangé, faire des dossiers pour le
reste. Un dossier _"<sub>BAZAR</sub>" pour tout ce qui n'est pas encore
rangé</p>
<p>Premièrement: organiser tout ça dans un seul dossier de sauvegarde
sur un périphérique avec énormément de place</p>
<h3 id="automatiser-les-sauvegardes">Automatiser les sauvegardes</h3>
<p>Compresser et historiser ce gros dossier. En faire des copies par
rsync sur d'autres disques et sur un ordinateur distant</p>
<h3 id="cloud-chiffré">cloud chiffré</h3>
<p>Tresorit. ProtonDrive.</p>
<h2 id="utiliser-votre-disque-externe.">utiliser votre disque
externe.</h2>
<p>Dans l'onglet Schedule on demande à ce que vorta soit lancé au
démarrage de l'ordinateur et qu'il s'exécute toutes les heures.</p>
<p>On a plus qu'a démarrer le premier <em>backup</em> avec le bouton en
bas, et roulez jeunesse.</p>
<p><img
src="https://www.cipherbliss.com/wp-content/uploads/2021/05/vorta.png" /></p>
<p> </p>
<p> </p>
<p>Plus qu'a attendre quelques minutes ou heures selon le volume de
trucs à sauvegarder et la force de compression que vous avez choisi.</p>
<h1 id="répliquez-les-tous">Répliquez les tous</h1>
<p>On a notre archive qui se met à jour toute seule, on a plus qu'a
sauvegarder ailleurs notre sauvegarde. Pour le grand public je conseille
donc d'utiliser Grsync, une interface graphique de Rsync, logiciel de
syncronisation de fichiers.</p>
<p>Nous devons donc dire à Grsync que l'on veut copier notre repository
(la source) vers un disque externe (la destination). On appuie sur
syncroniser, et c'est parti.</p>
<h1 id="cool-ça-marche">Cool ça marche</h1>
<p>oui, bon c'est cool tout ça, mais grsync ne va pas copier tout seul
automatiquement votre repository après les sauvegardes, et si vous
oubliez d'appuyer sur le bouton dans Grsync pendant longtemps, votre
disque externe n'est jamais à jour. Et ce qui serait bien c'est d'avoir
vos disques externes en plusieurs exemplaires, sur des lieux physiques
différents. Typiquement vous pouvez confier un disque à une amie, à
votre famille, à une asso ou dans un coffre enterré dans une enveloppe
étanche, en faisant des permutations de disque de temps à autre :D</p>
<p>Comme ça, même si chez vous survient une catastrophe vous n'aurez pas
tout perdu. Et grâce au chiffrement de votre repository, même si votre
autre lieu a un cambriolage, le contenu de l'archive ne sera pas lisible
sans la phrase de passe.</p>
<p>C'est pourquoi je préfère utiliser un script de syncro qui se lance
automatiquement par cronjob toutes les x minutes. Mais ça, c'est une
autre histoire.</p>
<h1 id="tester-la-restauration">Tester la restauration</h1>
<p>Dernier point, vérifiez que vous pouvez restaurer des fichiers avec
votre repository de temps en temps. Parce que c'est bien beau de faire
des archives, si elles sont corrompues ça ne vous aidera pas quand la
bise sera venue. Un bon petit rappel de calendrier tous les 3 mois
devrait vous aider à vérifier que tout est propre.</p>
<h1 id="faire-du-propre-dans-sa-maison">Faire du propre dans sa
maison</h1>
<p>En parlant de propre, vous pouvez utiliser Baobab pour visualiser les
dossiers qui prennent le plus de place. Ce logiciel libre est déjà
présent dans ubuntu. Le meilleur moyen d'avoir des archives utiles reste
de supprimer le merdier qu'elle contient. C'est une tâche longue et
difficile, mais ça vaut le coup si on veut ensuite pouvoir retrouver
très rapidement des choses par un simple ctrl+f dans ses dossiers.</p>
<p>/baobab <em>home</em></p>
<p>lancez le sur votre home pour trouver les trucs à virer de vos
archives.</p>
<p>Si vous avez des astuces aussi, faites passer! :)</p>
<p>[caption id="attachment<sub>1559</sub>" align="aligncenter"
width="620"]<a
href="https://www.cipherbliss.com/wp-content/uploads/2021/05/strategie_backup-scaled.jpg">[[<span>https://www.cipherbliss.com/wp-content/uploads/2021/05/strategie_backup-724x1024.jpg</span></a>]]
Created with GIMP[/caption]</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

307
html-websites/cipherbliss_blog/2021/cipherbliss_blog_233_actus-de-fevrier-2021/index.html Normal file
View File

@ -0,0 +1,307 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1543</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2021-02-23 00:54:00&gt;</li>
<li>modifié: &lt;2021-02-23 00:54:00&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="actus-de-février-2021">Actus de Février 2021</h2>
<p>Bonjour monde! Depuis la dernière fois avec <a
href="https://framadate-api.cipherbliss.com/#/ciphering">la page des
Ciphers</a> j'ai eu une semaine assez occupée.</p>
<p>Mardi je me suis rendu dans les locaux de <a
href="https://cause-commune.fm">CauseCommune</a> pour l'émission "<a
href="https://april.org/libre-a-vous">Libre à vous !</a>" du Mardi où
j'ai pu causer avec Madix, Isabella Vanni, Luk, Étienne, Vincent, et
d'autres chouettes gens de l'<a href="https://april.org">April</a> et de
la radio 93.1 FM.</p>
<p><a
href="https://www.april.org/libre-a-vous-diffusee-mardi-16-fevrier-2021-sur-radio-cause-commune">https://www.april.org/libre-a-vous-diffusee-mardi-16-fevrier-2021-sur-radio-cause-commune</a></p>
<p>On a causé d'actions pro libre dans l'éducation, moi en tant que
parent d'élève, et Adrien (aka Neox, gérant du serveur XMPP du Chapril)
en tant qu'élève du supérieur dans une fac d'informatique.</p>
<p>Le podcast audio sera bientôt disponible et sa transcription a été
faite par Marie Odile, comme pour toutes les émissions de Libre à
vous.</p>
<p>On a aussi fait des photos</p>
<p><a
href="https://photos.april.org/index.php?/category/364">https://photos.april.org/index.php?/category/364</a></p>
<p><img
src="https://photos.april.org/_data/i/upload/2021/02/17/20210217160203-3ff5246c-me.jpg" /></p>
<p><img
src="https://photos.april.org/_data/i/upload/2021/02/17/20210217160213-e4f19e18-me.jpg" /></p>
<p><img
src="https://photos.april.org/_data/i/upload/2021/02/17/20210217160214-8664e78f-me.jpg" /></p>
<p><img
src="https://photos.april.org/_data/i/upload/2021/02/17/20210217160207-a276352d-me.jpg" /></p>
<p>C'était une très chouette expérience, et on a du écourter au maximum
à cause du couvre feu T<sub>T</sub></p>
<p>à propos de transcriptions, l'April a récemment publié <a
href="https://www.librealire.org/">Libre à lire point org</a> qui
regroupe tous les textes de l'émission, je me disais qu'il devait bien
exister des outils libres pour faire de l'aide à la transcription,
depuis bien avant que Mozilla sorte CommonVoice. En effet il en existe
des tas, c'est juste qu'ils sont pas bien faciles à faire
fonctionner.</p>
<p>Donc j'en ai essayé quelques uns en faisant pousser ma barbe, jusqu'à
trouver un qui soit en mesure de faire fonctionner sa démo selon sa
propre documentation.</p>
<p>J'ai pioché un exemple avec une lib en python nommée Vosk et soudain,
miracle, ça fonctionnait! et il y avait des modèles de données audio en
Français disponibles. J'ai donc tenté le coup sur un fichier audio de
quelques secondes où les gens parlaient très clairement et le résultat
était vraiment pas mal, pour très peu de code à faire.</p>
<p>J'ai donc entrepris de publier un dépôt git que tout le monde
pourrait installer un peu plus facilement que ce que j'ai eu à faire. il
suffit de suivre le guide du Readme, qui s'affiche sur l'accueil du
projet:</p>
<p><a
href="https://forge.chapril.org/tykayn/transcription">https://forge.chapril.org/tykayn/transcription</a></p>
<p>Le but du jeu étant de faire ceci:</p>
<ul>
<li>mettre les fichiers audio et vidéos dans un dossier en vue de les
transcrire.</li>
<li>lancer un script.</li>
<li>et hop, c'est bon</li>
</ul>
<p>on obtient un fichier texte de la transcription pour chacun des
fichiers sons ou vidéos demandés, dans des formats texte simple, texte
précédé par une info minute et seconde, et vrai fichier sous titre
<em>.srt</em> à ajouter dans une vidéo.</p>
<p>J'ai pu comme ça filer un coup de main à Marie Odile pour une
émission Décryptualité,</p>
<p>puis en causant sur IRC il y a eu aussi Khrys de Parinux qui bosse
avec d'autres gens à transcrire à la mano des conférences de la FFDN,
par exemple celles de Benjamin Bayard, le plus célèbre des "vieux con
des Internets".</p>
<p>une fois qu'on a installé le truc par la magie d'un <strong>git
clone</strong> et d'un <strong>make</strong> ça marche plutôt pas mal
pour faire une bonne base de travail et gagner plein de temps.</p>
<p>Mon script de conversion est documenté en français et sous licence
libre AGPLv3, afin de demeurer libre.</p>
<p>Je l'ai testé sur [[<a
href="https://peertube.cipherbliss.com/videos/watch/8a4bd1d7-f2f5-4773-af75-8f036a65c3f3">https://peertube.cipherbliss.com/videos/watch/8a4bd1d7-f2f5-4773-af75-8f036a65c3f3</a>][ma
vidéo de démonstration des ebook et mis en ligne le résultat du sous
titrage automatique]], l'idée générale est pas trop mal rendue dans les
transcriptions, mais beaucoup de mots que j'ai utilisé dans cette vidéo
sont pas évident à comprendre pour le bouzin. Rien que <em>MarkDown</em>
ou <em>Chapril</em> ça donne des remplacement marrants :D</p>
<p>Le script ne distingue pas encore les différentes personnes qui
parlent mais quelqu'un sur mastodon bosse sur le sujet et on se cause
tous les jours.</p>
<p>Breffe, ça pourrait vous être utile ce petit outil de transcription.
En tous cas, pour l'équipe de la radio (et les gens qui apprécient
d'avoir des logiciels libres faisant dans l'accessibilité à toutes les
déficiences, et particulièrement celles où on a besoin de lire) ça vaut
son pesant d'or ce genre de truc!</p>
<p>Le gros défi étant de rendre le truc lançable par des gens qui ne
sont pas à l'aise avec la programmation. Rien que lire le mode d'emploi
est un défi :D</p>
<p>J'aimerais rendre le truc aussi simple à utiliser qu'Etcher l'est
pour graver un iso.</p>
<p>Mais ça c'est pas pour tout de suite. Je dois me pencher pour faire
avancer Framadate.</p>
<p>En attendant, aujourd'hui a été publié officiellement l'ouverture du
service <a
href="https://mobilizon.chapril.org">https://mobilizon.chapril.org</a>
pour s'organiser de la plus intime raclette à la plus grande manif
internationale et autres entre deux en visio. Parinux utilise Mobilizon
pour ses soirées hebdo du jeudi et plein de gens aussi, comme les
collectifs chatons, les gens de framasoft, et certains gens font de
l'import massif depuis d'autres sources d'agendas en ligne.</p>
<p><a
href="https://mobilizon.chapril.org">[[<span>https://www.chapril.org/IMG/arton45.jpg?1607689105</span></a>]]</p>
<p>Donc vouala, pas mal de trucs et j'avance doucement sur mes lectures.
Coucou "science et pseudo science du 1er trimestre 2021", ainsi qu'un
autre sur Ada Lovelace, "La beauté des nombres").</p>
<p>à bientôt les cocos.</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

129
html-websites/cipherbliss_blog/2024/2024-11-03-création-d'un-blog-gemini/index.html
View File

@ -1,134 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<style type='text/css' src='style.css'></style><head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>cipherbliss_blog</title> <title>cipherbliss_blog</title>
<style type='text/css'>* { <style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
text-align: left;
margin: 0 auto;
font-size: 1.5rem;
line-height: 1.5em;
max-width: 60ch;
color: #000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
margin-top: 1em;
margin-bottom: 2rem;
color: #333;
}
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
/* Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
max-width: 100%;
}
/* Inherit fonts for form controls */
input,
button,
textarea,
select {
font: inherit;
}
/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* Improve line wrapping */
p {
text-wrap: pretty;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
line-height: 1.3em;
}
#root,
#__next {
isolation: isolate;
}
input,
button,
textarea,
select {
font: inherit;
}
ul {
padding-left: 4ch;
padding-right: 4ch;
}
li {
margin-bottom: 1em;
}
@media (max-width: 20rem) {
body {
padding: 1rem;
}
}
</style></head>
<body> <body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html> <a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">

129
html-websites/cipherbliss_blog/2024/20241108151758-ça-déménage/index.html
View File

@ -1,134 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<style type='text/css' src='style.css'></style><head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>cipherbliss_blog</title> <title>cipherbliss_blog</title>
<style type='text/css'>* { <style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
text-align: left;
margin: 0 auto;
font-size: 1.5rem;
line-height: 1.5em;
max-width: 60ch;
color: #000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
margin-top: 1em;
margin-bottom: 2rem;
color: #333;
}
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
/* Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
max-width: 100%;
}
/* Inherit fonts for form controls */
input,
button,
textarea,
select {
font: inherit;
}
/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* Improve line wrapping */
p {
text-wrap: pretty;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
line-height: 1.3em;
}
#root,
#__next {
isolation: isolate;
}
input,
button,
textarea,
select {
font: inherit;
}
ul {
padding-left: 4ch;
padding-right: 4ch;
}
li {
margin-bottom: 1em;
}
@media (max-width: 20rem) {
body {
padding: 1rem;
}
}
</style></head>
<body> <body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html> <a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">

192
html-websites/cipherbliss_blog/2024/soutien/index.html Normal file
View File

@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>cipherbliss_blog</title>
<style type='text/css'>{css_content}</style><link type='stylesheet/css' href='/style.css'></link></head>
<body>
<a href='/'>Retour à l'Accueil</a><hr/><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="soutien-1">Soutien</h1>
<p>[2024-11-03] Si vous aimez ce que nous faisons à Cipher Bliss, vous
pouvez nous soutenir de plusieurs façons: en faisant un micro don sur
liberapay. Donner : <a
href="https://liberapay.com/cipherbliss/donate">https://liberapay.com/cipherbliss/donate</a></p>
<p>Le plus simple nous pour nous faire connaître étant de partager cet
article. Suivez moi sur Mastodon @tykayn@mastodon.cipherbliss.com. <a
href="https://mastodon.cipherbliss.com/@tykayn">https://mastodon.cipherbliss.com/@tykayn</a></p>
<p>Ce site restera libre comme un gnou dans la nature et sans pubs,
parce qu'on vous aime. Que la source soit avec vous!</p>
</body>
</html>
<footer><hr/><a href='/'>Retour à l'Accueil</a></footer></body>
</html>

131
html-websites/cipherbliss_blog/index.html
View File

File diff suppressed because one or more lines are too long

85
index_cipherbliss_blog.gmi Normal file
View File

@ -0,0 +1,85 @@
# cipherbliss_blog - Articles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Navigation
-------------------------
=> index..gmi
=> contact..gmi
# Articles en Français
-------------------------
=> 20241108151758-ça-déménage..gmi
=> 2024-11-03-soutien..gmi
=> 2024-11-03-création-d'un-blog-gemini..gmi
=> 20210527133058_cipherbliss_blog_211_plan-darchivage-et-de-backup..gmi
=> 20210223005400_cipherbliss_blog_233_actus-de-fevrier-2021..gmi
=> 20201125111911_cipherbliss_blog_230_passage-dans-lemission-libre-a-vous-le-17-novembre-2020..gmi
=> 20201118110346_cipherbliss_blog_229_live-toot-de-la-conference-avec-etienne-klein..gmi
=> 20201112113141_cipherbliss_blog_228_recuperer-de-la-musique-libre-de-lemission-cause-commune..gmi
=> 20200714140305_cipherbliss_blog_223_refonte-de-framadate-avec-api..gmi
=> 20200621104759_cipherbliss_blog_218_entraide-locale-avec-des-affiches-et-un-pad-en-ligne..gmi
=> 20191028100923_cipherbliss_les-plateformes-sociales-privatives..gmi
=> 20190819145346_cipherbliss_blog_206_comment-se-faire-des-amis-sur-mastodon..gmi
=> 20190819144521_cipherbliss_blog_205_comment-devenir-un-artiste-a-succes-sur-mastodon..gmi
=> 20190721110110_cipherbliss_blog_201_lappel-du-collectif-nofakescience-sur-le-traitement-desastreux-de-la-science-dans-les-medias..gmi
=> 20190222134640_cipherbliss_blog_186_debuter-sur-openstreetmaps..gmi
=> 20190109154442_cipherbliss_blog_187_une-vraie-matiere-de-programmation-informatique-au-lycee..gmi
=> 20181119164812_cipherbliss_blog_181_comment-se-delester-de-la-charge-mentale..gmi
=> 20181009143617_cipherbliss_blog_175_10-raisons-pour-lesquelles-lopen-source-est-bon-pour-les-affaires..gmi
=> 20180928165919_cipherbliss_blog_177_les-obstacles-les-plus-frequents-au-travail-dequipe..gmi
=> 20180822122238_cipherbliss_blog_150_comment-ne-pas-repartir-de-zero-a-chaque-nouvel-ordi..gmi
=> 20180803160326_cipherbliss_blog_168_comment-ne-plus-perdre-de-temps-avec-ses-mots-de-passe..gmi
=> 20180713153958_cipherbliss_blog_167_la-detresse-emotionnelle-pour-installer-un-programme..gmi
=> 20180207120417_cipherbliss_blog_153_cest-du-tres-loud-du-tres-tres-lourd..gmi
=> 20170927222054_cipherbliss_blog_131_lautohebergement-cest-tellement-bien..gmi
=> 20170203145717_cipherbliss_blog_129_comment-facebook-choisit-vos-amis-a-votre-place..gmi
=> 20161226174242_cipherbliss_blog_127_faire-ses-factures-avec-libreoffice-ou-google-sheet..gmi
=> 20160925220750_cipherbliss_blog_124_ne-vous-dites-pas-programmeur..gmi
=> 20160824153918_cipherbliss_blog_121_changer-lediteur-de-texte-associe-a-git..gmi
=> 20160726204835_cipherbliss_blog_1_la-galaxie-des-fanzines..gmi
=> 20160726092648_cipherbliss_blog_2_ubuntu-party-15-10..gmi
=> 20160726084700_cipherbliss_blog_3_exporter-une-visualisation-de-son-schma-sql..gmi
=> 20160726082722_cipherbliss_blog_4_le-dysoon-de-djo..gmi
=> 20160511192505_cipherbliss_blog_5_conversion-de-pdf-en-image-et-ocr..gmi
=> 20160510145657_cipherbliss_blog_6_retour-d-exprience..gmi
=> 20160421131007_cipherbliss_blog_7_le-petit-printf..gmi
=> 20160102110725_cipherbliss_blog_10_gestion-de-projet..gmi
=> 20151208091242_cipherbliss_blog_11_twig-et-angular..gmi
=> 20151122152143_cipherbliss_blog_12_convertir-les-fichiers-de-config-de-symfony2-facilement..gmi
=> 20151122094803_cipherbliss_blog_13_2-degrs-avant-la-fin-du-monde..gmi
=> 20151118165642_cipherbliss_blog_14_il-suffit..gmi
=> 20151118102152_cipherbliss_blog_15_dveloppez-le-commerce-localhost..gmi
=> 20151116113834_cipherbliss_blog_16_inspirer-les-femmes-prendre-les-postes-qui-faconnent-le-monde..gmi
=> 20151111123141_cipherbliss_blog_17_les-resources-du-blog-sur-github..gmi
=> 20151108152227_cipherbliss_blog_18_dbuter-sa-gestion-de-projet..gmi
=> 20150925133619_cipherbliss_blog_20_dual-boot-windows-10-et-linux..gmi
=> 20150909150013_cipherbliss_blog_21_le-triangle-du-projet..gmi
=> 20150908121246_cipherbliss_blog_22_avoir-une-vie-prive..gmi
=> 20150706140018_cipherbliss_blog_24_des-live-templates-pour-angular-dans-intellij..gmi
=> 20150702150433_cipherbliss_blog_25_le-bash-de-vos-rves..gmi
=> 20150701120014_cipherbliss_blog_27_des-tests-plus-rapides-avec-jasmine..gmi
=> 20150630151830_cipherbliss_blog_28_paye-ton-arrondi-en-js..gmi
=> 20150626210550_cipherbliss_blog_29_installer-cozy-cloud-sur-son-serveur-ubuntu-14-04..gmi
=> 20150514195327_cipherbliss_blog_32_gnrateur-angular-jeej..gmi
=> 20150422104016_cipherbliss_blog_33_whatis-love..gmi
=> 20150421092707_cipherbliss_blog_34_faites-bosser-internet-pour-vous-avec-if-this-then-that..gmi
=> 20150417110334_cipherbliss_blog_37_calculez-votre-heure-de-rveil..gmi
=> 20150407142422_cipherbliss_blog_38_un-datepicker-dans-un-formulaire-symfony2..gmi
=> 20150330080405_cipherbliss_blog_39_les-dates-importantes-de-votre-vie..gmi
=> 20150330075127_cipherbliss_blog_40_les-24h-de-la-bd-et-autres-vnements-ont-leur-planning..gmi
=> 20150330074730_cipherbliss_blog_41_du-php-sexiste..gmi
=> 20150316092450_cipherbliss_blog_42_digital-learning-day-2015..gmi
=> 20150304150212_cipherbliss_blog_43_paye-ton-explication..gmi
=> 20141219122836_cipherbliss_blog_45_la-filbre-optique-c-est-pas-gagn..gmi
=> 20141219122038_cipherbliss_blog_46_la-neutralit-du-net..gmi
=> 20141016105818_cipherbliss_blog_47_capturer-et-annoter-facilement..gmi
=> 20140910192438_cipherbliss_blog_48_signez-pour-la-neutralit-du-net..gmi
=> 20140904202028_cipherbliss_blog_49_schema-graphique-de-base-de-donnes..gmi
=> 20140904100304_cipherbliss_blog_50_la-thorie-des-chaines-de-caractre..gmi
=> 20140811095601_cipherbliss_blog_51_distributions-img-et-sauvegarde-de-carte-sd..gmi
=> 20131207203655_cipherbliss_blog_68_afficher-le-jour-de-la-semaine-dans-la-barre-d-ubuntu..gmi
=> 20131127221604_cipherbliss_blog_70_dcaler-les-sous-titres-dans-vlc-media-player..gmi
=> 20130606195819_cipherbliss_blog_78_clavier-lumineux..gmi
=> 20120912132000_cipherbliss_blog_89_tutoriel-de-plugin-jquery..gmi
=> 20111206041850_cipherbliss_blog_110_maison-l-preuve-des-zombies-et-des-tmoins-de-jovah..gmi

0
sources/cipherbliss_blog/de coté/20111206041850_cipherbliss_blog_110_maison-l-preuve-des-zombies-et-des-tmoins-de-jovah.org → sources/cipherbliss_blog/lang_fr/20111206041850_cipherbliss_blog_110_maison-l-preuve-des-zombies-et-des-tmoins-de-jovah.org
View File

0
sources/cipherbliss_blog/de coté/20120912132000_cipherbliss_blog_89_tutoriel-de-plugin-jquery.org → sources/cipherbliss_blog/lang_fr/20120912132000_cipherbliss_blog_89_tutoriel-de-plugin-jquery.org
View File

0
sources/cipherbliss_blog/de coté/20130606195819_cipherbliss_blog_78_clavier-lumineux.org → sources/cipherbliss_blog/lang_fr/20130606195819_cipherbliss_blog_78_clavier-lumineux.org
View File

0
sources/cipherbliss_blog/de coté/20131127221604_cipherbliss_blog_70_dcaler-les-sous-titres-dans-vlc-media-player.org → sources/cipherbliss_blog/lang_fr/20131127221604_cipherbliss_blog_70_dcaler-les-sous-titres-dans-vlc-media-player.org
View File

0
sources/cipherbliss_blog/de coté/20140811095601_cipherbliss_blog_51_distributions-img-et-sauvegarde-de-carte-sd.org → sources/cipherbliss_blog/lang_fr/20140811095601_cipherbliss_blog_51_distributions-img-et-sauvegarde-de-carte-sd.org
View File

0
sources/cipherbliss_blog/de coté/20140904100304_cipherbliss_blog_50_la-thorie-des-chaines-de-caractre.org → sources/cipherbliss_blog/lang_fr/20140904100304_cipherbliss_blog_50_la-thorie-des-chaines-de-caractre.org
View File

0
sources/cipherbliss_blog/de coté/20140904202028_cipherbliss_blog_49_schema-graphique-de-base-de-donnes.org → sources/cipherbliss_blog/lang_fr/20140904202028_cipherbliss_blog_49_schema-graphique-de-base-de-donnes.org
View File

0
sources/cipherbliss_blog/de coté/20140910192438_cipherbliss_blog_48_signez-pour-la-neutralit-du-net.org → sources/cipherbliss_blog/lang_fr/20140910192438_cipherbliss_blog_48_signez-pour-la-neutralit-du-net.org
View File

0
sources/cipherbliss_blog/de coté/20141016105818_cipherbliss_blog_47_capturer-et-annoter-facilement.org → sources/cipherbliss_blog/lang_fr/20141016105818_cipherbliss_blog_47_capturer-et-annoter-facilement.org
View File

0
sources/cipherbliss_blog/de coté/20141219122038_cipherbliss_blog_46_la-neutralit-du-net.org → sources/cipherbliss_blog/lang_fr/20141219122038_cipherbliss_blog_46_la-neutralit-du-net.org
View File

0
sources/cipherbliss_blog/de coté/20141219122836_cipherbliss_blog_45_la-filbre-optique-c-est-pas-gagn.org → sources/cipherbliss_blog/lang_fr/20141219122836_cipherbliss_blog_45_la-filbre-optique-c-est-pas-gagn.org
View File

0
sources/cipherbliss_blog/de coté/20150304150212_cipherbliss_blog_43_paye-ton-explication.org → sources/cipherbliss_blog/lang_fr/20150304150212_cipherbliss_blog_43_paye-ton-explication.org
View File

0
sources/cipherbliss_blog/de coté/20150316092450_cipherbliss_blog_42_digital-learning-day-2015.org → sources/cipherbliss_blog/lang_fr/20150316092450_cipherbliss_blog_42_digital-learning-day-2015.org
View File

0
sources/cipherbliss_blog/de coté/20150330074730_cipherbliss_blog_41_du-php-sexiste.org → sources/cipherbliss_blog/lang_fr/20150330074730_cipherbliss_blog_41_du-php-sexiste.org
View File

0
sources/cipherbliss_blog/de coté/20150330075127_cipherbliss_blog_40_les-24h-de-la-bd-et-autres-vnements-ont-leur-planning.org → sources/cipherbliss_blog/lang_fr/20150330075127_cipherbliss_blog_40_les-24h-de-la-bd-et-autres-vnements-ont-leur-planning.org
View File

0
sources/cipherbliss_blog/de coté/20150330080405_cipherbliss_blog_39_les-dates-importantes-de-votre-vie.org → sources/cipherbliss_blog/lang_fr/20150330080405_cipherbliss_blog_39_les-dates-importantes-de-votre-vie.org
View File

0
sources/cipherbliss_blog/de coté/20150407142422_cipherbliss_blog_38_un-datepicker-dans-un-formulaire-symfony2.org → sources/cipherbliss_blog/lang_fr/20150407142422_cipherbliss_blog_38_un-datepicker-dans-un-formulaire-symfony2.org
View File

0
sources/cipherbliss_blog/de coté/20150417110334_cipherbliss_blog_37_calculez-votre-heure-de-rveil.org → sources/cipherbliss_blog/lang_fr/20150417110334_cipherbliss_blog_37_calculez-votre-heure-de-rveil.org
View File

0
sources/cipherbliss_blog/de coté/20150421092707_cipherbliss_blog_34_faites-bosser-internet-pour-vous-avec-if-this-then-that.org → sources/cipherbliss_blog/lang_fr/20150421092707_cipherbliss_blog_34_faites-bosser-internet-pour-vous-avec-if-this-then-that.org
View File

0
sources/cipherbliss_blog/de coté/20150422104016_cipherbliss_blog_33_whatis-love.org → sources/cipherbliss_blog/lang_fr/20150422104016_cipherbliss_blog_33_whatis-love.org
View File

Some files were not shown because too many files have changed in this diff Show More