Les outils employés pour réaliser ce site.

Ce site est rédigé en markdown puis « compilé » en html avec pandoc. Quelques autres outils et pas mal d’autres services sont impliqués, et j’indique également quelques uns des sites qui ont pu inspirer le design de ce site.

Les sources de ce site sont disponibles sur demande. Le code javascript utilisé pour afficher ma liste de publications est public.

Logiciels

Ce site est édité à l’aide de divers logiciels libres constitutifs de Debian, comme pandoc et Geany. Les titres, les manicules ainsi que les aldines sont composés en EB Garamond 12 points. La mise en ligne du site s’effectue à l’aide d’Unison (j’en parle par-là).

Ce site est « compilé » grâce à image_optim, minify (pour remplacer yui-compressor) et lesscpy, et tout ce petit monde est synchronisé par un Makefile qui ressemble à ça:

MARKDOWNFILES:=$(shell find src/ -type f -name '*.md')
LESSFILES:=$(shell find src/ -type f -name '*.less')
PNGFILES:=$(shell find src/ -type f -name '*.png')
JPEGFILES:=$(shell find src/ -type f -name '*.jpeg')
SVGFILES:=$(shell find src/ -type f -name '*.svg')

HTMLTARGETS:=$(MARKDOWNFILES:src/%.md=build/%.html)

PNGTARGETS:=$(PNGFILES:src/img/%.png=build/web/img/%.png)
JPEGTARGETS:=$(JPEGFILES:src/img/%.jpeg=build/web/img/%.jpeg)
SVGTARGETS:=$(SVGFILES:src/img/%.svg=build/web/img/%.svg)
IMGTARGETS:= $(PNGTARGETS) $(JPEGTARGETS) $(SVGTARGETS) 

TARGET= $(HTMLTARGETS) build/web/js/script.js build/web/ccs/style.css build/web/fonts/ $(IMGTARGETS)

all: $(TARGET)

build/%.html: src/%.md
    @mkdir -p $(dir $@)
    pandoc --email-obfuscation=references --section-divs --toc --toc-depth=2 --template=./src/templates/template.html $< -o $@

build/web/js/script.js: $(JSFILES)
    @mkdir -p build/web/js/
    minify -r -a -o $@ src/web/js/ 

build/web/ccs/style.css: $(LESSFILES)
    @mkdir -p build/web/ccs/
    lesscpy $(LESSFILES) > $@

# build/web/fonts/: src/web/fonts/
#   @mkdir -p build/web/
#   cp -u -r src/web/fonts/ build/web/fonts/

build/web/img/%.png: src/img/%.png
    @mkdir -p $(dir $@)
    cp -u $< $@
    image_optim --no-svgo --cache-dir .cache/img/ $@

build/web/img/%.jpeg: src/img/%.jpeg
    @mkdir -p $(dir $@)
    cp -u $< $@
    image_optim --no-svgo --cache-dir .cache/img/ $@

build/web/img/%.svg: src/img/%.svg
    @mkdir -p $(dir $@)
    cp -u $< $@

Services

J’utilise au quotidien des services libres comme ceux proposés par framasoft. Une page recense les outils propres à la collaboration scientifique. Quant à ce site, il emploie de très nombreux services, parmi lesquels :

La texture de fond de page est générée avec noisetexturegenerator.com.
Avant le recours à gulp-css-base-64, les images étaient transformées en data-uri avec websemantics.uk, et la police avec dopiaza.org.
Avant le recours à gulp-sitemap, mon sitemap était généré avec xml-sitemaps.com et vérifié avec xmlcheck.com.
Avant le recours à l’option --email-obfuscation de pandoc, mon courriel était crypté avec wbwip.com/wbw/emailencoder.html (vous retrouvez d’autres techniques sur ce fil de superuser.com), mon numéro de téléphone avec thenetweb.co.uk.
Les couleurs ont été choisies à l’aide de 0to255.com, dhtmlgoodies.com et leur lisibilité a été vérifiée avec checkmycolours.com.
Pour gagner du temps avec le css, j’emploie css3maker.com.
Vous pouvez concevoir et tester votre robots.txt avec searchenginepromotionhelp.com.
La batterie invraissemblable de favicons provient de realfavicongenerator.net. Vous pouvez également vous reporter à la favicon cheat sheet.
Les tables en markdown ont été importées depuis des tables en html avec markdowntables.
Le code d’integrité des ressources tierces est calculé avec srihash.
La police est convertie vers différents formats (woff2, svg) avec transfonter.

Tests

Ce site est testé avec une batterie de sites, parmi lesquels :

les services du W3C (validator.w3.org et jigsaw.w3.org/css-validator), pour la conformité aux standards du oueb.
opquast desktop et wave.webaim.org pour se faire une idée concernant son accessibilité.
gtmetrix.com et developers.google.com/speed/pagespeed/insights pour mesurer le temps nécessaire pour charger la page.
validator.w3.org/mobile et responsinator.com permettent de se faire une idée de l’affichage du site sur mobile.
Yellow Lab Tools propose une série de tests très complet,
et enfin l’absence de liens morts est testé avec validator.w3.org/checklink.

Inspirations

La façon dont le menu se déplie est inspirée de css-tricks.com/off-canvas-menu-with-css-target.
La partie contact (hcard) emploie les microformats, que l’on peut créer facilement et convertir vers JSON.
Pour obtenir les caractères css ou javascript ☛, ☞, —, ☙, ❧ et ❦ à partir des unicodes, j’emploie evotech.net et fileformat.info.
La configuration de Apache s’inspire de github.com/h5bp/server-configs-apache.
Le HTML5 Boilerplate est une bonne source d’inspiration, notamment pour son normalize.css.
Pour les fontes, typophile.com est un bon centre de documentation, cssfontstack.com est bien pratique.
Pour une belle typographie, les conseils de smashing magazine, webtypography.net, practicaltypography.com et typographisme.net peuvent être utiles.
Le code javascript pour désactiver le css est adapté depuis java2s.com, celui pour changer la taille de l’affichage depuis davidwalsh.name.
Le passage à Gulp a été provoqué par un article sur alsacréations.
La mise en page de ma bibliographie repose sur une modification de bib-publication-list, qui repose lui-même sur jsbibtex et datatables.net.
Les logos pour la partie “contact” de ma page d’accueil sont chez wikimedia : enveloppe, boussole, téléphone, clavier, smartphone.
Le défilement doux pour les liens internes s’inspire de ce code, les versions précédentes ici et ici faisant curieusement recharger toute la page inutilement lorsque l’on cliquait sur les ancres (les liens internes).
Les liens sur les titres sont ajoutés à l’aide de anchorjs.
Ce site emploie l’open graph protocol.

Logiciels

Services

Tests

Inspirations

Archive