Personnaliser un formulaire

a marqué ce sujet comme résolu.

Salut,

Je suis désolé, mais je n'apprends pas grand chose en lisant ce tutoriel. Je vais essayer d'être constructif:

  • qu'allons nous réaliser dans ce tutoriel ?
  • que me faut-il connaître pour le suivre ?
  • (rédigé par moi) …
  • n’enlevez rien, sinon ça ne marche pas Le principe d'un tutoriel est de nous apprendre à faire quelque chose, pour que l'on puisse utiliser ce savoir plus tard. Il faudrait peut-être sectionner ce tutoriel en plusieurs parties tels que: Personnaliser un input de type text, Personnaliser un textarea, etc.
  • il faudrait peut-être revoir la formulation des quelques phrases : utilisation de on, pas de points, etc.
+0 -0

Hello,

Fais attention aussi à la propreté et la lisibilité du code : indentation inexistante, JavaScript à séparer du HTML, attributs style, etc. C'est bien de proposer un code tout fait, encore faudrait-il qu'il soit facilement compréhensible et modifiable : les lecteurs n'auront pas forcément envie d'avoir le même rendu, ils souhaiteront sûrement adapter pour leur charte graphique.

Sinon le rendu est pas tout à fait accessible : certains éléments manquent de retour au focus par exemple, d'autres changent complètement de style par moment (le slider horizontal notamment).

Au passage, dans ton, JS, évite innerHTML quand tu veux seulement afficher du texte pur (sans HTML donc) : préfère textContent ou insère un nœud texte avec les méthodes du DOM. Et pense à rester cohérent au niveau des quotes pour tes chaînes de caractères : choisis un style et garde-le dans tout le code, ne fais pas de mélanges.

En passant, pense aussi au responsive et autres : évite les tailles en pixels (de nos jours on utilise du em ou du rem) ou les typos forcées (un simple font-family: inherit sera beaucoup plus utile et portable).

Un dernier point important aussi : n'oublie pas la compatibilité navigateur. Si ton code nécessite une version minimale indique-le ! Et s'il y a moyen d'augmenter la compatibilité via des polyfills ou autres hacks, ça peut être utile de les mentionner…

+2 -0

Bonjour,

@viki53 : Pour la lisibilité, je vais régler ça et pour la modification, ce sera plus facile du coup. Merci pour ta remarque très constructive, pour le JS, je prendrais en compte ta remarque. Je préfère garder les tailles en px car ça ne pose pas de problème.

@luckyboss1 : Je préciserai mais il ne s'agit pas d'un don PayPal, juste d'une pub (merci si tu as cliqué dessus)

Je tiens en compte vos critiques pour la nouvelle version du tutoriel, Merci, Noam

+0 -0

@luckyboss1 : Je préciserai mais il ne s'agit pas d'un don PayPal, juste d'une pub (merci si tu as cliqué dessus)

unpeudetout

La pub est justement contraire à l'esprit de ZdS. Pas sûr que le staff approuve…

Pour les pixels, ça te pose peut-être pas de soucis, mais à l'intégration dans un projet existant ça peut vite devenir problématique. Autant fournir un code de plus souple possible pour éviter une perte de temps inutile pour adapter voire déboguer le tout.

+0 -0

@luckyboss1 : Je préciserai mais il ne s'agit pas d'un don PayPal, juste d'une pub (merci si tu as cliqué dessus)

unpeudetout

J'ai bien évidement tester le lien avant d’écrire mon message. Le fait de ne pas avoir le choix de te donner en cliquant sur ce lien, le problème se situe là pour moi. Et je pense que les validateurs testeront ce lien, le travaille est fait correctement ici.

C'est d'ailleurs pour ça que le tutoriel en l'état ne sera pas validé. Il n'est pas du tout pédagogique, il ne nous apprend rien…

Je n'ai pas de compte PayPal, du coup, je fais avec ce que j'ai.

unpeudetout

Cela a sous entendrais que tu ne peux pas ecrire un tutoriel sans mettre un lien vers une quelconque façon de te gratifier financièrement ?

+0 -0

J'enlèverais le lien et pour le tutoriel, j'ai déjà dit qu'il sera ré-écrit et expliqué ligne par ligne.

Cela a sous entendrais que tu ne peux pas ecrire un tutoriel sans mettre un lien vers une quelconque façon de te gratifier financièrement ?

luckyboss1

Exactement, on ne peux pas me gratifier autrement que par ce lien,

Noam

+0 -1

Je pense surtout qu'il te demandait si tu étais capable de rédiger un tutoriel sans demander de gratification, peu importe la forme.

La plupart des auteurs ici publient gratuitement : qu'est-ce que tu apportes de plus qui justifierait une gratification ? (Question sérieuse : je ne vois rien de mal à demander un coup de pouce, mais il faut que tu apportes un plus non négligeable)

+0 -0

Bonjour,

Sincérement, ce n'est pas beaucoup mieux. je fais un listings mais je pense qu'il faudrait revoir l'intégralité du tutoriel, son architecture et retirer l'idée de suivi de recette de cuisine…

  • Bon ca manque curellement d'explication sur ce que tu fais et sur ce que tu dis : en vras, c'est quoi les outlines de firefox ? Pourquoi ca marche pas avec input file ? Pourquoi tu dis que le border-radius est compatible avec tous les navigateurs et que tu nous fais ecrire 5 lignes differentes ? "Un peu comme Bootstrap" ? c'est quoi bootstrap ? un lien au moins quoi…
  • Toutes tes images ne marchent pas !
  • La fonction changeStatus, donc déjà, en regardant les noms utilisés dedans et la façon de l'écrire, ca semble plutot pompé de quelque part sur le web (je me trompe peut etre ?)… ensuite, c'est quoi regagree ? c'est quoi a ? trois "=" ? "Pour plus de sécurité" ? Tu es sur ? "Le bouton ne disparait pas ?", de quel bouton on parle, tu nous a pas encore montré de bouton.
  • On personnalise une classe .js dans l'inpout file qui sors de nulle part… Pourquoi on a pas le droit de mettre de background sur la selection du bouton ?
  • La j'avoue que je comprend pas pourquoi tu proposes de mettre le .js dans le html (avec jquery en plus) ? pourquoi ne pas utiliser directement html comme selecteurs si c'est pour faire ca ?

Bref, t'as saisi que y a pas mal de chose qui vont pas…

+1 -0

Bonjour,

Merci pour tes conseils, si tu ne l'as pas remarqué, je viens de refaire l'intégralité du tutoriel, son architecture et "ce livre de cuisine".

Ce tutoriel est pour les initiés, mais je vais quand même changer.

Pour l'input file, il est indiqué que l'on verra ça plus tard

Je vais appliquer tes conseils et vais sortir une nouvelle version le plus vite possible. Pour les images, je ne comprend pas, mon serveur à dû crasher.

Merci, Noam

+0 -0

Merci pour tes conseils, si tu ne l'as pas remarqué, je viens de refaire l'intégralité du tutoriel, son architecture et "ce livre de cuisine".

unpeudetout

J'ai bien remarqué que tu avais remanier le tutoriel, mais il semble que tu n'aies aps compris le probleme, ton tutoriel fait trop listing de documentation, on y apprrend rien, et un débutant comme tu dis ne saura pas faire autre chose que ce que tu lui as explicitement montré, car tu n'explique rien, tu montres juste des morceaux de code sans explication ou aide.

Ce tutoriel est pour les initiés, mais je vais quand même changer.

unpeudetout

Les initiés ? tu veux dire les débutants ? parce qu'un initié n'a aucun intéret à lire ce genre de tutoriel, il est déjà initié justement.

Pour l'input file, il est indiqué que l'on verra ça plus tard

unpeudetout

Tu dis qu'on verra plus tard, mais même plus tard, tu n'expliques pas pourquoi on doit rajouter des div de partout…

+0 -0 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
body::-moz-focus-inner, 
.navbar-right::-moz-focus-inner, 
a::-moz-focus-inner, 
textarea::-moz-focus-inner, 
img::-moz-focus-inner, 
pre::-moz-focus-inner, 
.btnmenu::-moz-focus-inner, 
li::-moz-focus-inner, 
ul::-moz-focus-inner, 
.btn::-moz-focus-inner, 
input::-moz-focus-inner, 
textarea::-moz-focus-inner, 
select::-moz-focus-inner
{
outline-style:none;outline:none;border:none
}

Tutoriel

Dès le premier bout de code on voit que tu as copié-collé.

Et du code en vrac comme ça sans indentation ni explication, c'est bien pour un snippet mais pas un tutoriel.

+0 -0

Pour les images, je ne comprend pas, mon serveur à dû crasher.

Tu peux héberger les images sur ZdS directement, comme ca pas de souci :) (une galerie avec le nom de ton tuto a du être créée dans ton profil. Pour la trouver clique sur ton avatar en haut a droite puis "galerie").

Sinon my 2 cents que j'avais ecrit lors des debuts de ton tuto :

Bon la c'est pas un tuto, c'est un ensemble de code. Jveux dire que un bon tuto tu en sors tu dois savoir tweaker les choses pour faire ce que tu veux. La c'est juste une invitation au copier-coller.

Il faudrait rajouter le surlignage des lignes de code nouvelles ou importantes, expliquer ce qu'elles font, mettre des captures d’écran, raconter quelles paramètres peuvent être change et leur impact etc..

+0 -0
Ce sujet est verrouillé.