Initialisation du dépôt

.htaccess

+Options -Indexes
+
+# ARCHIVED
+# RewriteEngine On
+# RewriteCond %{HTTPS} off
+# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
+
+ErrorDocument 404 /404.html
+
+# SET CSP HEADER
+<IfModule mod_headers.c>
+Header set Content-Security-Policy "upgrade-insecure-requests"
+</IfModule>
+
+<IfModule mod_headers.c>
+Header always set X-FRAME-OPTIONS "DENY"
+</IfModule>
+
+# CONTENT-TYPE
+AddDefaultCharset "utf-8"
+
+# FORCE HTTPS REDIRECTION
+RewriteEngine on
+RewriteCond %{SERVER_PORT} 80 [OR]
+RewriteCond %{HTTP_HOST} ^quaternum\.net$ [NC]
+RewriteRule ^(.*) https://www.quaternum.net/$1 [QSA,L,R=301]
+# HSTS
+<IfModule mod_headers.c>
+Header set Strict-Transport-Security "max-age=15811200; includeSubDomains; preload"
+</IfModule>
+
+# XSS SECURITY
+<IfModule mod_headers.c>
+Header always set X-XSS-Protection "1; mode=block"
+</IfModule>
+
+# HTTP "X-Content-Type-Options"
+<IfModule mod_headers.c>
+Header always set X-Content-Type-Options "nosniff"
+</IfModule>
+
+# SET-COOKIE
+<IfModule mod_headers.c>
+Header set Set-Cookie HttpOnly;Secure
+</IfModule>
\ No newline at end of file

404.markdown

+---
+layout: default
+title: "404: Page not found"
+permalink: 404.html
+---
+
+<div class="page">
+  <h1 class="page-title">404 : page non trouvée</h1>
+  <p class="lead">Oups, l'URL demandée n'a pas été trouvée...<br>
+  	<a href="{{ site.baseurl }}">Retour à la page d'accueil</a>, ou <a href="/a-propos">sur la page de contact</a>.</p>
+</div>

Rakefile

+# coding: utf-8
+task :default => :preview
+
+# CONFIGURATION VARIABLES (on top of those defined by Jekyll in _config(_deploy).yml)
+#
+# PREVIEWING
+# If your project is based on compass and you want compass to be invoked
+# by the script, set the $compass variable to true
+#
+# $compass = false # default
+# $compass = true  # if you wish to run compass as well
+#
+# Notice that Jekyll 2.0 supports sass natively, so you might want to have a look
+# at the functions provided by Jekyll instead of using the functions provided here.
+#
+# MANAGING POSTS
+# Set the extension for new posts (defaults to .textile, if not set)
+#
+# $post_ext = ".textile"  # default
+# $post_ext = ".md"       # if you prefer markdown
+#
+# Set the location of new posts (defaults to "_posts/", if not set).
+# Please, terminate with a slash:
+#
+# $post_dir = "_posts/"
+#
+# MANAGING MULTI-USER WORK
+# If you are using git to manage the sources, you might want to check the repository
+# is up-to-date with the remote branch, before deploying.  In fact---when this is not the
+# case---you end up deploying a previous version of your website.
+#
+# The following variable determines whether you want to check the git repository is
+# up-to-date with the remote branch and, if not, issue a warning.
+#
+# $git_check = true
+#
+# It is safe to leave the variable set to true, even if you do not manage your sources
+# with git.
+#
+# The following variable controls whether we push to the remote branch after deployment,
+# committing all uncommitted changes
+#
+# $git_autopush = false
+#
+# If set to true, the sources have to be managed by git or an error message will be issued.
+#
+# ... or load them from a file, e.g.:
+#
+load '_rake-configuration.rb' if File.exist?('_rake-configuration.rb')
+
+#
+# --- NO NEED TO TOUCH ANYTHING BELOW THIS LINE ---
+#
+
+# Specify default values for variables NOT set by the user
+
+$post_ext ||= ".textile"
+$post_dir ||= "_posts/"
+$git_check ||= true
+$git_autopush ||= false
+
+#
+# Tasks start here
+#
+
+desc 'Clean up generated site'
+task :clean do
+  cleanup
+end
+
+
+desc 'Preview on local machine (server with --auto)'
+task :preview => :clean do
+  compass('compile') # so that we are sure sass has been compiled before we run the server
+  compass('watch &')
+  jekyll('serve --watch')
+end
+task :serve => :preview
+
+
+desc 'Build for deployment (but do not deploy)'
+task :build, [:deployment_configuration] => :clean do |t, args|
+  args.with_defaults(:deployment_configuration => 'deploy')
+  config_file = "_config_#{args[:deployment_configuration]}.yml"
+
+  if rake_running then
+    puts "\n\nWarning! An instance of rake seems to be running (it might not be *this* Rakefile, however).\n"
+    puts "Building while running other tasks (e.g., preview), might create a website with broken links.\n\n"
+    puts "Are you sure you want to continue? [Y|n]"
+
+    ans = STDIN.gets.chomp
+    exit if ans != 'Y' 
+  end
+
+  compass('compile')
+  jekyll("build --config _config.yml,#{config_file}")
+end
+
+
+desc 'Build and deploy to remote server'
+task :deploy, [:deployment_configuration] => :build do |t, args|
+  args.with_defaults(:deployment_configuration => 'deploy')
+  config_file = "_config_#{args[:deployment_configuration]}.yml"
+
+  text = File.read("_config_#{args[:deployment_configuration]}.yml")
+  matchdata = text.match(/^deploy_dir: (.*)$/)
+  if matchdata
+
+    if git_requires_attention then
+      puts "\n\nWarning! It seems that the local repository is not in sync with the remote.\n"
+      puts "This could be ok if the local version is more recent than the remote repository.\n"
+      puts "Deploying before committing might cause a regression of the website (at this or the next deploy).\n\n"
+      puts "Are you sure you want to continue? [Y|n]"
+
+      ans = STDIN.gets.chomp
+      exit if ans != 'Y' 
+    end
+
+    deploy_dir = matchdata[1]
+    sh "rsync -avz --delete _site/ #{deploy_dir}"
+    time = Time.new
+    File.open("_last_deploy.txt", 'w') {|f| f.write(time) }
+    %x{git add -A && git commit -m "autopush by Rakefile at #{time}" && git push} if $git_autopush
+  else
+    puts "Error! deploy_url not found in _config_deploy.yml"
+    exit 1
+  end
+end
+
+
+desc 'Create a post'
+task :create_post, [:date, :title, :category, :content] do |t, args|
+  if args.title == nil then
+    puts "Error! title is empty"
+    puts "Usage: create_post[date,title,category,content]"
+    puts "DATE and CATEGORY are optional"
+    puts "DATE is in the form: YYYY-MM-DD; use nil or empty for today's date"
+    puts "CATEGORY is a string; nil or empty for no category"
+    exit 1
+  end
+  if (args.date != nil and args.date != "nil" and args.date != "" and args.date.match(/[0-9]+-[0-9]+-[0-9]+/) == nil) then
+    puts "Error: date not understood"
+    puts "Usage: create_post[date,title,category,content]"
+    puts "DATE and CATEGORY are optional"
+    puts "DATE is in the form: YYYY-MM-DD; use nil or the empty string for today's date"
+    puts "CATEGORY is a string; nil or empty for no category"
+    puts ""
+
+    title = args.title || "title"
+
+    puts "Examples: create_post[\"\",\"#{args.title}\"]"
+    puts "          create_post[nil,\"#{args.title}\"]"
+    puts "          create_post[,\"#{args.title}\"]"
+    puts "          create_post[#{Time.new.strftime("%Y-%m-%d")},\"#{args.title}\"]"
+    exit 1
+  end
+
+  post_title = args.title
+  post_date = (args.date != "" and args.date != "nil") ? args.date : Time.new.strftime("%Y-%m-%d %H:%M:%S %Z")
+
+  # the destination directory is <<category>>/$post_dir, if category is non-nil
+  # and the directory exists; $post_dir otherwise (a category tag is added in
+  # the post body, in this case)
+  post_category = args.category
+  if post_category and Dir.exists?(File.join(post_category, $post_dir)) then
+    post_dir = File.join(post_category, $post_dir)
+    yaml_cat = nil
+  else
+    post_dir = $post_dir
+    yaml_cat = post_category ? "category: #{post_category}\n" : nil
+  end
+
+  def slugify (title)
+    # strip characters and whitespace to create valid filenames, also lowercase
+    return title.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '')
+  end
+
+  filename = post_date[0..9] + "-" + slugify(post_title) + $post_ext
+
+  # generate a unique filename appending a number
+  i = 1
+  while File.exists?(post_dir + filename) do
+    filename = post_date[0..9] + "-" +
+               File.basename(slugify(post_title)) + "-" + i.to_s +
+               $post_ext 
+    i += 1
+  end
+
+  # the condition is not really necessary anymore (since the previous
+  # loop ensures the file does not exist)
+  if not File.exists?(post_dir + filename) then
+    File.open(post_dir + filename, 'w') do |f|
+      f.puts "---"
+      f.puts "title: \"#{post_title}\""
+      f.puts "layout: default"
+      f.puts yaml_cat if yaml_cat != nil
+      f.puts "date: #{post_date}"
+      f.puts "---"
+      f.puts args.content if args.content != nil
+    end  
+
+    puts "Post created under \"#{post_dir}#{filename}\""
+
+    sh "open \"#{post_dir}#{filename}\"" if args.content == nil
+  else
+    puts "A post with the same name already exists. Aborted."
+  end
+  # puts "You might want to: edit #{$post_dir}#{filename}"
+end
+
+
+desc 'Create a post listing all changes since last deploy'
+task :post_changes do |t, args|
+  content = list_file_changed
+  Rake::Task["create_post"].invoke(Time.new.strftime("%Y-%m-%d %H:%M:%S"), "Recent Changes", nil, content)
+end
+
+
+desc 'Show the file changed since last deploy to stdout'
+task :list_changes do |t, args|
+  content = list_file_changed
+  puts content
+end
+
+
+#
+# support functions for generating list of changed files
+#
+
+def list_file_changed
+  content = "Files changed since last deploy:\n"
+  IO.popen('find * -newer _last_deploy.txt -type f') do |io| 
+    while (line = io.gets) do
+      filename = line.chomp
+      if user_visible(filename) then
+        content << "* \"#{filename}\":{{site.url}}/#{file_change_ext(filename, ".html")}\n"
+      end
+    end
+  end 
+  content
+end
+
+# this is the list of files we do not want to show in changed files
+EXCLUSION_LIST = [/.*~/, /_.*/, "javascripts?", "js", /stylesheets?/, "css", "Rakefile", "Gemfile", /s[ca]ss/, /.*\.css/, /.*.js/, "bower_components", "config.rb"]
+
+# return true if filename is "visible" to the user (e.g., it is not javascript, css, ...)
+def user_visible(filename)
+  exclusion_list = Regexp.union(EXCLUSION_LIST)
+  not filename.match(exclusion_list)
+end 
+
+def file_change_ext(filename, newext)
+  if File.extname(filename) == ".textile" or File.extname(filename) == ".md" then
+    filename.sub(File.extname(filename), newext)
+  else  
+    filename
+  end
+end
+
+
+desc 'Check links for site already running on localhost:4000'
+task :check_links do
+  begin
+    require 'anemone'
+
+    root = 'http://localhost:4000/'
+    puts "Checking links with anemone ... "
+    # check-links --no-warnings http://localhost:4000
+    Anemone.crawl(root, :discard_page_bodies => true) do |anemone|
+      anemone.after_crawl do |pagestore|
+        broken_links = Hash.new { |h, k| h[k] = [] }
+        pagestore.each_value do |page|
+          if page.code != 200
+            referrers = pagestore.pages_linking_to(page.url)
+            referrers.each do |referrer|
+              broken_links[referrer] << page
+            end
+          else
+            puts "OK #{page.url}"
+          end
+        end
+        puts "\n\nLinks with issues: "
+        broken_links.each do |referrer, pages|
+          puts "#{referrer.url} contains the following broken links:"
+          pages.each do |page|
+            puts "  HTTP #{page.code} #{page.url}"
+          end
+        end
+      end
+    end
+    puts "... done!"
+
+  rescue LoadError
+    abort 'Install anemone gem: gem install anemone'
+  end
+end
+
+
+#
+# General support functions
+#
+
+# remove generated site
+def cleanup
+  sh 'rm -rf _site'
+  compass('clean')
+end
+
+# launch jekyll
+def jekyll(directives = '')
+  sh 'jekyll ' + directives
+end
+
+# launch compass
+def compass(command = 'compile')
+  (sh 'compass ' + command) if $compass
+end
+
+# check if there is another rake task running (in addition to this one!)
+def rake_running
+  `ps | grep 'rake' | grep -v 'grep' | wc -l`.to_i > 1
+end
+
+def git_local_diffs
+  %x{git diff --name-only} != ""
+end
+
+def git_remote_diffs
+  %x{git fetch}
+  %x{git rev-parse master} != %x{git rev-parse origin/master}
+end
+
+def git_repo?
+  %x{git status} != ""
+end
+
+def git_requires_attention
+  $git_check and git_repo? and git_remote_diffs
+end

_config.yml

+# Permalinks
+permalink:        /:year/:month/:day/:title/
+
+
+# Setup
+title:            quaternum.net
+tagline:          carnet d'Antoine
+description: 	    "Je suis Antoine, curieux et veilleur du web et de ses formes. Sur quaternum.net je parle de web, de typographie, d'accessibilité, d'architecture de l'information, de design et de livre, notamment."
+url:              https://www.quaternum.net
+baseurl:          /
+author:
+  name:           Antoine
+  url:            https://www.quaternum.net
+  email:          antoine@quaternum.net
+timezone:		      Europe/Paris
+
+# Custom vars
+version:          1.0.0
+
+exclude: 		      [Rakefile, index_sauv.html]
\ No newline at end of file

_config_deploy.yml

+# put here any directive needed only when deploying
+# a special deploy_dir variable specifies the deployment location using rsync
+
+baseurl: https://www.quaternum.net/
+deploy_dir: quaternu@ftp.quaternum.net:www

_drafts/2016-02-18-encrypt.markdown

+---
+layout: post
+title: "Encrypt"
+date: 2016-02-18 22:00
+comments: true
+published: false
+categories: 
+- carnet
+---
+Petit panorama du chiffrement pour le web, suite à quelques actualités plus ou moins récentes.
+
+Petit tour d'horizon d'initiatives récentes autour de la question du chiffrement.
+
+<!-- more -->
+
+## Le chiffrement ?
+Pour faire rapide, le chiffrement permet de sécuriser les informations qui circulent entre deux personnes ou deux dispositifs. Chiffrer des communications, c'est s'assurer qu'une information parviendra jusqu'à son destinataire sans être modifiée.
+
+Actuellement, chiffrer le web est le meilleur moyen de défendre les principes du web : un réseau distribué permettant à chacun de lire ou d'écrire...
+
+
+
+
+## Des initiatives différentes mais convergentes
+
+- Apple, avec [http://www.apple.com/customer-letter/](http://www.apple.com/customer-letter/)
+- Mozilla avec [Encrypt](http://www.apple.com/customer-letter/) + [https://blog.mozilla.org/blog/2016/02/16/help-us-spread-the-word-encryption-matters/](https://blog.mozilla.org/blog/2016/02/16/help-us-spread-the-word-encryption-matters/)
+- [Repatelier GPG](http://makina-corpus.com/blog/metier/2016/repatelier-gpg)
+- [Let’s Encrypt](https://letsencrypt.org/)
\ No newline at end of file

_drafts/2016-05-19-kit-de-l-accessibilite-numerique.markdown

+---
+layout: post
+title: "Kit de l'accessibilité numérique"
+date: 2016-05-19 19:00
+comments: true
+published: false
+categories: 
+- carnet
+---
+À l'occasion du Global Accessibility Awareness Day, voici quelques ressources pour comprendre les enjeux liés à l'accessibilité numérique : définition, domaines concernés, questions techniques et 
+
+<!-- more -->
+
+## Qu'est-ce que l'accessibilité numérique ?
+
+
+## Quels domaines d'application sont concernés par l'accessibilité numérique ?
+
+### Le web
+
+### Les applications
+
+### Le livre numérique
+
+
+
+## 2. Des contenus liquides
+C'est une notion finalement assez récente pour les *webdesigners*, puisque le *responsive web design* est un concept qui a été massivement utilisé à partir de 2009-2010. Depuis 2007 et la version 2.0 de l'EPUB, le livre numérique est liquide&nbsp;: les contenus -- texte, images -- s'affichent et s'organisent entre eux en fonction de la largeur et de la hauteur de l'écran. Un même texte pourra donc apparaître avec 20, 60 ou 150 signes sur une même ligne.
+
+Par ailleurs, et j'y reviendrai plus loin, l'utilisateur a plus ou moins de libertés selon les dispositifs de lecture qu'il utilise&nbsp;: choix de la typographie, taille des caractères, marges, interligne, etc.
+
+Lors de la conception d'un livre numérique, il faut donc accepter que la mise en forme ne pourra être totalement maîtrisée, puisque tout dépendra&nbsp;:
+
+- du dispositif de lecture utilisé -- le matériel&nbsp;;
+- du système d'exploitation du dispositif&nbsp;;
+- de l'application de lecture&nbsp;;
+- des choix de l'utilisateur.
+
+Contrairement au design web désormais grandement dompté -- en comparaison du début des années 2000, et parfois en dépit des questions de standards, de performance ou d'accessibilité --, le design de livre numérique repose plus sur une intention que sur une maîtrise absolue.
+
+
+## 3. Le non-choix typographique
+Même s'il est possible d'*embarquer* des polices typographiques -- en utilisant [@font-face](https://en.wikipedia.org/wiki/Web_typography#History) -- le choix des caractères typographiques dépend de plusieurs éléments&nbsp;:
+
+- le système d'exploitation du dispositif&nbsp;;
+- l'application de lecture&nbsp;;
+- le choix de l'application&nbsp;;
+- les choix de l'utilisateur.
+
+L'application de lecture qui interprète et donne le rendu de l'EPUB ne laisse pas forcément le choix au lecteur&nbsp;: soit d'afficher le livre numérique comme son créateur l'a conçu, soit de laisser au lecteur des réglages plus ou moins avancés.
+
+Une grande partie des choix typographiques du designer peuvent parfois disparaître&nbsp;: la police indiquée ne sera pas celle retenue par l'application, les choix micro-typographiques ne seront pas respectées, etc. On peut donc parler de non-typographie.
+
+>Avec le texte au format numérique, à la mise en page liquide, chacun peut changer les paramètres élémentaires. Il faudrait être typographe soi-même pour lire son livre savamment et ne pas jeter plus de mille ans de connaissance de mise en forme du texte. Pour un professeur, la perspective d’un retour à l’école de tous ces lecteurs en quête de connaissances typographiques est assez joyeuse !  
+SP Millot (Les polices ont du caractère, un article de Corinne Renou-Nativel sur La-Croix.com)
+
+
+## 4. L'accessibilité
+Le format EPUB porte la même ambition que le web&nbsp;: permettre un accès et une lecture par toutes et tous, quelque soit notre degré d'empêchement. Et nous avons tous un certain degré d'empêchement face à une interface (par exemple il m'est très difficile de lire un texte qui n'est pas structuré).
+
+>The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.  
+[Tim Berners-Lee](https://www.w3.org/standards/webdesign/accessibility)
+
+Distinguer la structure et la mise en forme permet plusieurs usages&nbsp;:
+
+- ne pas prendre en compte la feuille de style intégrée dans le livre numérique, pour des usages spécifiques&nbsp;: affichage en grands caractères par défaut, chargement d'une police pour dysléxiques, etc.&nbsp;;
+- lecture du contenu par une synthèse vocale, qui ne restranscrira que la sémantique -- la structure -- du document, et non sa mise en forme.
+
+Vous souhaitez comprendre de quoi je parle ? Rendez-vous sur un site web de votre choix, et désactivez la feuille de style. Surprise !
+
+Le format *accessible* pour les publications numériques a longtemps été le format [DAISY](https://en.wikipedia.org/wiki/DAISY_Digital_Talking_Book), mais l'objectif est que le format EPUB 3.1 le remplace à terme.
+
+
+## Bonus
+Le support de mon intervention lors de cette session à l'[École supérieure d'art et design de Saint-Étienne](http://esadse.fr/) est disponible en ligne&nbsp;:
+
+<a href="http://presentations.quaternum.net/le-livre-numerique-theorie-enjeux-decouverte/" class="link-button">Découvrir le support de présentation</a>
+
+Quelques points qui pourraient être abordées plus longuement&nbsp;:
+
+- la performance du livre numérique&nbsp;: poids, dépendances, rapidité d'affichage, etc.&nbsp;;
+- les métadonnées&nbsp;: quelles bonnes pratiques pour une *réelle* utilisation des métadonnées intégrées dans un fichier EPUB ?
+- l'évolution du format&nbsp;: quel avenir pour le format EPUB ?
+- EPUB + web&nbsp;: quelles perspectives dans la convergence -- future -- de ces deux formats ?
+- EPUB et dette technique&nbsp;: question déjà abordée dans [ce billet de Lekti](http://www.lekti-ecriture.com/bloc-notes/index.php/post/2016/La-production-de-livres-num%C3%A9riques-est-elle-homog%C3%A8ne).
+
+Merci à [Jiminy](http://jiminy.chapalpanoz.com/) pour ses relectures attentives.

_drafts/2017-01-30-urls.markdown

+---
+layout: post
+title: "Design d'URLs"
+date: 2017-03-10 12:00
+comments: true
+published: true
+description: ""
+categories: 
+- carnet
+---
+Chemin, adresse, localication, mais aussi représentation du temps ou jeu typographique, l'URL est l'élément essentiel du web, celui par lequel nous accédons à un document ou à un service. Mais qu'est-ce qu'une belle URL ?
+
+<!-- more -->
+
+## 1. Définition de l'"Uniform Resource Locator"
+L'URL, ou Uniform Resource Locator, ou adresse web, 
+
+URI, URL, essence du web, hypertexte, etc.
+
+Une belle URL est donc une URL
+
+## 2. Adéquation entre l'URL et le titre d'un document
+
+## 3. Structure d'une URL
+
+## 4. 
+3. Pourquoi de belles URLs ?
+3.1. Lisibilité
+3.2. Pérennité
+
+Une adresse, contrairement à un titre de page, peut *montrer* le chemin parcouru dans le site web, l'organisation, la hiérarchie. Une URL peut être le reflet d'un fil d'Ariane.
+
+http://warpspire.com/posts/url-design/
+
+http://www.desiquintans.com/cleanurls
+
+https://www.quaternum.net/2016/04/13/lisibilite-et-resilience-des-urls/
+
+## Ressources
\ No newline at end of file