| | Auteur | Message |
---|
| (#) Sujet: Cabinet de curiosités Sam 29 Avr 2023 - 13:23 | |
|
| 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 ) 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 ). 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:
L’idée m’était déjà venue lorsque j’ai reçu beaucoup de compliments sur ma fiche de liens avec le système de texte qui se dévoile au passage de la souris ou encore sur le codage des pages wikipédia fait spécialement pour les membres de 30yrs. Puis, la flemme est arrivée parce que je n’avais pas spécialement envie de passer des heures à coder des modèles entiers sur commande qui, peut-être, ne m’inspireraient pas. En revanche, grâce à la frustration de @Jo Carter sur la signature de @Louisa Fleming dont les images ne sont pas égales en longueur mais le sont en largeur, j’ai eu envie de corriger ce petit défaut esthétique car cela ne prend pas des heures. Jo a dit que, de toute façon, si Louisa choisissait de les mettre égales en longueur et en hauteur, elle perdrait en qualité/déformerait les images (pardon Jo, je ne sais plus exactement tes termes ). Ce n’est pas tout à fait vrai et c’est un peu la magie du codage. Je me suis dit que pour faire plaisir aux deux, j’allais refaire le codage pour permettre une égalité sans perdre la qualité. En réfléchissant un peu, je me suis dit que j’avais toujours tendance à faire ça quand les gens rencontraient des problèmes avec leurs codages ou même d’autres choses (récupérer l’url des photos instagram en haute qualité, par exemple, pour éviter de faire un screen d’écran dégueu. Ou même simplement dire comment je suis parvenue à laisser une case vide dans « DC » de mon profil). J’adore réparer des codages bancals, trouver des solutions à des problèmes, partager mes astuces ou refaire des codages vieux dont les propriétés ne sont plus prises en compte avec les mises à jour des navigateurs.
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. 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 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.
Dernière édition par Deborah Brody le Mer 3 Mai 2023 - 18:13, édité 20 fois |
| | | | (#) Sujet: Re: Cabinet de curiosités Sam 29 Avr 2023 - 13:24 | |
|
| 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 - 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:
Je reprends les images de la signature de Louisa. Les voici en codage qui permet d'avoir la même hauteur (80 pixels). - Code:
-
<img src="https://tinyurl.com/mr3pdemx" style="height: 80px;"> <img src="https://tinyurl.com/59c7kwwb" style="height: 80px;"> On se rend bien compte qu'elles ont la même hauteur mais qu'elles ne font pas la même longueur. Si j'essaie de rajouter un codage pour les forcer à avoir la même longueur (165 pixels) et la même hauteur (toujours 80 pixels), voici ce qu'il se passe : elles sont déformées. - Code:
-
<img src="https://tinyurl.com/mr3pdemx" style="height: 80px; width: 165px;"> <img src="https://tinyurl.com/59c7kwwb" style="height: 80px; width: 165px;">
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 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. |
| | | | (#) Sujet: Re: Cabinet de curiosités Sam 29 Avr 2023 - 14:42 | |
|
| 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. |
| | | | (#) Sujet: Re: Cabinet de curiosités Mer 3 Mai 2023 - 17:57 | |
|
| 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. — 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à. — 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). 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 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 ) LA VERITABLE PAIX DE L'ESPRIT VIENT DE L'ACCEPTATION DU PIRE. |
| | | | (#) Sujet: Re: Cabinet de curiosités | |
|
| |
| | | |
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |