Webdev - Historique des versions

Admin : /* webdev : design */

2020-04-18T08:22:23Z

webdev : design

← Version précédente		Version du 18 avril 2020 à 10:22
Ligne 4 :		Ligne 4 :

	== webdev : design ==		== webdev : design ==
	* un mobile affiche entièrement une image de largeur 400 pixels		* un mobile affiche entièrement une image de largeur 400 pixels, mais pas 420.
	* https://www.google.com/webmasters/tools/mobile-friendly/ : service google pour évaluer si un site passe bien en mobile ou pas		* https://www.google.com/webmasters/tools/mobile-friendly/ : service google pour évaluer si un site passe bien en mobile ou pas
	* même si un website n'est pas envisagé pour mobile, on a probablement quand même intérêt à designer responsive tout de suite, çàd pas forcément via les techniques responsives, mais déjà au moins au niveau du look. ie ne pas pondre un look qui serait impossible à porter sur mobile/tablette		* même si un website n'est pas envisagé pour mobile, on a probablement quand même intérêt à designer responsive tout de suite, çàd pas forcément via les techniques responsives, mais déjà au moins au niveau du look. ie ne pas pondre un look qui serait impossible à porter sur mobile/tablette

Admin : /* webdev : design */

2020-04-18T08:22:03Z

webdev : design

← Version précédente		Version du 18 avril 2020 à 10:22
Ligne 4 :		Ligne 4 :

	== webdev : design ==		== webdev : design ==
			* un mobile affiche entièrement une image de largeur 400 pixels
	* https://www.google.com/webmasters/tools/mobile-friendly/ : service google pour évaluer si un site passe bien en mobile ou pas		* https://www.google.com/webmasters/tools/mobile-friendly/ : service google pour évaluer si un site passe bien en mobile ou pas
	* même si un website n'est pas envisagé pour mobile, on a probablement quand même intérêt à designer responsive tout de suite, çàd pas forcément via les techniques responsives, mais déjà au moins au niveau du look. ie ne pas pondre un look qui serait impossible à porter sur mobile/tablette		* même si un website n'est pas envisagé pour mobile, on a probablement quand même intérêt à designer responsive tout de suite, çàd pas forcément via les techniques responsives, mais déjà au moins au niveau du look. ie ne pas pondre un look qui serait impossible à porter sur mobile/tablette

Admin : /* Fontes de caractères */

2020-04-17T15:01:39Z

Fontes de caractères

← Version précédente		Version du 17 avril 2020 à 17:01
Ligne 20 :		Ligne 20 :
	* https://developer.mozilla.org/fr/docs/Web/CSS/font-family bien		* https://developer.mozilla.org/fr/docs/Web/CSS/font-family bien
	* https://www.w3.org/Style/Examples/007/fonts.fr.html bien		* https://www.w3.org/Style/Examples/007/fonts.fr.html bien
			* GIMP 2.8 comment ajouter de nouvelles polices d'écriture https://youtu.be/yRg2Wmwa1BQ bien

	== Couleurs ==		== Couleurs ==

Admin : Page créée avec « NB : utiliser un outil de génération tout cuit permet d'éviter de se taper toutes les complexités du webdesign. Le tout reste de dégoter un bon outil. == webdev :... »

2020-04-17T08:00:24Z

Page créée avec « NB : utiliser un outil de génération tout cuit permet d'éviter de se taper toutes les complexités du webdesign. Le tout reste de dégoter un bon outil. == webdev :... »

Nouvelle page

NB : utiliser un outil de génération tout cuit permet d'éviter de se taper toutes les complexités du webdesign. Le tout reste de dégoter un bon outil.

== webdev : design ==
* https://www.google.com/webmasters/tools/mobile-friendly/ : service google pour évaluer si un site passe bien en mobile ou pas
* même si un website n'est pas envisagé pour mobile, on a probablement quand même intérêt à designer responsive tout de suite, çàd pas forcément via les techniques responsives, mais déjà au moins au niveau du look. ie ne pas pondre un look qui serait impossible à porter sur mobile/tablette
* ainsi, pour le bandeau supérieur, et pour les bandeaux en général, il ne faut pas aligner trop de trucs dedans. 2 ou 3 éléments sont probablement un maximum (... et non pas 5 comme je le tente !)
* 1 ou 2 éléments fixes (eg image) sont un maximum dans un bandeau, plus éventuellement un élément textuel susceptible de faire amortisseur
* dans le bandeau supérieur de xxx , il y a un seul élément image à gauche, et en plus il rétrécit avec le rétrécissement de la fenêtre
* Pour le format général d'une page, un empilement de blocs horizontaux, assez indépendants, et centrés, ça simplifie la vie ... et 99,9% des sites semblent procéder ainsi.

== Dev ==
* pour des A/R rapides entre codage et visu, le plus simple est de rédiger sous forme de fichier *.html, et de visualiser directement avec le navigateur. Si on code en php, c'est plus compliqué. On peut alors uploader sur le serveur, puis visualiser, mais il faut donc se taper un upload à chaque modification. à la longue, c'est lassant.
* une fois que le fichier *.htm est quasi au point, rien n'empêche alors de l'enregistrer en *.php et d'y rajouter du code php. Mais au moins le gros du codage html aura été fait (avec des A/R plus rapides).

== Fontes de caractères ==
* firefox, ne semble pas posséder des masses de fontes par défaut. Si c'est pour un titre dans un bandeau de homepage, il vaut peut-être mieux carrément le pondre en tant qu'image. (C'est sans doute pas par hasard que beaucoup de websites procèdent ainsi).
* https://developer.mozilla.org/fr/docs/Web/CSS/font-family bien
* https://www.w3.org/Style/Examples/007/fonts.fr.html bien

== Couleurs ==
* pour la lecture du texte, il faut, évidemment, avoir du **contraste** par rapport au fond
* http://www.css-faciles.com/couleurs-css.php couleurs css , bien
* http://stylescss.free.fr/v2-tutoriels/colors.php bien , la palette de couleurs est bien visible
* https://www.cssdebutant.com/coder-en-css-couleur-espace-alignement-texte.html bien. Nous rappelle que firefox propose en standard dans le menu développement une loupe/pipette qui indique le code couleur !

Webdev - Historique des versions

Admin : /* webdev : design */

Admin : /* webdev : design */

Admin : /* Fontes de caractères */

Admin : Page créée avec « NB : utiliser un outil de génération tout cuit permet d'éviter de se taper toutes les complexités du webdesign. Le tout reste de dégoter un bon outil. == webdev :... »

Admin : /* webdev : design */

Admin : /* webdev : design */

Admin : /* Fontes de caractères */

Admin : Page créée avec « NB : utiliser un outil de génération tout cuit permet d'éviter de se taper toutes les complexités du webdesign. Le tout reste de dégoter un bon outil. == webdev :... »