Forum RPG sur l'univers de Fairy Tail. Dans un monde où tout le monde doit repartir sur un pied d'égalité après une cuisante défaite, arriverez-vous à devenir le mage le plus puissant de cette ère ? (-16)

Concours de codage dans vos gueules !

Concours de codage dans vos gueules !

Messages : 205

Jewels : 588

Date d'inscription : 03/07/2015

Age : 29


Feuille de personnage
Barre d'xp:
8643/9999  (8643/9999)
Orientation: Pémmasexuel
Magie: Invocation de Cookie/Banhammer

pnj
Bonjour, bonjour ! Aoi pleurait trop, alors voici un quatrième concours qui pop en ninja !

Comme certains l'ont deviné avec le titre, il s'agit cette fois d'un concours de codage pour les guerriers du clavier WoLien. Comme pour les autres concours, le thème sera l'automne et vous avez trois semaines à partir de quand ce message va être posté pour nous montrer vos talent de super-codeur ! Pour vos création, nous aimerions voir des fiches techniques, tableaux relationnels et autres trucs qui rendent les Personnal Box très cool. Vos créations seront également offertes en libre service sur le forum si vous le désirez, avec un petit mot pour préciser que ça vient de vous.

Premier prix : 300 jewels et Aoi en esclave pendant une semaine.
Deuxième prix : 200 jewels
Troisième prix : 100 jewel

P.S. Vu qu'on est un staff/patte de singe maudite, Aoi va servir de juge sur la partie technique de vos codage. 8D

P.P.S. Pour faire simple, on vous demande de poster votre code entre balise [code] à la suite de votre création et précisez si vous accepter de l'offrir en libre service.

Re: Concours de codage dans vos gueules !

Messages : 287

Jewels : 814

Date d'inscription : 20/12/2015

Age : 20

Localisation : Ici et là, partout et nulle part


Feuille de personnage
Barre d'xp:
180/200  (180/200)
Orientation: Hétérosexuelle
Magie: Wiccachamanisme, Tsitsi matsenga, Sporis magicae

Mermaid B
Voici une fiche des liens, thème automnal. En libre service, tout peut se modifier, images, couleurs...

Fiche et code:


Les feuilles de
mon arbre à souvenirs



Edmée Méadessandre


Ici on va écrire comment on l'a rencontré, si c'est plutôt un ami ou autre, si on veut recroiser son chemin pour faire une belote ou autre chose de plus intime, enfin bref, pas trop non plus parce qu'il n'y a pas beaucoup de place pour écrire un roman en quatre tomes



Jean Aymard


Ici on va écrire comment on l'a rencontré, si c'est plutôt un ami ou autre, si on veut recroiser son chemin pour faire une belote ou autre chose de plus intime, enfin bref, pas trop non plus parce qu'il n'y a pas beaucoup de place pour écrire un roman en quatre tomes



Thibaud Encostum


Ici on va écrire comment on l'a rencontré, si c'est plutôt un ami ou autre, si on veut recroiser son chemin pour faire une belote ou autre chose de plus intime, enfin bref, pas trop non plus parce qu'il n'y a pas beaucoup de place pour écrire un roman en quatre tomes, bon il y a quand même un overflow pour les plus bavards qui apparait si nécessaire



Jean-Phil Alaise


Ici on va écrire comment on l'a rencontré, si c'est plutôt un ami ou autre, si on veut recroiser son chemin pour faire une belote ou autre chose de plus intime, enfin bref, pas trop non plus parce qu'il n'y a pas beaucoup de place pour écrire un roman en quatre tomes, bon il y a quand même un overflow pour les plus bavards qui apparait si nécessaire





Code:
<div style="background:url(http://nsa37.casimages.com/img/2016/10/27/161027040716171786.png); padding-top:100px;background-position: top; width: 600px; opacity:1;border-radius: 30px 30px 30px 30px;border-right: 5px solid #660000; border-left: 5px solid #660000">

<div class="titre">Les feuilles de <br>mon arbre à souvenirs </div>

<img class="ima1" src="http://nsa38.casimages.com/img/2016/10/27/16102703481433778.png"/>
<div class="nom1">Edmée Méadessandre </div>
<img class="feuille1" src="http://nsa38.casimages.com/img/2016/10/26/161026111516370710.png"/>
<div class="desc1" >Ici on va écrire comment on l'a rencontré, si c'est plutôt un ami ou autre, si on veut recroiser son chemin pour faire une belote ou autre chose de plus intime, enfin bref, pas trop non plus parce qu'il n'y a pas beaucoup de place</div>

<img class="ima2" src="http://nsa37.casimages.com/img/2016/10/27/161027034814646843.png"/>
<div class="nom2">Jean Aymard</div>
<img class="feuille2" src="http://nsa37.casimages.com/img/2016/10/27/16102712015550177.png"/>
<div class="desc2" >Ici on va écrire comment on l'a rencontré, si c'est plutôt un ami ou autre, si on veut recroiser son chemin pour faire une belote ou autre chose de plus intime, enfin bref, pas trop non plus parce qu'il n'y a pas beaucoup de place</div>

<img class="ima1" src="http://nsa38.casimages.com/img/2016/10/27/16102703481563708.png"/>
<div class="nom1">Thibaud Encostum</div>
<img class="feuille1" src="http://nsa38.casimages.com/img/2016/10/26/161026111516370710.png"/>
<div class="desc1" >Ici on va écrire comment on l'a rencontré, si c'est plutôt un ami ou autre, si on veut recroiser son chemin pour faire une belote ou autre chose de plus intime, enfin bref, pas trop non plus parce qu'il n'y a pas beaucoup de place, bon il y a quand même un overflow pour les plus bavards</div>

<img class="ima2" src="http://nsa38.casimages.com/img/2016/10/27/161027034815185492.png"/>
<div class="nom2">Jean-Phil Alaise</div>
<img class="feuille2" src="http://nsa37.casimages.com/img/2016/10/27/16102712015550177.png"/>
<div class="desc2" >Ici on va écrire comment on l'a rencontré, si c'est plutôt un ami ou autre, si on veut recroiser son chemin pour faire une belote ou autre chose de plus intime, enfin bref, pas trop non plus parce qu'il n'y a pas beaucoup de place, bon il y a quand même un overflow pour les plus bavards</div>

<style type="text/css">.titre{margin-left:40px;font-family:Monotype Corsiva;font-size:30px;text-align: left;color:#330000;text-shadow:#ffcc33 3px 3px 3px;font-weight:bold;margin-bottom:100px;}.ima1{width:50px;height: 100px;text-align: left;border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px;margin-top:25px;margin-left:104px;}.ima2{width:50px;height: 100px;text-align: left;border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius:40px; -o-border-radius: 30px;margin-top:25px;margin-left:425px;} .nom1{width:100px;height:20px;text-align:center;margin-left:75px;font-family: Monotype Corsiva; font-size: 17px;color:#330000;font-weight:bold}.nom2{width:100px;height:20px;text-align:center;margin-left:400px;font-family: Monotype Corsiva; font-size: 17px;color:#330000;font-weight:bold}.feuille1{margin-left:80px;opacity:0.5; margin-top : -240px;padding: 10px;}.feuille2{opacity:0.5; margin-top : -240px;padding: 10px;margin-left:20px;}.desc1{position:relative;padding:12px; margin-top : -240px;margin-bottom:40px; color: #330000; font-size: 11px;overflow: auto; width:240px;height: 170px;margin-left:255px;text-align:left;font-family:Comic Sans MS;font-size:13px;}.desc2{position:relative;padding:12px; margin-top : -240px;margin-bottom:40px; color: #330000; font-size: 11px;overflow: auto; width:240px;height: 170px;margin-left:110px;text-align:left;font-family:Comic Sans MS;font-size:13px;} </style></div>



Re: Concours de codage dans vos gueules !

Messages : 10

Jewels : 383

Date d'inscription : 14/10/2016

Age : 22


Feuille de personnage
Barre d'xp:
0/0  (0/0)
Orientation: Hétérosexuelle
Magie: Rééquipement & Ice-make

Lamia Scale C
Une personne voulait me voir participé à ce concours de codage et je ne citerais pas qui exactement ~

Voici ma fiche de relation et que j'accepte de mettre en libre service pour le forum, même si je mettrais sûrement aussi en libre service sur un site ou je me trouve ! Surtout qu'à mon avis, je vais ajouté le reste après le concours pour que tout puisse allé ensemble ♥

Spoiler:
Relation

Lien recherché : Une petite description de votre recherche.

Lien recherché : Une petite description de votre recherche.

Lien recherché : Une petite description de votre recherche.

Lien recherché : Une petite description de votre recherche.


Nom prénom - Lien

Vous pouvez décrire la relation avec le personnage en question ! Cela peut-être un ami, une connaissance ou même un ennemi.

Nom prénom - Lien

Vous pouvez décrire la relation avec le personnage en question ! Cela peut-être un ami, une connaissance ou même un ennemi.

Nom prénom - Lien

Vous pouvez décrire la relation avec le personnage en question ! Cela peut-être un ami, une connaissance ou même un ennemi.
©Eikyuu

Code:
<center><div style="background-image : url('http://www.favorisxp.com/fonds-decran/automne/feuilles-automne-fond-d-ecran.jpg'); width: 500px; height: auto;"><div style="background-color: black; width: 500px;height: auto;font-size: 18px;color: white;">Relation</div>
<table><tr><td><div style="border: black medium solid; width: 200px; height: 320px; margin-right: 10px; margin-left: 10px;"><img src="http://img4.hostingpics.net/pics/188236Codage.png" style="width: 200px; height: 320px;"></td><td><div style="border: black medium solid; width: 230px; height: 320px;  padding: 5px; background-color: #cc6633; font-size: 15px; font-family: Time new roman; color: black; overflow: auto"><i>Lien recherché :</i> Une petite description de votre recherche.

<i>Lien recherché :</i> Une petite description de votre recherche.

<i>Lien recherché :</i> Une petite description de votre recherche.

<i>Lien recherché :</i> Une petite description de votre recherche.
</td></tr></table><br>
<div style="background-color: black; width: 500px;height: auto;font-size: 18px;color: white;">Nom prénom - Lien</div>
<table><tr><td><div style="border: black medium solid; width: 100px; height: 100px; margin-left: 10px; transform: rotate(-3deg)"><img src="http://img4.hostingpics.net/pics/616380code.png"></div></td><td><div style="width: 350px; height: 100px; background-color: #cc6633; border: black medium solid; overflow: auto; text-align: justify; color:black;"><i>Vous pouvez décrire la relation avec le personnage en question ! Cela peut-être un ami, une connaissance ou même un ennemi.
</i><div></td></tr></table>

<div style="background-color: black; width: 500px;height: auto;font-size: 18px;color: white;">Nom prénom - Lien</div>
<table><tr><td><div style="border: black medium solid; width: 100px; height: 100px; margin-left: 10px; transform: rotate(-3deg)"><img src="http://img4.hostingpics.net/pics/616380code.png"></div></td><td><div style="width: 350px; height: 100px; background-color: #cc6633;border: black medium solid; overflow: auto; text-align: justify; color: black;"><i>Vous pouvez décrire la relation avec le personnage en question ! Cela peut-être un ami, une connaissance ou même un ennemi.
</i><div></td></tr></table>

<div style="background-color: black; width: 500px;height: auto;font-size: 18px;color: white;">Nom prénom - Lien</div>
<table><tr><td><div style="border: black medium solid; width: 100px; height: 100px; margin-left: 10px; transform: rotate(-3deg)"><img src="http://img4.hostingpics.net/pics/616380code.png"></div></td><td><div style="width: 350px; height: 100px; background-color: #cc6633; border: black medium solid; overflow: auto; text-align: justify; color: black;"><i>Vous pouvez décrire la relation avec le personnage en question ! Cela peut-être un ami, une connaissance ou même un ennemi.
</i><div></td></tr></table>
©Eikyuu</center>

Re: Concours de codage dans vos gueules !

Messages : 1753

Jewels : 1814

Date d'inscription : 16/02/2015

Age : 29

Localisation : Hôsenka


Feuille de personnage
Barre d'xp:
60/2500  (60/2500)
Orientation: Lesbienne
Magie: Hentai no Mahō / Magic Tonfa / Constellation / Archive

Mermaid S
@Aoi Donatsu a écrit:
BLBLBLBL les gens ! Etant donné que je suis nul en intro je vais tout de suite annoncer le classement : la grande gagnante (ouai je sais y a que des femmes qui ont participes et oui je fais une parenthèse pour bien marquer le suspense et bien faire chier) est Mandra o/ Ayame est donc deuxième o/

Et je vais vous expliquer en détail le pourquoi du comment(je vais utiliser les termes back pour dire le code en lui même et front pour le rendu o/). Je tiens cependant à dire que j'ai faillit mettre une égalité étant donné que les points forts d'une fiche tapent dans le point faible de l'autre xD (Ayame gagne dans l’esthétique et mandra dans le code en lui même)


En premier l'erreur commune :
-le fond, celui de mandra étant trop étiré et celui de Ayame étant un wallpaper donc on ne voit qu'une partie (donc plus lourd à charger que necessaire), mais le soucis réside dans l'image en elle même : ajoutez plein de liens et on verra de manière assez importante l'image qui se répète. Dans ce genre de cas il faut soit privilégier un fond de couleur uni soit une image pattern (comme le fond du fofo) qui va se répéter de manière coordonnée o/


Pour Ayame :
Un rendu simple, clair et efficace, l'essentiel est là et on le trouve facilement. Coté graphique, pas grand-chose à redire en soit mis à part le fond et le fait qu'il n'y ait pas de police dans les bandeaux ce qui aurait put être sympathique. Le principal soucis se trouve en back :

-le premier est l'utilisation de la balise center qui est dépréciée depuis le html5 et qui ne fait donc plus partit des balises à utiliser o/ (plus d'infos ici https://developer.mozilla.org/fr/docs/Web/HTML/Element/center ) privilégie l’utilisation de margin:auto ; et de text-align:center ;

-le deuxième soucis vient de css : il est intégralement mit de façon « inline » dans les balises, autant quand il est léger ça pose pas de soucis, autant dans une fiche qui se peut être très longue cela peut gêner la compréhension de l'utilisateur qui sera un peu perdu, étant donné les éléments qui se répètent, utiliser une balise style et des class/id serait profitable car avec les balises sans le contenu cela représente un total de 482 caractères ! (ps, sous forumactif il ne faudra jamais mettre de retour à la ligne dans une balise style car il génère des retour à la ligne qui sont des balise br, ce qui brise la balise style !

-la troisièmes c'est quelques petites erreurs dansle css comme le height:auto ; qui est inutile, le padding 5px qui ne marche pas sur la colonne de droite (lien recherché) parce que heu….Là je sèche un peu, un double espace qui a été convertit lui aussi ?

-la quatrième c'est la balise i : elle doit être utilisé pour démarquer un élément d'un texte et non pour mettre en italique o/ privilégie le  font-style: italic;  pour ceci o/ (plus d'infos ici https://developer.mozilla.org/fr/docs/Web/HTML/Element/i )

-la cinquième plus importante est la non fermeture de certaines balises comme la balise contenant l'avatar en 200*300 qui est comme ceci :
Code:
<td><div style="border: black medium solid; width: 200px; height: 320px; margin-right: 10px; margin-left: 10px;"><img src="http://img4.hostingpics.net/pics/188236Codage.png" style="width: 200px; height: 320px;"></td>
En toute sincérité, je prévoyais un ex aqueo avant de voir cette erreur qui est très importante mais aussi très facilement trouvable avec un indenteur de code (comme http://tab-it.fr/ ), l'utilisation du tableau à empêché la page de wol d'être impactée (c'est pour ça que les fiches buggées ne pêtent rien sur les fofos en phpbb2 et que ça démonte sa race aux forums phpbb3 : les phpbb2 utilisent une structure en tableau o/ ). Cependant quand je dit fermeture de certaines balises, j'inclus bien évidement l'oubli du « / » après les balises i des « Vous pouvez décrire la relation avec le personnage en question ! Cela peut-être un ami, une connaissance ou même un ennemi. «  .



Ensuite passons à Mandra o/

Coté codage :

-en premier même si ce n'est pas des plus important c'est le nom de test class : ils sont trop génériques ! Par exemple j'aurais très bien put utiliser titre en nom de class pour le forum, ainsi ta fiche aurait impactée la page !

-en second tu utilises certains préfixes CSS qui sont complètement plus d'actualité, comme par exemple : -moz-border-radius qui à juste servit à la version 3.0 de Firefox et qui n'était plus nécessaire à la 4.0, sachant qu'on est actuellement à la version 50 ça daaaaaaate.


-en troisième tu utilises des class partout ce qui est super cool sauf au conteneur D:

-en quatrième qui est beaucoup plus du chipotage mais qui devrait t'intéresser : tu peux mettre plusieurs class sur une balise. Par exemple au lieu de :
Code:

.desc1 { position:relative; padding:12px; margin-top : -240px; margin-bottom:40px; color: #330000; font-size: 11px; overflow: auto; width:240px; height: 170px; margin-left:255px; text-align:left; font-family:Comic Sans MS; font-size:13px; }

 .desc2 { position:relative; padding:12px; margin-top : -240px; margin-bottom:40px; color: #330000; font-size: 11px; overflow: auto; width:240px; height: 170px; margin-left:110px; text-align:left; font-family:Comic Sans MS; font-size:13px; }

tu peux faire :

Code:

.desc1 { position:relative; padding:12px; margin-top : -240px; margin-bottom:40px; color: #330000; font-size: 11px; overflow: auto; width:240px; height: 170px; margin-left:255px; text-align:left; font-family:Comic Sans MS; font-size:13px; }

 .desc2{ margin-left:110px;}

et dans ta balise tu aurais style= »desc1 desc2 » , tu aurais le même rendu mais en plus court o/

Comme tu peux voir Mandra tes erreurs de codages sont toutes petites mais tu perds néanmoins des points coté graphisme :

-les feuilles en fond de texte pour les descriptions c'était une bonne idée mais il aurait fallut que le texte ne sorte pas de la feuille car on le remarque indéniablement en lisant D:

-au niveau du titre il est un peu « à part » dans le sens où il est de son coté, où c'est le seul élément non lié à des feuilles qui est omniprésent dans ta fiche et aussi dans le sens ou l'utilisation du text shadow rend plus année dans le style des années 2000:/  feuilles à part entière (genre pas des lettres hein vraiment des feuilles)

Etant donné ton utilisation du margin top négatif, je t'orienterais plus vers l'utilisation d'un tableau (pour le coté simplicité d'utilisation) ou le coté float (pour le coté clarté de code et agencement)

Wala ça sera tout, si vous avez des questions/besoin de précisions n'hésitez pas o/

Voici donc ce que Mr Donut a envoyé après avoir étudié le code de nos participantes \o/ Félicitation à Mandra donc, en espérant que les conseils d'Aoi vous soient utiles à l'avenir o/ Comme il n'y a eu que deux participations, j'ai décidé d'ajouter un bonus de 50 jewels aux prix.

Re: Concours de codage dans vos gueules !

Messages : 287

Jewels : 814

Date d'inscription : 20/12/2015

Age : 20

Localisation : Ici et là, partout et nulle part


Feuille de personnage
Barre d'xp:
180/200  (180/200)
Orientation: Hétérosexuelle
Magie: Wiccachamanisme, Tsitsi matsenga, Sporis magicae

Mermaid B
Merci beaucoup pour tes conseils Aoi, effectivement je n’avais pas pensé à utiliser des noms de class plus perso, on est passé bien près de la cata si le fo avait les mêmes déterminants, et je n’y aurais rien compris !
Et l’astuce de lier desc1 et desc 2, ouais super génial, je saurai à l’avenir, ça permet d’alléger encore plus le codage.

Le texte qui dépasse des feuilles, ça a été un long combat mais je l’ai perdu, je n’ai pas su comment donner la forme de la feuille au cadre de texte, je ne sais même pas si c’est faisable mais l’idée de départ était celle-là, que le texte soit découpé en feuille.
Le titre, pas trop compris, des feuilles à la place des lettres ? Nan mais là tu m’en demande trop, je ne suis pas Aoi moi, faut pas pousser :D.
Et faut que je me penche plus sérieusement sur le float que je ne maîtrise absoloment pas mais, je suis d’accord avec toi, bien plus pratique que la mise en tableau.

Merci encore pour tous ces précieux conseils, expérimente et tu sauras !

Re: Concours de codage dans vos gueules !

Messages : 10

Jewels : 383

Date d'inscription : 14/10/2016

Age : 22


Feuille de personnage
Barre d'xp:
0/0  (0/0)
Orientation: Hétérosexuelle
Magie: Rééquipement & Ice-make

Lamia Scale C
Hello ~

Merci pour les conseils Aoi, j'avoue avoir oublié
Code:
</div>
dans la dernière partie que tu as montré. C'était une erreur de ma part, mais tout le monde en fait de toute manière o/. Pour le
Code:
<center>
c'est une mauvaise habitude que j'ai pris alors, que je suis déjà au courant pour ça xD.

Voilà, je n'ai rien d'autre à dire pour ma part.


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum