Skip to Content

Tutorial Hooper.fr

Dernière contribution

5 posts / 0 nouveau(x)
Monster Kill
Rampage!
Portrait de Hakha
Hors ligne
A rejoint: 1 septembre 2011
Contributions: 6587
Tutorial Hooper.fr
SUJET VERROUILLÉ




I - Mise en forme du texte
A) Les différents effets réalisables
B) Comment disposer votre texte?

II - Images, vidéos, son et liens

III - Création de messages avancés
A) Réalisation de balises multiples
B) Les tableaux
C) Le code du tutorial déchiffré

IV - Comment se servir du site et bien rédiger un message? -Dunkio.

Questions/Suggestions


Avant de commencer la lecture, voici un lexique des termes employés (qu'il est fortement conseillé de connaitre):

  • Code et BBCode: Language informatique permettant à l'ordinateur de faire tout ce qu'il est censé faire. En l'occurrence pour ce tutorial le language BBCode est utilisé et permet la mise en forme d'un texte/message sur un forum.
  • Balise: Nom utilisé pour désigner de manière générale le format d'un code sur Internet. Par exemple, pour le BBCode, une balise est notée avec des crochets [ ]. De plus, pour que le code prenne effet, il faut la présence de deux balises (d'où ce terme "baliser"): [BALISE "CHANGEMENT DE COULEUR] Ce texte va changer de couleur [/BALISE CHANGEMENT DE COULEUR]. La balise avec le / sert à indiquer que le code doit prendre fin. Autre exemple, le language Internet php propose des balises du type < script> < /script>.
  • Topic: Terme pour désigner un sujet sur forum. Par exemple sur Hooper.fr, le jeu "L'expression du Hooper" est un topic.
  • Section: Il s'agit d'un endroit sur le forum où l'on regroupe plusieurs topics d'un même thème. Par exemple le topic du jeu "L'expression du Hooper" se situe dans la section "Freestyle".
  • URL: Adresse Internet d'un site, ou "lien". Par exemple "www.google.com".

Edité par Chuck Chan le 29/05/2018 - 20:30

Monster Kill
Rampage!
Portrait de Hakha
Hors ligne
A rejoint: 1 septembre 2011
Contributions: 6587
Re: Tutorial Hooper.fr

I - Mise en forme du texte

A) Les différents effets réalisables
- Mettre en gras
- Mettre en italique
- Souligner le texte
- Barrer le texte
- Taille du texte
- Colorer le texte
- Police du texte

B) Comment disposer votre texte?
- Centrer le texte
- Texte à gauche
- Texte à droite
- Justifier le texte
- Citer un texte
- Cacher un texte

Afin de rendre plus appréciable la lecture de votre topic, plusieurs effets peuvent être appliqués sur ce que vous avez écris. Cela peut aller d'un simple soulignement, jusqu'à une modification totale avec une police d'écriture et une couleur particulière. La plupart des effets présentés si dessous sont disponibles dans la barre d'outils mais il existe toutefois des balises qui ne sont pas disponibles (ces dernières devront donc être tapées manuellement lors de chaque utilisation), et seront notées dans cette partie par un point d'interrogation.

A) Les différents effets réalisables

Bouton en haut à gauche dans
chaque section du forum
permettant la création de topic
Bouton en bas à droite dans
chaque topic permettant d'écrire
un commentaire dans celui-ci

Vous vous retrouvez donc dans l'éditeur de texte après avoir cliqué sur l'un des deux boutons (ci dessus), et différents outils s'offrent à vous:

Dans cette barre, les boutons utiles pour la mise en forme du texte sont présentés ci-dessous

METTRE EN GRAS

Description: Cet outil permet simplement d'augmenter l'épaisseur de votre texte, pour donner un peu plus d'importance à une partie de votre message par exemple.
Code:
Résultat: Texte à mettre en gras

METTRE EN ITALIQUE

Description: Le texte présent entre les balises "i" sera mis en italique (agréable pour les introductions ou citations).
Code:
Résultat: Texte à mettre en italique

SOULIGNER LE TEXTE

Description: Ce bouton permet de souligner une partie de votre texte (ou l'intégralité de votre texte, si l'envie vous prends).
Code:
Résultat: Texte à souligner

BARRER LE TEXTE

Description: Malgré sa faible utilité, l'outil "strike" permet de rayer le texte désiré.
Code:
Résultat: Texte à barrer

TAILLE DU TEXTE

Description: Augmenter ou diminuer la taille des mots, ce qui est très utile pour les titres et sous-titres. La taille minimale est de 6 pixels de hauteur tandis que la taille maximale est elle de 48 pixels (à utiliser avec modération).
Code:
Résultat: 6px10px15px25px35px

COLORER LE TEXTE

Description: Code qui permet de changer simplement de couleur les caractères qui se trouvent entre les balises.
Code:
Résultat: Rouge

NB: Une multitude de couleurs peut être utilisée. Evidemment, le titre de la couleur ou le code avec dièse doit être écrit sans faute pour que l'effet s'applique sur le texte.
Liste de différentes couleurs utilisables

POLICE DU TEXTE

Description: Modifier le style d'écriture de votre texte.
Code:
Résultat: Exemple de police d'écriture

Comme pour les couleurs, de nombreuses polices d'écriture peuvent être utilisées:
Liste de différentes polices utilisables

B) Comment disposer votre texte?

CENTRER LE TEXTE

Description: Code qui centre le texte souhaité. Outil idéal pour les titres de topics.
Code:
Résultat:
Texte à centrer

TEXTE A GAUCHE

Description: Placement du texte par défaut, c'est-à-dire à gauche. Utilité donc très limitée.
Code:
Résultat:
Texte aligné à gauche

TEXTE A DROITE

Description: Outil qui permet de placer le texte à droite.
Code:
Résultat:
Texte aligné à droite

JUSTIFIER LE TEXTE

Description: Permet d'uniformiser un paragraphe, pour une présentation plus propre.
Code:

Résultat:
Texte à justifier: Il ne faut pas confondre le terme de justification avec l'expression « justifié » à gauche ou à droite souvent employée à tort à la place de « ferré » à gauche ou à droite. Le terme de « fer » vient de la façon dont le compositeur alignait les lignes sur son composteur en typographie : les lignes étaient alignées sur le « fer » à gauche, sur la partie mobile du composteur, afin de créer un « drapeau » à droite ; elles étaient « ferrées » à droite, sur la partie fixe du composteur, afin de créer un « drapeau » à gauche. Pour se faire une idée, les articles de Wikipédia sont ferrés à gauche par défaut et sont par nature, selon la taille de l'écran, sa définition et la taille de la fenêtre dans laquelle le texte apparaît, d'une justification souvent trop longue. La dernière ligne d'un paragraphe justifié est alignée à gauche ; on parle de « ligne creuse ». Selon la norme typographique adoptée, la première ligne d'un paragraphe peut être en retrait (alinéa rentrant).

CITER UN TEXTE

Description: Cet outil permet de pouvoir afficher une citation. Cela donne la possibilité de pouvoir directement répondre au message d'une personne donnée.
Code:
Résultat:
Hooper a écrit:
Je vais casser tout!!

CACHER UN TEXTE

Description: Avec ce bouton, il est possible de rendre invisible ce que vous désirez (image(s), texte, vidéo(s)...). Cette option est par exemple très utile lorsque vous voulez parler en toute liberté de séries, films, jeux vidéos sans dévoiler d'intrigues ("spoiler" signifie "gâcher", tel "spoiler la fin de quelque chose")
Code:
Résultat:
N'ouvre pas


Edité par Chuck Chan le 29/05/2018 - 20:29

Monster Kill
Rampage!
Portrait de Hakha
Hors ligne
A rejoint: 1 septembre 2011
Contributions: 6587
Re: Tutorial Hooper.fr

II - Images, vidéos, son et liens

Votre message est un peu fade et manque de contenu interactif? Pas de problème, dans cette partie nous verrons comment afficher des liens, des images, de la vidéo, ainsi que du son!

LIEN VERS UN SITE

Description: Permet de rediriger le lecteur vers un site particulier. Cela permet d'avoir une lecture du post plus agréable et de pouvoir personnaliser son bouton (une URL peut parfois être très longue et rendre difficile la compréhension du message). L'URL d'un site web peut être obtenue dans la barre prévue à cet effet de votre navigateur (pour Google Chrome par exemple, il s'agit de la barre horizontale située en haut de votre fenêtre).
Code:
Résultat: Hooper.fr

INSÉRER UNE IMAGE

Description: Cet outil permet d'illustrer vos messages avec une image quelconque. Pour cela, lorsque vous cliquez sur le bouton adequat, vous devez fournir 3 paramètres. L'URL de l'image ("Image URL"), ainsi que les dimensions (si seulement vous souhaitez redimensionner l'image, sinon ne touchez à rien) de celles ci: la largeur ("Width") et la hauteur ("Height").

Code:
Résultat:

NB: Comment obtenir le lien direct d'une image?

Pour cela, il faut que vous l'affichiez dans votre navigateur. Prenons comme exemple une image de la page d'accueil du site: http://www.hooper.fr/. Admettons que l'on souhaite récupérer l'image de chaton, comme sur l'exemple ci-dessus. Passez votre souris sur l'image en question et faites Clique droit et Ouvrir l'image dans un nouvel onglet. Cela permet ainsi d'isoler ce que l'on désire récupérer, afin de copier l'URL notée dans la barre de navigation de votre navigateur. Copiez/collez cette URL dans l'encadré "Image URL" et le tour est joué!

Comment ajouter une image contenue dans votre ordinateur?

Pour faire afficher votre propre image, il faut tout d'abord l'uploader (c'est à dire, la déposer publiquement sur Internet). Pour ce faire vous devez choisir un hébergeur d'image, par exemple: http://fr.tinypic.com/. Une fois sur ce site, il vous faut trouver l'option Parcourir ou Choisir un fichier afin de choisir quelle image vous voulez uploader. Ensuite vous devez uploader celle-ci via un bouton généralement nommé Upload (pour le cas de Tinypic, il s'agit du bouton Télécharger maintenant!, ce qui est en passant assez ambiguë). Votre image sera finalement envoyée sur leurs serveurs (= leurs pc reliés à Internet qui stockent toutes les images uploadées), et vous pourrez l'afficher dans le forum via la méthode précédente.

INSÉRER UNE VIDEO

Description: Permet d'ajouter une vidéo Youtube à votre message. Pour cela il suffit juste de récupérer le lien de la vidéo que vous souhaitez afficher. Cependant, il est toujours possible de customiser un peu le lecteur en changeant ses dimensions ou en activant la lecture automatique.
  • Pour changer les dimensions, vous devez modifier le code de cette manière: "video:URL width:LARGEUR height:HAUTEUR"
  • Pour ajouter la lecture automatique, il faut rajouter le paramètre "autoplay" (à utiliser avec modération!): "video:URL autoplay:1"
Code:
Résultat:

INSÉRER DU SON

Description: Permet de faire afficher un lecteur audio afin de partager des sons Soundcloud. Ce site (https://soundcloud.com/) propose une base de données importante de sons divers et variés (musiques, podcasts, bruitages, etc...). Pour partager un son, il suffit simplement de copier l'URL de celui-ci dans l'encadré "Soundcloud URL", de la même manière que pour les vidéos. Aucun autre paramètre n'est nécessaire pour l'affichage de ce lecteur.

Code:
Résultat:


Edité par Hakha le 14/01/2015 - 18:40

Monster Kill
Rampage!
Portrait de Hakha
Hors ligne
A rejoint: 1 septembre 2011
Contributions: 6587
Re: Tutorial Hooper.fr

III - Création de messages avancés

A) Réalisation de balises multiples

ORDRE DES BALISES

Description: Dans le but de construire un message à partir de plusieurs balises, l'ordre dans lequel celles-ci doivent apparaître est important. Elles doivent, à la manière de poupées russes, s’imbriquer les unes dans les autres de manière organisée. Si l'on souhaite par exemple utiliser deux balises, il faut que la première paire comprenne la seconde. Exemple avec l'image ci-dessous, les balises 1 en vert sont contenues dans les balises 2 en jaune. Si une des balises 1 (en vert) se retrouve à l'extérieur des balises 2 (en jaune), cela provoquera une erreur. Il est donc primordial de respecter cet ordre afin de pouvoir avoir accès à toutes les fonctionnalités que propose le BBCode.
Code:

BALISES MULTIPLES SIMPLE

Description: Voici un première exemple de balises multiples. Il s'agit ici de faire afficher une image au centre de l'écran, qui renvoie vers un site web. Pour pouvoir coder cela, il faut réfléchir de manière méthodique: quel objet engendre l'autre? Dans ce cas précis, c'est l'image qui devient un lien. Les balises images sont donc placées en première position (en vert), suivies des balises liens (en violet). De cette manière, tout ce qui est contenu entre les balises lien devient un lien (logique). Si les balises avaient été mises dans l'ordre inverse, cela aurait voulu dire que le lien (sous forme d'URL) est une image, ce qui n'a pas de sens. Enfin, afin de placer l'image qui contient ce lien au centre, les balises center (en rouge) sont disposées en fin de chaîne de manière à englober l'image et le lien.
Code:
Résultat:

BALISES MULTIPLES COMPLEXE

Description: Cet exemple un peu plus difficile possède 5 paires de balises. Qu'est-ce qu'on essaye de faire ici? Il s'agit de faire afficher une citation de Hooper alignée à gauche, comprenant un lien, le tout dans un spoiler centré sur le post. De manière méthodique on a donc le message de Hooper avec un lien (en violet et en jaune), suivi du premier alignement (en bleu), puis du spoiler (en vert), et finalement du second alignement (en rouge). Et bien voilà, on a tout pour faire afficher cela:
Code:
Résultat:
A l'attention de tous

NB: Il est également possible de faire cohabiter deux types de balises au sein d'une même paire de balises, sans provoquer d'erreur. En effet, on aurait très bien pu mettre le mot "merci" en gras dans l'exemple ci-dessus (les balises "url" et "b" pour l'effet en gras, seraient toutes les deux comprises dans les balises "quote").

B) Les tableaux

TABLEAU SIMPLE

Description: L'outil tableau est un outil indispensable lorsque l'on souhaite réaliser un topic avec un contenu important et bien organisé. En plus de son utilisation primaire (soit, faire un tableau de données), cela permet aussi de placer plusieurs objets (texte, images, vidéos, etc...) sur une même ligne sans avoir à en passer. Les balises permettant de générer un tableau sont les balises "table" en rouge. Tout ce qui sera contenu entre ces balises sera disposé dans un seul et unique tableau. Cependant, ces simples balises ne permettent pas de créer les lignes et colonnes, qui doivent donc être ajoutées manuellement. Pour créer une nouvelle ligne, il faut utiliser les balises "tr" en jaune. Chaque cellule est ensuite ajoutée une par une avec les balises "td" en bleu. Ainsi, ajouter 2 paires de balises "td" au sein de balises "tr" reviendra à créer deux colonnes (exemple ci-dessous).
Code:
Résultat:
Ligne 1 - Colonne 1Ligne 1 - Colonne 2
Ligne 2 - Colonne 1Ligne 2 - Colonne 2

NB: Comme expliqué plus haut, on peut disposer n'importe quoi entre chaque balise "td" (soit dans chaque cellule). vous pouvez y rajouter des images (avec les balises "img"), des liens ("url"), des vidéos, etc... Attention toutefois à ne pas vous perdre dans toutes ces balises "tr" et "td". C'est pourquoi, lorsqu'on code un très grand tableau, il est primordial de bien disposer son texte (comme avec l'exemple ci-dessus).

Un "td" de trop et le tableau est fichu!

C) Le code du tutorial déchiffré

Dans le but d'en apprendre davantage sur la création de messages avancés, nous allons regarder de plus près le code de ce tutorial. Dans un premier temps, nous allons voir comment réaliser un sommaire simple mais efficace puis, dans un second temps, nous nous intéresserons à la création des blocs qui décrivent les différents outils.

LE SOMMAIRE

Description: Un sommaire efficace est très simple à réaliser. Les seuls outils importants sont le redimensionnement de texte et la création de lien. Tout cela ayant été vu précédemment, la description du code sera donc très rapide.

Premièrement, le sommaire doit être centré. Nous rajoutons donc tout simplement les balises "center" en rouge en début et fin de code (pour englober la totalité du sommaire). Ensuite, afin de rendre le sommaire plus appréciable à l'oeil, on peut rajouter deux barres horizontales pour l'encadrer. La balise permettant cela, est la balise "hr" en vert. Attention, une seule balise suffit à créer une barre horizontale! Maintenant, il faut créer les titres et sous-titres. Pour distinguer les deux, la taille des titres est augmentée à l'aide des balises "size" en jaune et les sous-titres sont mis en italique.

Enfin, il ne reste plus qu'à rediriger le lecteur vers les différentes parties avec des liens, à l'aide des balises "url" en bleu. Pour réaliser cela, il faut récupérer l'adresse (ou URL) des messages correspondants. Elles sont disponibles en cliquant sur leur numéro ici:


Une fois ce bouton pressé, l'URL du message apparaît dans la barre de navigation de votre navigateur. Copiez/collez ce lien dans les balises "url" et votre sommaire est opérationnel!
Code:
Résultat:

I - Mise en forme du texte A) Les différents effets réalisables B) Comment disposer votre texte? II - Images, vidéos, son et liens III - Création de messages avancés A) Réalisation de balises multiples B) Les tableaux C) Le code du tutorial déchiffré IV - Comment se servir du site et bien rédiger un message? -Dunkio.

LES BLOCS

Description: Ce morceau de code utilisé ci-dessous correspond au bloc qui décrit l'outil "Mettre en gras". Il (le bloc) est composé d'une première image, d'un titre ("Mettre en gras"), d'une description, d'une seconde image représentant le code, ainsi que du résultat.

Comment mettre tout cela en forme?

Ce que l'on peut déjà remarquer, ce sont les deux images qui englobent le morceau principal (la première d'une taille égale à 10x10 et la seconde de 10x80). A quoi servent-elles? Ce sont en fait des images transparentes au format .gif (que l'on pourrait décrire comme vides) qui servent à créer un espace entre chaque bloc. En variant la hauteur de celles-ci, on peut ainsi configurer l'espacement entre chaque objet. Cette technique peut être utilisée pour contrer de nombreux autres problèmes (comme les alinéas par exemple).

La création du bloc commence alors avec un tableau (balises "table" en rouge). A quoi ce tableau sert-il? Il sert à afficher le logo ainsi que le titre ("Mettre en gras"). Nous n'avons donc besoin que d'une seule ligne pour cela (d'où l'unique paire de balise "tr" en jaune). Le logo et le titre seront donc placés dans une cellule ("td" en bleu) chacun. Pourtant, si on observe attentivement, on remarque qu'il existe une troisième cellule (une troisième paire de balises "td"). Cette dernière cellule contient la troisième image du bloc, au format .gif. Il s'agit une nouvelle fois d'une image transparente qui a pour but de décaler les deux premières cellules (le logo et le titre) vers la gauche. Sans cette troisième cellule, les deux premières auraient été placées au centre du message, ce que nous ne voulons pas. Une petite balise "hr" est placée dans la seconde cellule afin de mettre en évidence le titre.

A la suite de la description de l'outil (texte simple sans effet particulier), une balise "code" en vert est positionnée. Ce nouveau code permet l'encadrement d'un passage, du même style que les balises "quote". En théorie, ces balises ("code") devrait permettent l'affichage de BBcode sans que celui-ci prenne effet (au lieu d'avoir un texte en gras par exemple, on aurait ça). Que contiennent ces balises "code"? Elles contiennent tout simplement une quatrième image (celle-ci) ainsi que l'affichage du résultat. Parfois, les balises "code" peuvent ne pas marcher et ne pas afficher d'encadrement gris. Pour résoudre le problème, essayez de placer la balise fermante "/code" seule sur une ligne.

Code:
Résultat:
METTRE EN GRAS

Description: Cet outil permet simplement d'augmenter ... Code:
Résultat: Texte à mettre en gras

Edité par Hakha le 24/01/2015 - 13:44

Monster Kill
Rampage!
Portrait de Hakha
Hors ligne
A rejoint: 1 septembre 2011
Contributions: 6587
Re: Tutorial Hooper.fr

Pour toutes questions/suggestions, n'hésitez pas à les envoyer par MP!


Edité par Hakha le 14/01/2015 - 18:40

Sujet verrouillé