Forum

[NEW] Fiche Jeux - BBCodes

Vos critiques, vos conseils, vos louanges (on sait jamais !) pour le site c'est par ici...

Modérateur: Modérateurs

[NEW] Fiche Jeux - BBCodes

Messagede Panda » 18 Jan 2011, 16:58

[UPDATE] Encore plus simple : le programme qui te créé ta fiche "fingers in the nose"
:arrow: download/file.php?id=228


--------------------

1) PRESENTATION
On n’arrête pas le progrès. Après les truculentes balises « spoiler », l’équipe sort de son chapeau magique de nouvelles balises « BBCodes ».
Le but ? Permettre une mise en page qui envoie de la purée grave. Mais grave grave hein.
La première application que nous avons imaginée est cette nouvelle fiche jeu pour agrémenter vos topics.

ImageBioshock 2
Image
> EDITEUR : 2k Games
> DEVELOPPEUR : 2K Marin
> GENRE : FPS/Jeu de tir
> NOMBRE DE JOUEURS : 1 à 4 (16 en ligne)
> DATE DE SORTIE : 30/11/2010
> PRIX : 60€
> SITE WEB : bioshock2game.com
> LISTE DES SUCCÈS : Voir tous les Succès Solo et Live
> LA FICHE XM : Voir la fiche complète
> LE TEST XM : Lire le test
Image
Image Image Image Image
Solo
18/20


Live
16/20

Whaaaa, je veux la même comme fond d'écran !
Très bien, tu es motivé. Sache seulement que l'édition de ces fiches jeux peut paraître un brin barbare. Mais vu qu'on y est arrivé dans l'équipe, on se dit que les miracles existent.
Pour savoir comment faire une fiche-jeu-qui-déboite-la-clavicule, regarde le tuto ci-dessous.


2) TUTORIAL
Pour commencer, voici le code employé, avec les endroits à modifier mis en évidence grâce aux tirets :
Code: Tout sélectionner
[table=width:700px;background-image:url(http://farm6.static.flickr.com/5206/5369833274_1aa8e84537_b.jpg)][td=vertical-align:top;width:228px;padding-bottom:1px;padding-top:5px;padding-left:5px][img]-------- URL DE LA JAQUETTE --------[/img][/td][td=vertical-align:top;float:left;width:390px][size=200][color=#dbff19][b]-------- NOM DU JEU --------[/b][/color][/size]
[img]http://img814.imageshack.us/img814/6387/topbottom.png[/img]
[color=#dbff19]> [/color][color=#FFFFFF][b]EDITEUR :[/b][/color] [color=#afaeae]-------- NOM EDITEUR --------[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]DEVELOPPEUR :[/b][/color] [color=#afaeae]-------- NOM DEVELOPPEUR --------[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]GENRE :[/b][/color] [color=#afaeae]-------- GENRE DE JEU --------[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]NOMBRE DE JOUEURS :[/b][/color] [color=#afaeae]-------- NOMBRE DE JOUEURS --------[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]DATE DE SORTIE :[/b][/color] [color=#afaeae]-------- DATE DE SORTIE --------[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]PRIX :[/b][/color] [color=#afaeae]-------- PRIX --------[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]SITE WEB :[/b][/color] [lien=-------- NOM DU SITE --------,FF6600]-------- URL DU SITE --------[/lien]
[color=#dbff19]> [/color][color=#FFFFFF][b]LISTE DES SUCCÈS :[/b][/color] [lien=Voir tous les Succès Solo et Live,FF6600]-------- URL DE LA LISTE DES SUCCES --------[/lien]
[color=#dbff19]> [/color][color=#FFFFFF][b]LA FICHE XM :[/b][/color] [lien=Voir la fiche complète,FF6600]-------- URL DE LA FICHE SUR XBOXMAG --------[/lien]
[color=#dbff19]> [/color][color=#FFFFFF][b]LE TEST XM :[/b][/color] [lien=Lire le test,FF6600]-------- URL DU TEST SUR XBOXMAG --------[/lien]
[img]http://img714.imageshack.us/img714/2461/bottomtop.png[/img]
[img]-------- URL DU LOGO PEGI --------[/img] [img]-------- URL DES PICTOGRAMMES PEGI --------[/img][/td]
[td=width:82px;background-color:#1c2224][center][size=200][color=#dbff19]Solo
-------- NOTE DU SOLO --------[/color][br][/br]
[color=#FF6600]Live
-------- NOTE DU LIVE --------[/color][/size][/center][/td][/table]

En prenant le temps de repérer les endroits à modifier, vous remarquerez qu'éditer ce code n'est pas insurmontable. Il suffit de rentrer les données aux bons endroits et le tour est joué.
Le reste du code concerne la mise en page des divers éléments, à priori, pas besoin d'y toucher.
Les jaquettes officielles proviennent de xbox.com, elles ont une taille de 219*300 pixels.

Voici les différents logo et jaquettes possibles :
Image Image Image
Image Image Image Image Image Image
Image Image Image Image Image
Pour copier les URL des différents éléments : "clic-droit sur l'image > copier l'adresse/URL de l'image"
Si vous êtes sur Internet Explorer, il est temps de changer de navigateur


3) FICHE PRÊTE A L'EMPLOI
Pour vous faciliter la tache dans vos créations, voici une fiche jeu "vide" qu'il vous suffira de copier-coller.
Elle est prête à l'emploi, les différents logos et jaquettes sont déjà intégrés, il suffit de rentrer les données.
Code: Tout sélectionner
[table=width:700px;background-image:url(http://farm6.static.flickr.com/5206/5369833274_1aa8e84537_b.jpg)][td=vertical-align:top;width:228px;padding-bottom:1px;padding-top:5px;padding-left:5px][img]http://users.skynet.be/fa631716/jaquette.jpg[/img][/td][td=vertical-align:top;float:left;width:390px][size=200][color=#dbff19][b]Nom du jeu[/b][/color][/size]
[img]http://img814.imageshack.us/img814/6387/topbottom.png[/img]
[color=#dbff19]> [/color][color=#FFFFFF][b]EDITEUR :[/b][/color] [color=#afaeae]Inconnu[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]DEVELOPPEUR :[/b][/color] [color=#afaeae]Inconnu[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]GENRE :[/b][/color] [color=#afaeae]Inconnu[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]NOMBRE DE JOUEURS :[/b][/color] [color=#afaeae]1 à ?[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]DATE DE SORTIE :[/b][/color] [color=#afaeae]Inconnue[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]PRIX :[/b][/color] [color=#afaeae]Inconnu[/color]
[color=#dbff19]> [/color][color=#FFFFFF][b]SITE WEB :[/b][/color] [lien=Site officiel,FF6600]http://xbox-mag.net[/lien]
[color=#dbff19]> [/color][color=#FFFFFF][b]LISTE DES SUCCÈS :[/b][/color] [lien=Voir tous les Succès Solo et Live,FF6600]http://xbox-mag.net[/lien]
[color=#dbff19]> [/color][color=#FFFFFF][b]LA FICHE XM :[/b][/color] [lien=Voir la fiche complète,FF6600]http://xbox-mag.net[/lien]
[color=#dbff19]> [/color][color=#FFFFFF][b]LE TEST XM :[/b][/color] [lien=Lire le test,FF6600]http://xbox-mag.net[/lien]
[img]http://img714.imageshack.us/img714/2461/bottomtop.png[/img]
[img]http://users.skynet.be/fa631716/pegi.jpg[/img][/td]
[td=width:82px;background-color:#1c2224][center][size=200][color=#dbff19]Solo
--[/color][br][/br]
[color=#FF6600]Live
--[/color][/size][/center][/td][/table]



4) POUR ALLER PLUS LOIN
Les plus observateurs auront compris que pour réaliser ces fiches jeux nous avons utilisé de nouvelles balises BBCodes :
[ table= ] [ /table ] (crée un tableau)
[ td= ] [ /td ] (ajoute une colonne au tableau)
[ tr ] [ /tr ] (ajoute une ligne au tableau)

Loin de nous l'idée de vous transformer en champion du HTML et CSS, mais en gros ces balises sont les équivalents des <table>, <td> et <tr> utilisés pour la mise en page de tableaux au sein de sites web.
Nous avons donc dorénavant la possibilité de créer des tableaux dans les messages du forum. La fiche jeu ci-dessus n'est d'ailleurs qu'un tableau très simple, composé de trois colonnes.
Bien entendu, les nouvelles balises sont utilisables de mille et une manière. Je serais bien incapable de vous faire un cours sur l'utilisation des tableaux, mais les plus aventuriers pourront tester des mises en page originales et pratiques.

La base à connaître se résume par cette exemple :
Code: Tout sélectionner
[table=border:1px solid]
  [tr]
     [td=]ligne 1 colonne 1[/td]
     [td=]ligne 1 colonne 2[/td]
     [td=]ligne 1 colonne 3[/td]
  [/tr]
  [tr]
     [td=]ligne 2 colonne 1[/td]
     [td=]ligne 2 colonne 2[/td]
     [td=]ligne 2 colonne 3[/td]
  [/tr]
[/table]

RESULTAT :

ligne 1 colonne 1 ligne 1 colonne 2 ligne 1 colonne 3
ligne 2 colonne 1 ligne 2 colonne 2 ligne 2 colonne 3


A SAVOIR :
- La construction commence toujours par la balise [table=]. Elle contient les autres.
- La balise [td=]crée une colonne dans le tableau. La balise [tr]crée une ligne dans le tableau.
- Après le symbole égal (ex : [table= xx ICI xx ]), vous pouvez utiliser des propriétés CSS. Elles sont trop nombreuses pour être énumérées ici, mais elles permettent de donner un look à votre tableau. Dans l'exemple ci-dessus, j'ai utilisé la propriété "border:1px solid" qui crée une ligne d'un pixel de large autour du tableau.
- Le codage du CSS est parfois un peu différent sur le forum par rapport au web, mais la logique reste la même.
- Les différentes propriétés CSS doivent être séparées par un point-virgule ;
- Les autres balises BBCodes du forum (gras, souligné etc.) peuvent être utilisées dans les tableaux.

BON AMUSEMENT !
Image
Avatar de l’utilisateur
Panda
XM | Vétéran
XM | Vétéran
 
Messages: 8016
Inscription: 27 Juil 2004, 15:26
Localisation: Belgique
Gamertag: Panda n3o
ID Steam: PandaXM

Re: [NEW] Fiche Jeux - BBCodes

Messagede Spin » 18 Jan 2011, 17:00

impressionnant ;)

Chapeau bas Mister Panda :)
Spin
XM | Vétéran
XM | Vétéran
 
Messages: 22537
Inscription: 09 Juil 2002, 10:43
Localisation: Oxford
Gamertag: Spin T30

Re: [NEW] Fiche Jeux - BBCodes

Messagede timOM73 » 18 Jan 2011, 17:16

C'est énorme, bravo ! :o

Je vais test ça sur Shift 2.
Image
Avatar de l’utilisateur
timOM73
Silver Member
Silver Member
 
Messages: 4728
Inscription: 20 Mai 2007, 16:28
Localisation: Stade Vélodrome (94)

Re: [NEW] Fiche Jeux - BBCodes

Messagede Panda » 18 Jan 2011, 17:20

Merci Tim :wink:
N'hésite pas à donner un retour sur la difficulté pour créer une fiche. Le tuto peut encore être amélioré si besoin :)
Image
Avatar de l’utilisateur
Panda
XM | Vétéran
XM | Vétéran
 
Messages: 8016
Inscription: 27 Juil 2004, 15:26
Localisation: Belgique
Gamertag: Panda n3o
ID Steam: PandaXM

Re: [NEW] Fiche Jeux - BBCodes

Messagede Master Chief XM » 18 Jan 2011, 17:23

Sympa en effet le design, par contre moi qui ce prend déjà la tête avec des truc plus simple que cela sur le net, à mon avis me faudrait bien 2h pour faire un truc que vous devait faire en 10-15 mins :mrgreen:
Avatar de l’utilisateur
Master Chief XM
XM | Vétéran
XM | Vétéran
 
Messages: 8468
Inscription: 01 Mar 2008, 16:56
Localisation: Confidentiel
Gamertag: Master Chief XM

Re: [NEW] Fiche Jeux - BBCodes

Messagede Panda » 18 Jan 2011, 17:25

Le plus long c'est de trouver les informations, après c'est du "copié-collé" :)


Sinon, j'ai déjà ajouté une petite précision dans le tuto, les jaquettes officielles proviennent de xbox.com et font 219*300 pixels.
Image
Avatar de l’utilisateur
Panda
XM | Vétéran
XM | Vétéran
 
Messages: 8016
Inscription: 27 Juil 2004, 15:26
Localisation: Belgique
Gamertag: Panda n3o
ID Steam: PandaXM

Re: [NEW] Fiche Jeux - BBCodes

Messagede Master Chief XM » 18 Jan 2011, 17:30

Peut être que de mettre en rouge les élements à changer au lieu de laisser tout en vert ( dans la fiche prête à l'emploie ) faciliterai ceux qui veulent faire un test ?
Avatar de l’utilisateur
Master Chief XM
XM | Vétéran
XM | Vétéran
 
Messages: 8468
Inscription: 01 Mar 2008, 16:56
Localisation: Confidentiel
Gamertag: Master Chief XM

Re: [NEW] Fiche Jeux - BBCodes

Messagede Spin » 18 Jan 2011, 17:38

Pas possible ;)
le vert c'est à cause des balises [code] qui transforment tout ce qui est contenu dedans en "code"...
Bref pas possible en l'état :)
Spin
XM | Vétéran
XM | Vétéran
 
Messages: 22537
Inscription: 09 Juil 2002, 10:43
Localisation: Oxford
Gamertag: Spin T30

Re: [NEW] Fiche Jeux - BBCodes

Messagede Matfer » 18 Jan 2011, 18:02

timOM73 a écrit:C'est énorme, bravo ! :o

Je vais test ça sur Shift 2.


Image

:arrow: http://marketplace.xbox.com/en-US/Produ ... bb?cid=RSS

Je te mâche le travail :)
Image
Avatar de l’utilisateur
Matfer
XM | Rédacteur en chef
XM | Rédacteur en chef
 
Messages: 59604
Inscription: 22 Sep 2002, 22:08
Gamertag: Matfer XM

Re: [NEW] Fiche Jeux - BBCodes

Messagede timOM73 » 18 Jan 2011, 18:05

Ah merci, j'avais la petite. J'ai terminé la fiche, j'édite avec ta jaquette. :wink:

:arrow: Résultat. :bravo:
Image
Avatar de l’utilisateur
timOM73
Silver Member
Silver Member
 
Messages: 4728
Inscription: 20 Mai 2007, 16:28
Localisation: Stade Vélodrome (94)

Re: [NEW] Fiche Jeux - BBCodes

Messagede WeakBob » 18 Jan 2011, 18:26

C'est superbe. Un bémol sur les reliefs/ombres : si t'es pas le nez sur ton écran ça fait un donne un effet de flou, voire illisible suivant les couleurs, et de loin c'est pire. A reserver pour les grandes polices.

Voilà. :mrgreen:
Avatar de l’utilisateur
WeakBob
Elite Member
Elite Member
 
Messages: 2333
Inscription: 03 Mar 2009, 14:51
Localisation: Montpellier
Gamertag: WeakBob

Re: [NEW] Fiche Jeux - BBCodes

Messagede Ouiche Lorra1ne » 18 Jan 2011, 18:43

Ces beaux gosses les admins 8)
« On est les enfants oubliés de l’histoire mes amis, on n’a pas de but ni de vraie place ; on n’a pas de grande guerre, pas de grande dépression. Notre grande guerre est spirituelle, notre grande dépression, c’est nos vies. La télévision nous a appris à croire on serait tous riches, des dieux du cinéma ou des rock stars, mais c’est FAUX. Et nous apprenons lentement cette vérité. » Tyler Durden
Avatar de l’utilisateur
Ouiche Lorra1ne
Gold Member
Gold Member
 
Messages: 7844
Inscription: 25 Avr 2008, 07:00
Localisation: 93
Gamertag: Ouiche Lorra1ne

Re: [NEW] Fiche Jeux - BBCodes

Messagede Matfer » 18 Jan 2011, 18:46

WeakBob a écrit:C'est superbe. Un bémol sur les reliefs/ombres : si t'es pas le nez sur ton écran ça fait un donne un effet de flou, voire illisible suivant les couleurs, et de loin c'est pire. A reserver pour les grandes polices.

Voilà. :mrgreen:


Image

"C'est pas faux"
Image
Avatar de l’utilisateur
Matfer
XM | Rédacteur en chef
XM | Rédacteur en chef
 
Messages: 59604
Inscription: 22 Sep 2002, 22:08
Gamertag: Matfer XM

Re: [NEW] Fiche Jeux - BBCodes

Messagede Panda » 18 Jan 2011, 19:33

Hey, vous avez des écrans de merde, on n'y peut rien 8) :mrgreen:

C'est retiré.
Image
Avatar de l’utilisateur
Panda
XM | Vétéran
XM | Vétéran
 
Messages: 8016
Inscription: 27 Juil 2004, 15:26
Localisation: Belgique
Gamertag: Panda n3o
ID Steam: PandaXM

Re: [NEW] Fiche Jeux - BBCodes

Messagede Batto » 18 Jan 2011, 20:54

C'est pas mal et pas compliqué mais faut pas avoir la flemme quoi...
Avatar de l’utilisateur
Batto
Épave de la modération
Épave de la modération
 
Messages: 35558
Inscription: 04 Juil 2004, 09:50
Localisation: Dunkerque(59)/résidence secondaire: hôpital psychiatrique de Silent Hill (seulement pour l'été)
Gamertag: Batto Sensei
ID PSN: batto59
ID Steam: batto59

Re: [NEW] Fiche Jeux - BBCodes

Messagede Manu » 18 Jan 2011, 21:24

C'est pas pour toi c'est ça ? :mrgreen:
Avatar de l’utilisateur
Manu
XM | Rédacteur
XM | Rédacteur
 
Messages: 7200
Inscription: 23 Fév 2005, 18:25
Localisation: Orléans
Gamertag: x M4N x

Re: [NEW] Fiche Jeux - BBCodes

Messagede Bydox » 18 Jan 2011, 22:05

Énorme :aime:
On va enfin pouvoir centrer les titres :mrgreen:
Avatar de l’utilisateur
Bydox
XM | Vétéran
XM | Vétéran
 
Messages: 9738
Inscription: 25 Déc 2008, 19:11
Localisation: Franche-Comté
Gamertag: bydox

Re: [NEW] Fiche Jeux - BBCodes

Messagede timOM73 » 19 Jan 2011, 00:11

On pouvait déjà. :wink:

Par contre, pas moyen du tout de changer nous même de couleur donc ?
Image
Avatar de l’utilisateur
timOM73
Silver Member
Silver Member
 
Messages: 4728
Inscription: 20 Mai 2007, 16:28
Localisation: Stade Vélodrome (94)

Re: [NEW] Fiche Jeux - BBCodes

Messagede Batto » 19 Jan 2011, 00:19

Manu a écrit:C'est pas pour toi c'est ça ? :mrgreen:

Bah voila exactement :mrgreen: ...mais l'effort est louable et c'est bien fichu bravo a Panda pour ce boulot :)
Avatar de l’utilisateur
Batto
Épave de la modération
Épave de la modération
 
Messages: 35558
Inscription: 04 Juil 2004, 09:50
Localisation: Dunkerque(59)/résidence secondaire: hôpital psychiatrique de Silent Hill (seulement pour l'été)
Gamertag: Batto Sensei
ID PSN: batto59
ID Steam: batto59

Re: [NEW] Fiche Jeux - BBCodes

Messagede Panda » 19 Jan 2011, 09:06

timOM73 a écrit:On pouvait déjà. :wink:

Par contre, pas moyen du tout de changer nous même de couleur donc ?

La couleur de quoi ?
Image
Avatar de l’utilisateur
Panda
XM | Vétéran
XM | Vétéran
 
Messages: 8016
Inscription: 27 Juil 2004, 15:26
Localisation: Belgique
Gamertag: Panda n3o
ID Steam: PandaXM

Suivante

Retourner vers Site Xbox Mag

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité