====== Astuces pour les sites web (css et compagnie) ======
Cette page recense quelques outils pratiques pour bidouiller les pages web et essayer de faire des trucs trop beaux.
* http://thestocks.im/ : Site listant plein d'outils, couleurs, images, polices, etc
Attention à la surenchère ! Les sites web sobres sont moins pénibles que ceux qui clignotent de partout, avec des vidéos qui se lancent, etc. Pensez au confort de vos visiteuses, pas juste à faire un effet "Whaouu" vite fatiguant après quelques secondes.
Méfiance aussi devant les modes : l'aspect de votre site web doit servir votre propos ET se démarquer de ce qu'on voit "partout" si vous souhaitez être bien identifiée.
===== Validateurs et listes de check-up =====
* https://checklists.opquast.com/fr/ : diverses checklist qui permettent de faire le tour de ce qu'on a pu oublier.
* http://validator.w3.org/ : teste une page en direct pour voir si le html est valide.
* http://jigsaw.w3.org/css-validator/ : la même chose pour le css. On peut aussi passer directement ses fichiers css.
Pour contrôler la qualité du code php :
* https://github.com/sebastianbergmann/phpcpd
* https://github.com/php-parallel-lint/PHP-Parallel-Lint : suffisant pour du test de syntaxe, sans s'embêter à trop configurer de choses
* https://github.com/FriendsOfPHP/PHP-CS-Fixer
* https://github.com/phpstan/phpstan : très puissant mais pas simple à prendre en main
===== Couleurs =====
* http://www.code-couleur.com/ : voir quelle couleur correspond à quel code html et vice versa
* http://www.degraeve.com/color-palette/ : générer une palette à partir d'une image
* http://paletton.com/ : générer une palette
* https://color.adobe.com/ : similaire au précédent, permet de trouver des couleurs qui vont potentiellement aller ensemble
* https://colourco.de/ : outil très sympa pour générer une palette (potentiellement à partir d'une couleur qu'on a déjà)
* https://colordrop.io/ : lot de palettes
==== Accessibilité ====
Voir aussi [[fr:accessibilite|la page détaillée]] sur le sujet, plus à jour.
=== Outils ===
* http://www.yoyodesign.org/outils/ncolor/index.fr : sélecteur de couleur pour voir comment une couleur est "perçue" suivant l'handicap visuel
* https://app.contrast-finder.org (AGPLv3) : permet de trouver les couleurs contrastes qui seront bien perçues par le maximum de monde.
* Colour Contrast Analyser (CCA) de The Paciello Group sous licence GPLv3 : https://github.com/ThePacielloGroup/CCAe
* axe-core, accessibility engine for automated Web UI testing, sous licence MPL2.0 : https://github.com/dequelabs/axe-core
* Accessibility Inspector intégré dans Mozilla Firefox : https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector
* Enabler, Accessibility analyzer, sous licence MIT : https://github.com/musienkoyuriy/enabler
Il existe globalement diverses listes d'outils à travers le web plus ou moins à jour : [[https://frontendmasters.com/books/front-end-handbook/2018/tools/accessibility.html]] ou [[https://4design.xyz/outils-en-ligne-pour-verifier-accessibilite-de-votre-site-web]] ou encore [[https://github.com/brunopulis/awesome-a11y/blob/master/topics/validators.md]] par exemple.
=== Points d'attention divers ===
**Largeur de texte** : l'œil a du mal à lire des lignes de plus de 70-80 caractères (33em((À vérifier, en //em// ma source n'est pas fiable.)) ). N'étirez pas le texte sur tout l'écran, il vaut mieux faire des colonnes ou laisser du vide.
**Aérer le texte** : Il est couramment admis qu'une hauteur de ligne (line-height) de 1.5 permet d'obtenir une bonne lisibilité du texte.
Si l'utilisatrice applique les réglages suivants, le texte doit rester lisible (pas de contenu tronqué, superposé):
* La hauteur des lignes doit pouvoir être ajustée à 1.5 fois minimum la taille de la police de caractères.
* L'espace situé entre deux paragraphes doit pouvoir être ajusté à 2 fois minimum la taille de la police de caractères.
* L'espacement entre les lettres doit pouvoir être ajusté à 0.12 fois minimum la taille de la police de caractères.
* L'espacement entre les mots doit pouvoir être ajusté à 0.16 fois minimum la taille de la police de caractères.
On peut utiliser un bookmarklet (faire un marque page comportant l'adresse suivante) pour tester cela :
javascript:s%20=%20document.createElement(%22style%22)%3Bs.setAttribute(%22type%22%2C%22text%2Fcss%22)%3Bt%3Ddocument.createTextNode(%22*%20%7Bline-height%3A%201.5!important%3B%20letter-spacing%3A.12em!important%3B%20word-spacing%3A%20.16em%20!important%3B%7D%20p%7Bmargin-bottom%3A%202em!important%3B%20%7D%22)%3Bs.appendChild(t)%3Bh%20%3D%20document.getElementsByTagName(%22head%22)%5B0%5D%3Bh.appendChild(s)%3Bvoid(0)%3B
**Penser au zoom** : l'agrandissement/zoom de la page ou du texte seulement est courant en terme d'accessibilité, bien que les référentiels ne donnent pas toujours de valeur exacte (ils restent subjectifs sur de nombreux points), il y a certains points assez communément admis. Il n'y a pas toujours une seule bonne solution subjectivement, il convient de s'inspirer des bonnes pratiques comme base de suggestion.
Varier le zoom du site (CTRL + molette souris ou boutons "+" et "-") doit pouvoir se faire en gardant les éléments lisibles malgré l'altération de la page.
La taille du texte doit pouvoir être multipliée par 2 par exemple (zoom à 200%, zoom du texte seulement à configurer dans le navigateur) tout en restant lisible.
Le design de la page peut être amené à être repensé sur ces points s'il ne le permet pas de base.
L'outil de loupe de l'OS peut également être utilisé et conditionne, comme pour les plages brailles, la largeur d'un texte ou d'une alternative textuelle par exemple
**Information et couleur** : ne pas donner une information uniquement par la couleur, quoi qu'il advienne.
==== Polices ====
* http://www.goetter.fr/unicode/ : les symboles unicode pratiques à utiliser en html (flèches, etc).
===== Astuces CSS =====
==== Flexbox ====
Flexbox est un ensemble de fonctions qui simplifie la gestion des blocks en css ; plutôt que de galérer à cumuler les règles, un appel à Flexbox peut résoudre pas mal de difficultés.
* http://flexboxfroggy.com/#fr : pour apprendre de façon ludique
* https://philipwalton.github.io/solved-by-flexbox/
* https://css-tricks.com/snippets/css/a-guide-to-flexbox/
===== Responsive =====
Un site peut être visité depuis divers supports, du smartphone à l'écran de grande taille, et il faut que ce soit agréable à l’œil sur chacun de ces supports. //Responsive// est le mot d'origine anglaise signifiant "qui s'adapte à la taille de l'écran". Dans la feuille de style css, le passage à une disposition se fait de la façon suivante :
@media screen and (max-width: 900px) {
body, input, select, textarea {
font-size: 12pt;
}
}
On ne va pas détailler ici... Juste un détail, quelle taille d'écran déclarer ? Pour les sites les plus pro, voici les largeurs :
* 1800px
* 1280px
* 980px
* 736px
* 480px
Si on est un peu plus fainéant... Il faut prendre en compte surtout les 3 cas suivants :
* L'écran fait plus de 1280px de largeur (cas de beaucoup d'ordinateurs de bureau aujourd'hui)
* L'écran fait entre 736px et 1280px de largeur ("vieux" écrans, tablettes)
* L'écran fait en dessous de 736px (smartphones)
Ces valeurs ne sont pas vraiment absolues mais généralement il faut prévoir un site qui s'adapte bien à ces trois cas. Ou faire encore plus "basique" : au dessus de 800px et en dessous (arrivée des menus "hamburger" etc). Attention, car sur les écrans avec une haute résolution (plus de 1800px), ça fait vite beaucoup de vide.
===== Support des navigateurs =====
Certaines fonctionnalités CSS et HTML ne sont pas supportées sous tous les navigateurs, ou bien pas de façon standardisée, ce qui oblige à ajouter des déclarations en plus.
Mais alourdir le code parce que les navigateurs ne sont pas à jour n'est pas forcément une bonne idée ; les anciens navigateurs ont des failles et il est important que les utilisateurs soient "motivés" à mettre à jour. Attention, il faut quand même prendre en compte les vieux navigateurs car certains systèmes rendent la mise à jour des navigateurs un peu complexe((Non, je ne pense pas aux vieux Mac. Ni à Windows. Ni même à Android. Et pas à Debian stable non plus.)). Les gens ne sont pas toujours compétents pour être sur un système ayant automatiquement la dernière version des logiciels. Mais ce n'est pas une raison pour continuer à supporter Internet Explorer 6, remplacé dès 2006.
Les sites d'aide au css indiquent les compatibilités mais pas forcément de quand datent les navigateurs et donc s'il est encore pertinent (ou non) d'être compatible. Pour aider à y voir plus clair, la liste des navigateurs les plus courants et leur date de sortie.
Historique des versions de :
* [[wpfr>Internet_Explorer#Versions|Internet Explorer ]]
* [[wpfr>Historique_des_sorties_de_Mozilla_Firefox|Mozilla Firefox]]
* [[wpfr>Google_Chrome#Historique_des_versions|Chrome]]
* [[wpfr>Opera#Historique_des_sorties|Opera]]
* [[wp>Safari_version_history|Safari]]
Pour vérifier la compatibilité, le site [[https://caniuse.com/|Can I use]] est idéal. Il contient aussi les statistiques d'utilisation des divers navigateurs web : [[https://caniuse.com/usage-table]].
Un site comme https://www.browserling.com/ vous permet de tester ce que votre site donne sur d'autres navigateurs, dont les versions obsolètes.
===== Frameworks =====
On peut utiliser un [[wpfr>Framework|Framework]], qui permet de pré-configurer des classes, d'associer des attributs d'une façon qui marche, le tout pour un rendu sympa. Les frameworks (css ou autres) sont légion sur le net, ceux qui sont notés ici sont appréciés et utilisés par nos membres :
* [[https://bulma.io/|Bulma]], pur framework css, bien documenté et découpé, assez sobre de base.
* [[https://html5up.net/|Html5up]], template pour sites web simples. Attention, les versions de javascript sont parfois obsolètes, mais ces templates sont très instructifs côté css.
L'un des défauts des frameworks, c'est qu'ils sont utilisés partout, ce qui fait des sites assez similaires au niveau visuel. Pensez à modifier au moins les couleurs et le favicon.
{{tag>web graphisme}}