Les liens

Mes liens sont organisés en plusieurs catégories :

• mes réalisations web majeures,
• mes articles, tutoriels, astuces publiés sur d'autres sites,
• mes autres réalisations web,
• des ressources pour le développement web,
• Terragen,
• Linux et le monde du libre,
• et les liens divers et variés.

Les liens de chaque catégorie vont des plus récemment ajoutés aux plus anciens.

Réalisations web majeures en ligne

• Stand up for Human rights : Site événement du jour des Droits de l’Homme.
• Roberto : Le site de la marque suisse des pâtes Roberto.
• Van11y : Van11y (prononcez Vanity pour Vanilla Accessibility) est une réécriture en ES2015 des plugins accessibles en jQuery. Nouveau !
• Accessibility section - jQuery Plugins : Ce sous-domaine de mon site propose de nombreux plug-ins accessibles faits avec jQuery. Mis à jour !
• Vision Contact : Vision Contact est un centre de contactologie situé à Genève.
• People with albinism : À l’initiative du Haut Commissariat aux Droits de l'Homme, ce site défend la cause des personnes atteintes d’albinisme.
• Röcssti, un micro-framework CSS : Röcssti est mon micro-framework de départ en matière de CSS, afin de gagner du temps et d'inclure certains éléments de qualité Web dans mes projets. Site bilingue et builder !
• Vision Clinique : Vision Clinique est le premier centre de chirurgie ophtalmologique à Genève.
• Office of the High Commissioner for Human Rights 20th anniversary : Pour l'anniversaire des 20 ans du Haut Commissariat aux Droits de l'Homme, ce site présente le chemin accompli depuis sa création.
• OHCHR IYPAD : Les Nations Unies ont proclamé l'année 2011 comme étant l'année internationale des personnes d'ascendance africaine. Ce site montre l'interface du CD fait en HTML qui présente ce projet.
• ProPulsion : ProPulsion est une agence de conseil en communication basée à Genève.
• Billards-Baby-Foot : La boutique en ligne du magasin spécialisé du même nom à Genève. Incontournable si vous cherchez du matériel dans ce sens.
• The GT Project : Un générateur de tableaux XHTML, créé par votre serviteur.
• The S.O.C Project ! : Un générateur de formulaires web, créé par votre serviteur (cf Réalisations web pour plus d'informations. (projet en cours de conception, vous pouvez voir la Foire Aux Questions)
• Crypteur d'adresses e-mail : Un mini-utilitaire pour "crypter" (le mot est fort) les adresses e-mails dans les liens "mailto" sur un site. Destiné aux intégrateurs.

Haut de page

Articles, publications, tutoriels

• Chapitre CSS du Web Almanac 2019 (traduction) : J’ai traduit en français le chapitre CSS du Web Almanac 2019.
• Chapitre accessibilité du Web Almanac 2019 (traduction) : J’ai traduit en français ce chapitre du Web Almanac 2019.
• Deploying CSP: a 5-step approach : This article will explain you how to deploy CSP in a progressive way.
• Déployer CSP : une approche en 5 étapes : Cet article vous montrera une méthode pour déployer CSP progressivement.
• Referrer Policy : Cet article sur OpenWeb présente la spécification Referrer Policy et l’importance de la prendre en compte.
• Tour d’horizon sur HTTPS et les en-têtes de sécurité : Ce long article sur Alsacréations vous expliquera de nombreux aspects sur la sécurité des sites.
• SubResource Integrity : Cet article sur OpenWeb présente la spécification SubResource Integrity et l’importance de la déployer.
• Content Security Policy : Cet article sur OpenWeb présente les possibilités et l’intérêt d’employer la technologie de sécurité nommée Content Security Policy.
• Content Security Policy, Your Future Best Friend : Cet article (en anglais) sur Smashing Magazine vous présente CSP.
• SubResource Integrity (MDN) : Ne trouvant pas de ressource francophone sur la spécification SRI, j’ai traduit la page sur le MDN en français.
• Google Universal Analytics, ce qui a changé : Pour feu le magazine web du Train de 13H37, cet article vous fera une rapide mise à jour de vos connaissances sur Google Analytics.
• Création de plug-ins accessibles, une démarche : Cet article explique une méthode et la démarche de création des plug-ins accessibles que j’ai créés : de la recherche de connaissance au prototype en passant par la vente et la vie d’un projet de plug-in accessible.
• Grands principes de construction moderne de CSS : Cette série de 10 articles sur OpenWeb aborde tous les concepts modernes de construction de CSS (performance, maintenabilité, etc.).
• Avoir la vision d’ensemble : Cet article sur « 24 jours de Web » vous expliquera les problèmes d’accessibilité que peut rencontrer un utilisateur sans avoir la vision d’ensemble d’un site.
• Le Coût d’Obtention de la Qualité sur le web  : Également co-écrit avec Élie Sloim, cet article est la suite de celui sur les coûts de non-qualité, il met en perspective ces derniers avec les coûts d'obtention de la qualité.
• Le Coût de la Non-Qualité sur le Web : Co-écrit avec Élie Sloim, cet article explore la problématique de la non-qualité sur les sites Web.
• Le temps est sans importance : Cet article sur « 24 jours de Web » vous expliquera via un retour d'expérience le temps que peut mettre une démarche d'industrialisation.
• La gestion de la césure en CSS : Cet article sur OpenWeb vous expliquera les mécanisme pour effectuer la césure sur les sites Web.
• Rétablissons l’outline : Co-écrit avec Tanguy Lohéac qui est à l'initiative de l'idée, cet article vous rappellera pourquoi la visibilité du focus clavier est capitale sur un site Web.
• La qualité Web, un tramway nommé désir : Cet article sur w3qualité vous présente un retour d'expérience de mise en place de la qualité Web.
• HTML Media Capture : Cet article sur OpenWeb vous expliquera les possibilités de cette nouvelle API d’HTML5, à savoir la possibilité de capturer et d'envoyer des flux vidéos, des images avec les caméras et autres appareils photos de vos smartphones et tablettes (entre autres).
• Les commentaires conditionnels : passé, présent et futur : Toujours sur OpenWeb, cet article explique l'évolution de la pratique des commentaires conditionnels sous Internet Explorer.
• La dette technique en exemple : Cet article sur OpenWeb est un retour d'expérience sur le problème de la dette techique : comment elle peut survenir, se manifester, et surtout se régler.
• Prestataires Web : quelques conseils pour une relation claire et durable : Cet article sur OpenWeb s'adresse aux clients et autres décideurs, il propose quelques astuces à vérifier afin d’avoir une relation plus harmonieuse avec votre prestataire Web.
• Connaitre l'efficacité d'un site via Google Analytics : Cet article sur feu le magazine du Train de 13H37 vous expliquera quelques pistes pour pouvoir mesurer l'efficacité de vos sites sous Google Analytics.
• Les id sont nos amis : À l'occasion du calendrier de l'Avent « 24 Jours de Web », j'ai écrit un petit article sur l'utilisation des id en HTML/CSS.
• CSS, l'âge de raison : Cet article sur OpenWeb vous expliquera les évolutions des dogmes en CSS, notamment pour des raisons pratiques.
• jQuery Mobile par l'exemple : la Kiwiparty : Ce tutoriel sur Alsacréations vous présentera pas à pas tout ce qu'il faut savoir pour réaliser l'exemple fait à l'occasion de ma conférence à la Kiwi Party 2012 : le site de la Kiwi Partÿ version jQuery Mobile.
• Le fichier htaccess et ses nombreuses possibilités : Cet article sur Openweb vous présentera les innombrables aspects du fichier htaccess, véritable trousse à outil du développement et de la qualité Web.
• Conseils pour mieux gérer des projets complexes : Cet article sur feu le magazine du Train de 13H37 vous donnera des conseils pour appréhender des projets complexes.
• Vendor prefixes : Vendor prefixes is the english translation of my 10th article on OpenWeb. It talks about the problems caused by their use in production.
• Les préfixes constructeurs : Cet article sur Openweb traite du sujet très épineux des préfixes constructeurs (CSS), qui posent bon nombre de problèmes à tout le microcosme Web.
• De l’intégrateur au développeur front-end : un maillon essentiel de la qualité Web : Ma 9^ème publication sur OpenWeb vous présente le métier d'intégrateur et l'importance primordiale de ce poste dans la qualité Web.
• Améliorer les contrastes de textes : Ma 8^ème publication sur OpenWeb vous parlera d'un grand principe d'accessibilité et de lisibilité, à savoir les contrastes des textes des sites internet.
• Les sprites CSS : Ma 7^ème publication sur Openweb continue d'explorer le domaine des performances web, en détaillant la technique dite des sprites CSS.
• Utiliser PHP pour gérer vos styles CSS  : Attention, astuce (sur Alsacréations) très particulière, à utiliser dans des cas très particuliers en toute connaissance de cause ! Il arrive dans certains cas très précis que l'utilisation de PHP vous facilité la gestion de vos styles CSS.
• Comment interdire le mode de compatibilité sur Internet Explorer : Encore une petite astuce publiée sur Alsacréations pour se débarrasser autant que possible du mode de compatibilité d'Internet Explorer.
• Activer l'impression des éléments HTML5 sous Internet Explorer : Cette toute petite astuce publiée sur Alsacréations vous évitera de grosses surprises dans vos versions imprimables sous Internet Explorer !
• Introduction à la balise video de HTML5 : Cet article sur Alsacréations vous expliquera tout ce qu'il faut savoir pour utiliser correctement la balise video de HTML5.
• Les sprites CSS (sur Alsacréations) : Ce tutoriel sur Alsacréations vous expliquera le principe et les avantages des sprites CSS.
• Les Performances web, pour aller plus loin : Ma 6^ème publication sur OpenWeb continue d'explorer le domaine des performances web (mise en cache avancée, etc.).
• Introduction à la performance web : Ma 5^ème publication sur OpenWeb explique l'intérêt des performances web, et pose les bases de ce domaine.
• Adapter un site pour les Smartphones : Ma 4^ème publication sur OpenWeb traite des différentes approches pour adapter un site sur les Smartphones... en utilisant les standards du web bien sûr.
• Maîtriser l’impression CSS : Ma 3^ème publication sur OpenWeb propose un inventaire des soucis les plus fréquents que l'on rencontre avec les CSS print, accompagné de quelques conseils pour mieux gérer ces difficultés.
• Changer de jeu de caractères pour UTF-8 : Ma 2^e publication sur OpenWeb pose la problématique des jeux de caractères dans l'internationalisation des sites, introduit comment UTF-8 peut apporter une solution à ces problèmes et explique une migration vers ce jeu de caractères.
• Avoir plusieurs présentations alternatives : Ma 1^ère publication sur OpenWeb vous parlera des styles alternatifs, domaine dont vous pouvez déjà apprécier les possibilités sur ce site via les skins !

Haut de page

Autres réalisations web en ligne

• CSP useful, a collection of scripts, thoughts about CSP : En relation avec ma conférence sur CSP à Paris Web 2015, je vous propose ce dépôt Github avec toutes sortes d’astuces sur CSP.
• Est-ce qu'on met en prod aujourd'hui ? : Une page humoristique pour savoir si vous devez mettre en production un site aujourd'hui ! Important !
• Erreur 404 spéciale IE : Informez autour de vous, n'hésitez pas à réutiliser cette page ! Important !
• Animations avec Terragen 2, premier tutoriel : Un nouveau tutoriel sur les animations avec Terragen 2, créé par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• Indenteur de code : Encore un délire de fainéantise, cet utilitaire permet de réindenter correctement un bloc de code pour qu'il s'intègre correctement dans un autre bloc de code (ajout/suppression d'espaces).
• 5ème tutoriel (Terranim, en anglais) : La version anglaise du 5^ème tutoriel, sur les animations avec Terranim, faite par votre serviteur.
• 5ème tutoriel (Terranim) : Un 5^ème tutoriel sur les animations avec Terranim, créé par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• Ergologique : Mon rôle dans cette nouvelle version de ce site a été simple : proposer un squelette XHTML/CSS digne de ce nom, et le finaliser avec le créateur du site, Emeric Thoa.
  Le site est une mine d'informations, je vous invite à aller y faire un tour (pour plus de détails, allez voir sur la page de mes réalisations web).
• 4ème tutoriel (Terranim, en anglais) : La version anglaise du 4^ème tutoriel, sur les animations avec Terranim, faite par votre serviteur.
• 4ème tutoriel (Terranim) : Un 4^ème tutoriel sur les animations avec Terranim, créé par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• Les codes unicode et héxas des caractères usuels : Comme j'en avais assez de toujours les chercher, j'ai fait une petite boucle en PHP qui donne l'unicode et le code héxadécimal des caractères usuels.Mis à jour !
• 3ème tutoriel (animations plus complexes, en anglais) : La version anglaise du 3^ème tutoriel sur les animations (animations plus complexes), faite par votre serviteur.
• 3ème tutoriel (animation plus complexes) : Un 3^ème tutoriel portant sur des animations plus complexes, créé par votre serviteur. Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• 2ème tutoriel (Campath, en anglais) : La version anglaise de la 2ème partie du tutoriel sur les animations, faite par votre serviteur.
• 2ème tutoriel (Campath) : La 2^ème partie du tutoriel sur les animations (Campath), créée par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• 1er tutoriel (Campath, en anglais) : La version anglaise du même tutoriel sur les animations (Campath), faite par votre serviteur.
• 1er tutoriel (Campath) : Un tutoriel (Campath) sur les animations faites avec Terragen, créé par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• C4i Tests : Un micro-site fait en qq heures pendant mon stage de 1ère année chez C4i, réalisé en même temps que l'intranet de gestion du personnel.
• Dali : Un mini-site sur Dali, et ses rapports avec les médias.
• Taka-Maka : Un site sur un sujet fictif : Taka-Maka. Déconseillé aux âmes sensibles et aux déprimés...

Haut de page

Ressources et informations pour le web (développement web)

• Browser hacks : Une liste impressionnante de hacks CSS pour tous les navigateurs.
• Wtheora : Une interface simple (sur PC) pour créer des vidéos en format Ogg/Theora, format supporté nativement par les navigateurs Chrome, Firefox et Opéra.
• Validator.nu : Un validateur qui permet de vérifier vos pages HTML5.
• Detect Mobile Browser : Un script de détection assez facilement adaptable... toujours utile.
• Clean CSS : Un petit utilitaire pour optimiser vos CSS, toujours utile.
• Web accessibility evaluation tool : WAVE est un outil anglophone d'évaluation d'accessibilité. Plutôt simple à utiliser, et assez bien fait.
• Brain Cracking : Un excellent blog sur le développement web... à suivre !
• Jscolor : Jscolor est un composant Javascript qui permet de choisir aisément une couleur. Rapide, léger, très facile à intégrer, et fonctionne bien, c'est un plaisir à utiliser.
• Validateur Mobile W3C : Le validateur ultime pour vos sites... qui va vérifier la conformité de vos pages, mais pour les téléphones mobiles. Attention, vous allez avoir des surprises et des déconvenues.
• Position is Everything : Un excellent site sur les problèmes de positionnements via CSS, avec une page spéciale IE recensant tous les problèmes bizarres que ce "navigateur" peut occasionner.Indispensable !
• Brilliant Button Maker : Un générateur de ces images en 80*15 très à la mode sur les sites internet ("RSS valid" est l'un des plus utilisé). Pratique et bien fait, je l'ai utilisé pour de nombreux skins sur mon propre site.Indispensable !
• ASP-PHP.net : Un très bon site pour apprendre le PHP et/ou l'ASP.
• Accessiweb : De bons conseils sur l'accessibilité des sites (notamment grâce à une liste de critères bien pensée.
• Opquast : Les "bonnes pratiques" du web, un ensemble de recommandations pour améliorer les sites web en général. Un projet très intéressant !
• Alsacreations : Des tutoriels sur le XHTML et les CSS. Très accessible et de bonne qualité.
• Le W3C : Le site de référence. Contient les spécifications de divers langages ((X)HTML, CSS, SVG, etc.), et les indispensables validateurs (code et feuilles de style)
• Pompage.net : Un site où l'on peut trouver des traductions francophones des derniers tutoriels et autres documents concernant la conception de sites. Contenu de très grande qualité.
• Validateur RSS : Indispensable si vous désirez créer un fil RSS !
• Le StandBlog : Le blog sur les standards du web de Tristan Nitot, très souvent mis à jour, et contenu de qualité. Bref : indispensable !
• Openweb : LE site pour apprendre ce qu'il faut savoir sur les standards du web. Un contenu de qualité, et de très bons articles, un must dans le genre. Incontournable !

Haut de page

Terragen

• Animations avec Terragen 2, premier tutoriel : Un nouveau tutoriel sur les animations avec Terragen 2, créé par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• 5ème tutoriel (Terranim, en anglais) : La version anglaise du 5^ème tutoriel, sur les animations avec Terranim, faite par votre serviteur.
• 5ème tutoriel (Terranim) : Un 5^ème tutoriel sur les animations avec Terranim, créé par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• 4ème tutoriel (Terranim, en anglais) : La version anglaise du 4^ème tutoriel, sur les animations avec Terranim, faite par votre serviteur.
• 4ème tutoriel (Terranim) : Un 4^ème tutoriel sur les animations avec Terranim, créé par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• World Machine : Un très bon utilitaire pour générer des terrains réalistes.
• KK3D : Le site de Karsten Keppel, un maître des animations avec Terragen. Ses travaux sont tout bonnement exceptionnels.
• 3ème tutoriel (animations plus complexes, en anglais) : La version anglaise du 3^ème tutoriel sur les animations (animation plus complexes), faite par votre serviteur.
• 3ème tutoriel (animation plus complexes) : Un 3^ème tutoriel portant sur des animations plus complexes, créé par votre serviteur. Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• 2ème tutoriel (Campath, en anglais) : La version anglaise de la 2ème partie du tutoriel sur les animations (Campath), faite par votre serviteur.
• 2ème tutoriel (Campath) : La 2^ème partie du tutoriel sur les animations (Campath), créée par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• 1er tutoriel (Campath, en anglais) : La version anglaise du même tutoriel sur les animations (Campath), faite par votre serviteur.
• 1er tutoriel (Campath) : Un tutoriel sur les animations faites avec Terragen (Campath), créé par votre serviteur.
  Document en XHTML 1.1/CSS téléchargeable pour une lecture hors-ligne.
• Zazie : Ses réalisations sont magnifiques (allez voir sa page sur le surréalisme).
• Terrafgen : Le site de Ralph, qui lui aussi a fait d'excellents travaux ! A voir !

Haut de page

Linux et le monde du libre

• Wikipédia : Une encyclopédie libre, très riche et gratuite.Indispensable !
• Formats-Ouverts.org : Un blog sur l'utilité des formats de fichiers ouverts.
• Free Software Foundation Europe : La "fondation du logiciel libre", entre autres investigateurs du projet GNU.
• Framasoft : Un très bon site concernant le logiciel libre, et le libre tout court.
• Firefox : Firefox, l'incontournable navigateur, pas la peine d'en ajouter. Indispensable !
• Un test de geek : Le test qui va déterminer si vous êtes un geek ou pas ! Très drôle pour le puriste !
• Linuxfr : Un très bon site sur Linux, et le monde du libre en général.
  Très souvent mis à jour et contenu de qualité.

Haut de page

Divers et variés

• Omnilogie : Un site très amusant, surnommé le "Manuel des Castors Seniors", où l'on peut trouver des articles de culture générale sur à peu près tout.
• Nanarland : Des chroniques tordantes sur des films tellement mauvais... qu'ils en font rire !
• Humeurs-nuits : Allez faire un petit tour sur ce site, Dimitri Schkoda a composé des musiques d'excellente facture, un plaisir pour les oreilles !
• Gros pixels : De nombreux dossiers sur les consoles, les ordinateurs, jeux vidéos. Particulièrement intéressant pour les amateurs de vieilles consoles !
• DosBox : Si comme moi, vous cherchez à faire fonctionner de vieux jeux DOS, allez faire un tour sur ce site !
• MegaMan Matrix : Le site absolu sur la série des Megaman, dont j'étais (je suis encore !) fan sur la NES.
• Les lois de Murphy : Les célébrissimes lois de Murphy, et en français !
• JeuxSoc : Si vous aimez comme moi les jeux de société, allez faire un tour sur ce site tenu par François Haffner, la quantité d'informations compilées ici est assez impressionnante. Souvent mis à jour.
• Zophar : Un site anglophone très complet sur l'émulation. Contient une base de musiques NES et SNES (entre autres) très impressionnante !
• Allociné : Un bon site pour tout cinéphile.
• Judgehype : Un site portant sur Diablo 1, 2 et 3, Warcraft 3, World of Warcraft et Starcraft.
  Contenu de qualité et très souvent mis à jour.