Cabinet de curiosités

JO LA MAGOUILLE FAIT SON OEUVRE

Pourquoi certains d’entre vous m’appellent « Jo la magouille » ?

Parce que j’ai tendance à chercher ou avoir des solutions à tout (ou presque). Prendre des photos de site protégé où il est impossible de faire un clic droit pour enregistrer la photo ? Pas de problème. Faire des gifs à partir de stories/reels instagram avec la vidéo originale sans passer par la capture d’écran vidéo ? Pas de souci. Retrouver une photo originale d’un avatar ? Je m’en charge. La signature de votre profil est trop longue ? Que nenni, il y a des solutions sans passer par une page HTML externe. Bref, vous l’avez compris, il semblerait que je sois bourrée de trucs et astuces dont tout le monde n’a pas la connaissance (TMTC, je brille un peu pour pas grand-chose mais ça me va Cabinet de curiosités 2390413160

)

Néanmoins, ce qui fait réellement de moi « Jo la magouille » depuis des années, ce sont surtout mes codages. Autodidacte, j’ai appris sur le tas le CSS, le HTML et le javascript (me demandez pas d’en faire aujourd’hui par contre, ça fait des années que j’ai plus touché à ça, c’est mort, ça serait une catastrophe Cabinet de curiosités 613854477

). J’ai même codé des forums entiers. Par ailleurs, autodidacte sous-entend aussi ne pas savoir tout faire et même faire des erreurs. Je ne me définis pas comme experte mais je pense en savoir assez pour vous en apprendre un peu et vous aider.

la petite histoire pas nécessaire mais je fais ce que je veux:

C’est pourquoi j’ai choisi d’ouvrir aujourd’hui cette galerie un peu spéciale.

COMMENT CA MARCHE ?

Vous l’aurez compris, cette dernière ne sert donc pas à commander des codages entiers mais bien à vous aider sur différents domaines. Voici une liste des choses où je peux vous venir en aide (cette liste est non exhaustive, vous pouvez toujours me poser vos questions ici ou en MP, je vous dirais si je sais faire ou non) :

— Réparer des codages que vous faites ou que vous avez trouvés et qui ne fonctionnent plus/pas correctement.
— Rectifier un codage qui comporte, selon vous, un souci esthétique qui vous dérange.
— Remodeler un codage pour le rendre plus court et/ou plus clair à comprendre.
— Me Demander un morceau de codage pour en compléter un autre (par exemple, le système de passage de souris pour révéler le texte sur ma fiche de liens).
— Me faire part d’une idée que vous avez et me demander si c’est possible à coder (si oui, je vous aiderai/vous ferez le codage, bien entendu).
— Me demander un petit tutoriel sur un codage CSS ou HTML. (ex : l’info bulle de ma signature où se trouve les crédits ou encore comment j’ai mis une scrollbar invisible à ce texte. Autre exemple : vous voulez faire un tableau en HTML mais le code ressemble à du charabia pour vous et vous ne savez pas comment le personnaliser).
— Me poser des questions sur mes trucs et astuces (voir le paragraphe « pourquoi on m’appelle Jo la magouille » pour les exemples mais j’ai bien d’autres choses à partager).

Pour tout ça, je vous invite à expliquer au mieux ce que vous souhaitez ou à remplir le petit formulaire ci-dessous. Comme spécifié plus haut, je ne suis pas une experte, je ne sais pas tout faire, je fais des erreurs mais j’essayerai, en tout cas, de donner le meilleur de moi pour vous aider. :l:

La majorité des aides que je pourrais vous apporter fera l’objet d’un tutoriel/d’une explication, écrite ou en screen, que je recenserais dans l’encadré ci-dessous pour vous permettre de les retrouver plus aisément dans le sujet.

Pour créditer, ça se passe comment ?

Tout dépendra de ce qui est demandé et ce que je sais faire. Si la réparation d’un code demande à le recoder complétement, il sera apprécié de créditer le créateur de base et de préciser « recodé/réparé/remodelé par Cocaïne » par exemple. Si la réparation, c’est parce qu’il manque une div… bon, à part être attentive, j’ai rien fait quoi Cabinet de curiosités 613854477

Ne vous inquiétez pas pour ça, je vous signalerai s’il est nécessaire ou non de me créditer.

Petit point à préciser : je sais qu'il existe des forums entiers d'entraide codage. C'est pourquoi je vous remercie de ne pas exporter mes tutoriels sur ces forums. Ils sont spécialement écrits pour 30yrs et ses membres.

FORMULAIRE

Code:: <div class="titreadmin">un peu d'aide, please</div>

<lov>MA DEMANDE : </lov> écrire ici la nature de votre demande (demande d'astuce/code cassé à réparer/demande d'une partie d'un code/autre)

<lov>EXPLICATION : </lov> facultatif, si nécessaire, expliquez ce qui vous pose problème, ce que vous voulez faire, ce que vous attendez de moi.

<lov>LE CODE/L'ASTUCE CONCERNE : </lov> Collez ici le code qui concerne votre demande si le code existe déjà ou l'url d'un exemple que vous voulez que je code ou que je vous explique. N'oubliez pas de mettre la balise "code" au besoin.

<lov>UN MOT EN PLUS ? : </lov> Au besoin, cette partie est à votre convenance si vous avez autre chose à rajouter.

TUTORIELS

Mes sites favoris

※ Hébergeur d'image (plus le titre de votre image à héberger est court, plus le lien de l'hébergeur sera court aussi)
※ Téléchargeur de vidéos instagram (stories & publication)
※ Site pour faire des gifs
※ Site d'icones (mes icones en haut de chaque tuto viennent de ce site)

Mes tutoriels

※ Définir une même longueur et largeur à deux images de dimensions différentes (sans déformation).
※ Récupérer une photo instagram dans son format original.

Les tutoriels cités

※ Faire un tableau

Mes astuces

※ Ouvrir un lien dans un nouvel onglet

LA VERITABLE PAIX DE L'ESPRIT VIENT DE L'ACCEPTATION DU PIRE.

Définir une même longueur et largeur à deux images de dimensions différentes (sans déformation).

Sans vraiment de surprise, ce premier tutoriel est issu de la discussion entre @Jo Carter et @Louisa Fleming concernant la signature de cette dernière, ses deux images ayant des longueurs différentes.

Pour les personnes à l'aise avec le codage, je vous invite à retrouver le tutoriel rapide en cliquant ICI. Les zones sont rapidement expliquées sans définir tous les termes.

Louisa, mon petit chat, voici le code corrigé de ta signature si tu le souhaites :gla:

Code:: <center><table><tr><td><div style="width: 165px; height: 80px; border: 3px solid white; background: 50% 70% url(https://tinyurl.com/mr3pdemx); background-size: 165px!important;"></div></td><td><div style=" width: 165px; height: 80px; border: 3px solid white; background: 50% 50% url(https://tinyurl.com/59c7kwwb); background-size: 180px!important;"></div></td></tr></table><div style="width:350px;"><div style="font-family:times new roman;color:#6E574D;font-size:20px;letter-spacing:-2px;text-shadow:0px -1px 0px #FFFFFF;text-align:center;"><em>Into the Danger Zone</em></div><div style="width:350px; font-family:arial; font-size:10px;line-height:12px;text-align:justify;"> Listen to her howlin' roar. Metal under tension beggin' you to touch and go. Spreadin' out her wings tonight she got you jumpin' off the deck and shovin' into overdrive</div></div>
[img]https://i.imgur.com/5WUxczB.png[/img]
[img]https://i.imgur.com/ojigJV8.png[/img]<div style="width:350px;">[spoiler][img]https://i.imgur.com/Lbjcusp.png[/img]
[img]https://i.imgur.com/OF5qa3U.jpg[/img]
[img]https://i.imgur.com/IUJCx06.png[/img][/spoiler]</div></center>

Pour les moins expérimentés, voici comment ça se passe de façon détaillée.

explication non nécessaire à la compréhension:

Pour donner la même dimension à deux images sans altérer la qualité ou occasionner des déformations, on transforme l'image (img) en fond (background) d'une zone prédéfinie (div). Voici le code qui permet de transformer une image en fond (si vous souhaitez en définir plusieurs, comme c'est le cas de la signature de Louisa qui a deux images, on répète ce code autant de fois que nécessaire) :

Code:: <div style="width: 165px; height: 80px; background: 50% 50% url(https://tinyurl.com/mr3pdemx); background-size: 180px!important;"></div>

— La "DIV" est une zone. Il faut donc la définir. Pour cela, on ajoute un style.
— Dans ce style, on défini une longueur (width) et une largeur (height). C'est la taille que ferra la zone et donc la taille que l'on souhaite pour notre image de fond.
— Pour y mettre l'image en fond, on rajoute la propriété "background".

— L'url est donc l'url de notre image.
— Les pourcentages correspondent à la position de notre image dans la zone (la div) que l'on a défini (ici, pour l'exemple, l'image est centrée à 50% horizontalement et à 50% verticalement). Vous pouvez bien entendu jouer avec les pourcentages de 0 à 100 pour positionner votre image.

— le "background-size" correspond au "zoom" de notre image. Il faut savoir que, par défaut, si le fond d'une div est une image, cette dernière est répétée pour remplir la zone. Il faut donc lui définir une taille/un zoom pour remplir la zone sans que l'image se répète plusieurs fois. Pour se faire, il est préférable d'avoir des gifs plus grands de base que la zone souhaitée (si on prend un gif carré de 100px pour remplir une zone de 500px, il perdra en qualité). On défini souvent le background size à la même longueur (width) que la zone mais parfois, à cause de la hauteur, ça ne correspond pas, il faut donc jouer avec ce chiffre pour trouver celui qui correspondra le mieux. Dans notre exemple, la première image de la signature de Louisa est assez haute pour avoir la même longueur que la div. La seconde image est trop petite en hauteur, il est donc nécessaire de la "zoomer" et de mettre 180px au background size.

Voici le résultat et comment se présente le code.

Code:: <div style="width: 165px; height: 80px; background: 50% 50% url(https://tinyurl.com/mr3pdemx); background-size: 165px!important;"></div><div style="width: 165px; height: 80px; background: 50% 50% url(https://tinyurl.com/59c7kwwb); background-size: 180px!important;"></div>

MAIS MAIS MAIS, que se passe-t-il, allez vous me dire ! Les images sont l'une en dessous de l'autre et non plus à côté. Pourquoi ? Le défaut de la balise div, c'est que cette dernière fait un retour à la ligne automatique. Pour avoir deux div (donc deux images de fond) l'une à côté de l'autre, il faut donc les mettre dans un tableau d'une ligne et deux colonnes. Voici le codage après installation du tableau.

Code:: <table><tr><td><div style="width: 165px; height: 80px; background: 50% 50% url(https://tinyurl.com/mr3pdemx); background-size: 165px!important;"></div></td><td><div style="width: 165px; height: 80px; background: 50% 50% url(https://tinyurl.com/59c7kwwb); background-size: 180px!important;"></div></td></tr></table>

ET VOILA, vous avez vos deux images aux mêmes dimensions sans les déformer ou altérer leur qualité. Enjoy :l:

Pour les petits curieux qui souhaitent apprendre comment on créer un tableau, je vous propose CE TUTORIEL que je trouve très bien expliqué. Si vous avez des questions le concernant ou que vous souhaitez aller plus loin dans la personnalisation du tableau, n'hésitez pas à me demander.

LA VERITABLE PAIX DE L'ESPRIT VIENT DE L'ACCEPTATION DU PIRE.

Ouvrir un lien dans un nouvel onglet

Il arrive, pour une raison x ou y, que l’on ait besoin de mettre un lien dans un sujet qui soit ouvrable dans un nouvel onglet. En effet, sans propriété lui dictant le désir de s’ouvrir un nouvel onglet, si l’on clique sur un lien, ce dernier va s’ouvrir sur la page où l’on est. Pour s’éviter de devoir faire un clic droit puis « ouvrir dans un nouvel onglet » il existe un codage très simple à appliquer sur ses liens : target=_blank

Exemple avec le lien du forum

Tout d’abord, il faut mettre votre lien sous une forme HTML, comme ceci :

CECI EST UN LIEN QUI VA S’OUVRIR SUR LA PAGE ACTUELLE

Code:: <a href="https://www.30yearsstillyoung.com/"> CECI EST UN LIEN QUI VA S’OUVRIR SUR LA PAGE ACTUELLE</a>

La balise "A" défini le lien. HREF l'url du lien.

Ensuite, vous devez l’obliger à s’ouvrir dans un nouvel onglet. Pour cela, on applique au lien la propriété target=_blank, comme ceci :

CECI EST UN LIEN QUI VA S’OUVRIR DANS UN NOUVEL ONGLET

Code:: <a href="https://www.30yearsstillyoung.com/" target="_blank"> CECI EST UN LIEN QUI VA S’OUVRIR DANS UN NOUVEL ONGLET</a>

Simple comme bonjour, votre lien s’ouvre dorénavant dans un nouvel onglet et non plus sur la page que vous consultez.

LA VERITABLE PAIX DE L'ESPRIT VIENT DE L'ACCEPTATION DU PIRE.

Récupérer une photo instagram dans son format original

Aujourd’hui, on va apprendre à récupérer une photo instagram dans son format original pour avoir la meilleure qualité possible. Exit les screens d’écran, vive les grandes photos !

Tout d’abord, sachez que je suis personnellement sur le navigateur Google Chrome. Ce tutoriel est donc valable pour ce navigateur, je ne saurais pas vous dire s’il est possible de le faire sur d’autres.

Ensuite, je vous conseille d’ouvrir les screens du tutoriel dans leurs formats originaux pour bien suivre. Les étapes des screens sont décrites sous chacun d’eux.

SCREEN 1 / SCREEN 2 / SCREEN 3 / SCREEN 4 / PHOTO DANS SON FORMAT ORIGINAL

DESCRIPTIONS DES ETAPES

— Ouvrez la photo que vous souhaitez.
— Faîtes un clic droit dessus puis cliquez sur « inspecter ». Une fenêtre (souvent à droite) va s’ouvrir.

Cabinet de curiosités TUTOINSTA1

— Comme vous pouvez le constater, la photo ainsi qu’un élément de la nouvelle fenêtre sont en surbrillance bleue (flèche bleue sur le screen).
— Ce qui nous intéresse, c’est la petite flèche noire au-dessus (flèche orange sur le screen). Placez vous sur la flèche noire et ouvrez-là.

Cabinet de curiosités TUTOINSTA2

— Une nouvelle partie du code de la page se déploie. La partie qui nous intéresse est le lien qui suit « SRC » (le lien est en bleu, entouré en rouge sur l’image, il se trouve souvent à la fin du code).

Cabinet de curiosités TUTOINSTA1-1

A cette étape, un choix est possible.

— Premier screen : Vous pouvez faire un clic droit puis « copier l’élément » (autrement dit toute la partie du code en surbrillance bleue) et vous le coller sur Word (ou ailleurs, peu importe) et vous allez chercher le fameux lien qui suit SRC.
— Second screen (la méthode que je recommande) : vous positionnez votre souris sur le lien qui suit SRC, puis clic droit, suivi de « ouvrir dans un nouvel onglet » (flèche grise sur le screen).
ATTENTION, il arrive parfois qu’en faisant le clic droit, ça remonte le code et finalement vous ne faites pas réellement le clic droit sur le bon lien. N’hésitez pas à sortir du clic droit, replacer votre souris sur le lien qui suit SRC et refaire le clic droit. En principe, la second fois, c’est bien le bon lien (en pratique, ça arrive qu’il remonte encore mais c’est rare ). Pas de panique, si vous n’ouvrez pas le bon lien, vous allez vite vous rendre compte par la petitesse de la photo.

Et voilà, vous avez votre photo dans son format original Cabinet de curiosités 674657830

Attention, le lien qui suit SRC est un lien éphémère. Je vous conseille donc d’enregistrer la photo sur votre ordinateur immédiatement et de ne surtout pas utiliser ce lien pour afficher l’image dans un code, elle finira par disparaitre. Privilégiez toujours le réhébergement d’image. (vous pouvez trouver un bon hébergeur d’images dans ma liste de mes sites favoris :l:

)

LA VERITABLE PAIX DE L'ESPRIT VIENT DE L'ACCEPTATION DU PIRE.

Contenu sponsorisé