AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  ConnexionConnexion  
Urgence recrutement

On recrute en priorité des PROJECTEURS et des ANIMATEURS, n'hésitez pas à les rejoindre au plus vite o/
Nouveautés de PRD

Venez commenter et lire les nouveautés de PRD ici et surtout, bon courage pour la rentrée ! Wahou
Recrutement de modos

Vous vous sentez l'âme d'un MODERATEUR ? N'hésitez pas à POSTULER, PRD n'attend que vous
Mise en lumière de forum

Aslaug., grande gagnante du concours de photos de PRD, souhaite vous faire découvrir DRACARYS, plus qu'un forum, une perle, une famille **

Partagez| .

Les trucs et astuces des codeurs/ses

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage

avatar

Codeur/se
____________________

Voir le profil de l'utilisateur http://descendantofhumanity.altervista.org/
J'ai rejoint la planète PRD le : 23/05/2016 J'ai posté un total de : 452 Messages. Sinon je m'appelle : Taurus ou Tortillon et j'ai : 31 ans. Dans la vraie vie, je : suis Lead Developer Back-End Les logiciel(s) que j'utilise sont : Photoshop CS6, Sublime Text 3 Build 3143 et WinSCP


Codeur/se
Message(#) Sujet: Les trucs et astuces des codeurs/ses Jeu 2 Nov - 13:23

Les trucs et astuces des codeurs/ses

Le groupe des Indigos (Ou Bleu Roi selon les préférences de chacun(e)) vous propose ce mois-ci quelques astuces à appliquer lorsque vous codez sur votre forum !
Cela peut être du HTML, du CSS, du JS ou un mélange des trois ! Un code plus court, un code plus propre ? Nous vous proposons de tout !

Certaines choses, vous les connaissez déjà, d'autres permettent de mettre en lumière des tutoriels que vous pouvez retrouver dans notre section.

[CSS] Réduire son CSS - La police

Vous connaissez les propriétés, font-size, font-family, font-weight ? Et bien apprenez à les utiliser en une seule ligne !

Et oui, elle existe depuis CSS1, elle est facile d'utilisation et permet d'utiliser une ligne pour plusieurs actions. Il s'agit de la propriété font. Voici ce que ça donne :

font: font-style font-variant font-weight font-size/line-height font-family caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

Mais qu'est-ce qu'il raconte lui ?
Pas d'inquiétude, ce que vous voyez ici sera aussi prochainement dans un tutoriel. Mais expliquons un peu ce que je vous ai donné ci-dessus. Les propriétés font-(nom de la propriété) sont toutes sur une seule ligne dans un ordre spécifique à la propriété. Mais toutes ne sont pas obligatoires selon ce que vous voulez utiliser.

Dans ce truc et astuces, je vais vous montrer comment utiliser 3 des propriétés présentes.
Et pour ça, prenons un exemple ! Je veux un texte en gras, de taille 14 pixels et en Verdana sans les empattement aussi appelés serif. Pour ce faire, je vais reprendre la propriété au-dessus et utiliser, dans l'ordre, les propriétés enfants dont j'ai besoin. Et ça donnera ceci :

font: bold 14px Verdana, sans-serif;

Et ça fonctionne vraiment ?
Oui, par exemple, la fiche ici présente utilise cette méthode.

Mais, j'imagine que vous avez remarqué une petite subtilité dans le code, une séparation étrange entre la taille et la hauteur de ligne, elle est obligatoire et vous la croiserez régulièrement dans d'autres propriétés que nous verrons plus tard !

Voilà ce que ça donne, quand on reprend la même configuration, mais en ajoutant une hauteur de ligne de 20 pixels :

font: bold 14px/20px Verdana, sans-serif;

Vous pourrez retrouver d'avantages de détail dans le tutoriel qui sera fourni prochainement.

par Les codeurs/ses


[CSS] Des images en bordure

C'est une chose que l'on ne voit pas souvent, pourtant la propriété border-image permet bien ceci ! Mais elle peut sembler complexe à utiliser.

Les bordures sont magiques, on en utilise dans nos tableaux, dans nos fiches, on leur donne des arrondis, des grosseurs, des couleurs... mais pourquoi pas une image ?
Ça y est, il délire !
Mais non, j'ai encore toute ma tête. Et je ne m'arrache pas les cheveux quand je commence à perdre la tête, je bois un bon petit kawa et tout va mieux.
Mais nous ne sommes pas là pour discuter de café ! ouisi

Le border-image, est une propriété qui se décline comme suit :
border-image: source slice width outset repeat initial|inherit;

Oui, la méthode 1 concernant la réduction en une ligne existe ici aussi. Mais si vous voulez la méthode longue, voici la liste :
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

Ça fait beaucoup quand ce n'est pas sur une ligne, n'est-ce pas ?
La source, c'est l'url de l'image, jusque là, rien de compliqué.
Le slice c'est un pourcentage, cette valeur effectue les découpes de votre image. La valeur commune est "30".
La taille, comme la taille de bordure, elle a la même fonction mais pour l'image.
La valeur suivante vous permet de faire sortir d'image du cadre, de repousser ses limites. Vous pouvez régler les 4 côtés indépendamment ou ensembles.
La répétition, il existe 3 valeur en plus de la valeur initiale et la valeur non-hérité, les valeurs "stretch", "repeat" et "round", la première va étendre le milieux des 4 faces pour qu'il se lie avec les 4 coins de la bordure, la seconde va effectuer une répétition simple (et pas très jolie parfois) du milieu des 4 faces, enfin la dernière va effectuer une répétition propre en fonctionnant comme la seconde.

Mettons en pratique, voulez-vous !
Créons un cadre avec des bordures en point, pour ce faire, une image (à trouver ou créer) doit se composer de 9 parties, 4 coins, 4 faces et 1 milieu. Cela donne ceci :

© Thaor Thorvald


Bon, ici je vous montre le résultat quand il est appliqué, mais en créant une image, assurez-vous qu'elle soit carrée, que les points sont bien placés et si vous avez peur que les points soient trop compliqué pour vous, créer une image dont les élément sont en contact, comme ceci :

On retrouve bien nos 9 parties ici ouisi
Appliquons l'image dans le code suivant et regardons ce qu'il se passe Wahou

<div style="border-image: url('https://i.imgur.com/mnyy41Y.png') 30/9px/5px round;">Blabla !</div>

Blabla !


Oh ! Des séparateurs dans le code !
Et oui, les 3 propriétés étant utilisées sous forme de valeur, il leur faut le séparateur pour que votre navigateur sache quelle propriété lire.

Expliquons rapidement le contenu du code, nous avons en premier le lien de notre image, niveau simplicité, ça ne change pas. Ensuite le pourcentage de découpe l'image, la valeur 30 permet d'appliquer la découpe sur les 4 côtés. Arrive ensuite la taille de la bordure suivie par la valeur de dépassement, on sort de la bordure initiale sur les 4 côtés (donc 1 seule valeur) de 5 pixels. Enfin, on veut que ce soit propre dans la répétition et que dans le cas où la taille du cadre change, l'image garde une répétition complète, elle étirera les éléments pour éviter la découpe de répétition.

par Les codeurs/ses


[Astuce] L'Astuce du bon apprenti

Aaaah mon code ! Mais qu'a-t-il fait, on avait dit un sujet où on donne des astuces en codage, pas un cours de psychologie !
On se calme les enfants, vous allez voir, cette astuce est pleine de sens ouisi

La première hantise de toute personne qui débute, c'est de se tromper. Que ça ne fonctionne pas. Que ça casse tout.

Mais le saviez-vous ?
Faire des erreurs en codage aide à progresser.

Oui, vous qui êtes derrière votre écran, oui quand vous faites des erreurs, vous apprenez beaucoup de choses ouisi

- Comment l'erreur s'est produite
- Ce qu'il faut éviter de faire
- Comment la corriger
- Comment trouver la solution à l'idée de base puisque l'essai précédent c'était conclu par une erreur

PAF ! Vous avez apprit des choses !

Pas d'inquiétude pour votre cerveau, il va pas griller, entre entretenir ta respiration, enregistrer et interpréter ce que vous voyez, et effectuer les mouvements de votre corps (et je vais en passer, la liste est trop longue), apprendre une chose en plus ne lui ferra que du bien Very Happy

Et le saviez-vous, vous, grand amateur de clichés ? Et bien on utilise l'intégralité de notre cerveau, et non 10-15% comme la croyance populaire veut nous faire croire ouisi (Désolé de vous casser se préjugé, mais je suis l'amis du diable perv)

Après cette petite interlude, retournons à du code !

par Les codeurs/ses


[Html/JavaScript] Utiliser les variables de vos forums partout !

Vous aimeriez créer une publicité pour votre forum, vous avez créé une page html pour ça, mais vous devez continuellement mettre les chiffres à jour ! Pas de panique, soyez Monique ! *Relit le script* Ah non, pas de panique, lisez la suite !

Le forum des ForumActifs est lui aussi source de tutoriels pour améliorer vos forums, parfois des réponses peuvent s'y trouver. Ceci est un tutoriel mis en avant pour vous permettre d'améliorer votre manière de faire vos publicités.
Sur votre pages html, vous devez ajouter ceci entre les balises <head> :

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>

Un fois ajouté et enregistré, vous pouvez dès maintenant utiliser les balises que vous pouvez trouver à ce lien http://LIEN_DE_VOTRE_FORUM/popup_help.forum?l=miscvars
Pour les utiliser, voici une astuce :
L'utilisation habituelle ne fonctionne pas, il faut passer par du html pour les utiliser, mais vous allez voir, seul le contour des variables change.

Et prenons un exemple simple, le nom d'utilisateur :
<span class="USERNAME"></span>
Il vous suffit de changer USERNAME par la variable que vous voulez utiliser et ajouter votre texte avant ou après les balises !

D'autres utilisations sont possible, comme mettre plusieurs variables à la suite dans la même classe, ou utiliser une autre balise html Smile

par ForumActif


[CSS] Lier une propriété à plusieurs éléments

C'est très pratique, c'est simple d'utilisation et ça ne mange pas de pain ! Apprenez une technique d'optimisation de votre feuille de style.
J'imagine que vous utilisez souvent de nombreuses propriétés pour de nombreux éléments. Mais avez-vous déjà essayé de réduire le nombre d'utilisation ?

Par exemple, vous avez un titre, un paragraphe et un identifiant qui utilisent tous les trois la même police. Et vous leur ajoutez à tous les trois aussi un alignement du texte en "centré", pourquoi créer 3 contenus alors que vous pouvez en faire qu'un seul ?

h3, p, #center-text {
font-family: Arial;
text-align: center;
}

Voilà, vous savez maintenant réduire d'avantage votre code. Mais faites bon usage de ceci, avec une mauvaise utilisation vous pouvez avoir de mauvaises surprises Sad

par Les codeurs/ses


[Astuce] L'Astuce du bon apprenti

Il n'est pas possible, le voilà qu'il recommence !

Et oui, c'est repartit pour une petite anecdote utile !

Le saviez-vous ?
Vous avez plus de chance de trouver une réponse sur google en utilisant des mots-clés en Anglais qu'en Français !

Vous aimez les stats ? Moi j'adore ça ! Wahou

Première recherche - FR/EN
"Apprendre CSS"
Environ 517 000 résultats (0,36 secondes)
"Learn CSS"
Environ 81 700 000 résultats (0,47 secondes)

Deuxième recherche - FR/EN
"Tutoriel formulaire HTML"
Environ 292 000 résultats (0,47 secondes)
"HTML form tutorial"
Environ 158 000 000 résultats (0,39 secondes)

On estime que vous avez 5 à 10 fois plus de résultats en Anglais selon vos recherches qu'en Français.

Pas besoin d'en faire une troisième, le code à la base est en Anglais, vous aurez donc plus de chance de trouver de l'aide en faisant votre recherche en Anglais. L'Anglais étant la langue internationale ouisi

par Les codeurs/ses


[Astuce] L'Astuce du bon apprenti

Il n'est pas facile dans le code de changer la même couleur répétée une quinzaine de fois, on a toujours d'oublier une valeur.
Les codeurs sont faignants.

Il est souvent difficile dans un code de changer la même couleur alors qu'elle est répétée quinze fois dans le code. On a souvent peur d'en louper une ou d'en effacer une.

Mais le saviez-vous ?
Il existe un logiciel qui permet de remplacer toutes les couleurs en quelques secondes.

Et oui, ce logiciel est connu de tous les codeurs, c'est le logiciel Notepad++. C'est tout simple pour remplacer une image ou une couleur il suffit d'avoir le logiciel, d'aller sur Recherche > Remplacer. Ensuite il suffit de remplacer ce que l'on veut par ce que l'on souhaite et le tour est joué. En moins d'une minute tout est remplacé par ce que vous voulez.

par Notre stagiaire @Domino


[Hors sujet] Bonus - Cassons un préjugé !

perv


Gif de be-angels.fr

par Les codeurs/ses


Pub RPD Design © 2017

_______________________________________________



Codeurpub-rpg-design.com

╰( ´・ω・)つ──☆ Taurus
Revenir en haut Aller en bas

Les trucs et astuces des codeurs/ses

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Trucs et astuces pour µTORRENT
» FireFox 4 : Trucs et astuces
» Listing des Trucs & Astuces
» Trucs & Astuces : le riz
» Discussions trucs & astuces bureautique

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
» PUB RPG DESIGN « :: Lumière sur les codeurs-