[HTML/CSS/Java] - Page d'accueil pour un forum

Coucou tout le monde~ ^^
Donc voilà, j'aimerai passer commande pour le forum RPG http://the-other-world-rpg.forumactif.org/. Comme vous pouvez le constater, nous avons une PA, mais elle est un peu rudimentaire...Une nouvelle un peu plus complète serait sympa ♪ N'hésitez pas à poser des questions, j'ai peut être oublié quelques trucs ^^" Tout mes remerciements au codeur qui accepterait de s'en charger ♥

Pour aller plus vite, j'ai fait un petit schéma :

En résumé, ce qu'il y a a faire sur cette page :
- Une liste de liens défilantes
- Des images avec lien intégré
- Un slideshow (le plus compliqué, je pense? Je crois que c'est du Java aussi...)
- Des images qui au passage de la souris dévoile une infobulle avec une autre image
- Du texte simple
...Et je crois que c'est tout. Ah et bien sûr, faire en sorte que tout celà tienne à peu près dans la surface prévue...^^"

Pour éviter au codeur potentiel qui accepterait de s'y coller de trop s'arracher les cheveux, j'ai déjà calculé les dimensions des différents éléments de cette PA. Ce serait quelque chose comme:
- Cadre général de la PA : 980 x 570 (et non pas 980 x 560 comme affiché sur l'image)
- Cadre de navigation : 180 x 280
- Cadres n°1 & 2 pour les boutons partenaires : 89 x 240
- Cadre des caractéristiques du forum : 400 x 540 (si c'est difficile de tout faire rentrer, c'est celui là qu'il faut réduire en largeur)
- Cadre du staff : 180 x 90
- Cadre des crédits : 180 x 120
- Cadre des prédéfinis : 150 x 250

En image:

Pour ce qui est du visuel, j'aimerai des cadres noir transparent à 70% (donc opaque à 30% u.u) sans bordure =) Pour la police, le staff a suggéré du Amaranth ( celle ci -> http://fr.fonts2u.com/amaranth.police ), mais je ne sais pas trop si c'est utilisable en HTML...Sinon une classique ira bien ^^ Pour la taille, normalement du 12, en espérant que ça rentre >.> Un effet de "diffusion" léger serait sympa ♥ Pour la couleur, j'ai fait quelques tests et à priori, c'est le blanc qui rend le mieux sur l'ensemble de l'image =)

Pour ce qui est de la taille des images, voici des échantillons :

Image de fond:

Bouton Top-sites:

Bouton Partenaire:

Images du slideshow:

Prédéfini petites images:

Prédéfini grandes images:

Image de bienvenue (temporaire):

Pour ce qui est des liens, voici la (longue) liste des liens à intégrer dans cette PA :

Cadre de navigation	Règlement : http://the-other-world-rpg.forumactif.org/t4-reglement-du-forum Guide du nouveau voyageur : http://the-other-world-rpg.forumactif.org/t10-guide-du-nouveau Contexte général : http://the-other-world-rpg.forumactif.org/t2-contexte-general-du-forum Les différents mondes : http://the-other-world-rpg.forumactif.org/t3-fonctionnement-et-vie-des-differents-mondes Aide au RP : http://the-other-world-rpg.forumactif.org/t23-aide-rediger-un-message-de-rp
Partenaires	En cliquant sur le bouton partenaire, redirection vers leur site (ici : http://novamvitam.forumactif.fr/) dans un nouvel onglet
Top-sites	En cliquant sur le bouton Top-sites, redirection vers ledit topsite dans un nouvel onglet (tester avec : http://www.tourdejeu.net/index.php )
Staff	La case staff se présente comme une suite de liens. Pour faire le test-> Fiche : http://the-other-world-rpg.forumactif.org/u1 Contact : http://the-other-world-rpg.forumactif.org/privmsg?mode=post&u=12 -> au final, on aura donc quelque chose comme "Lyesam, Admin : Voir sa fiche - Contacter"
Crédits	Ce sera des boutons, comme les partenaires. N'hésitez pas à ajouter celui d'ATDC! ^^ Peut-être avec une petite infobulle annonçant ce qui a été fait? (en l’occurrence la Page d'accueil)
Prédéfinis	Les petites images des prédéfinis doivent être cliquables, pour mener à la fiche des personnages. Ici ce sera , pour Aldéric : http://the-other-world-rpg.forumactif.org/t145-l-ex-chef-de-l-ur-alderic-d-arimbert  et pour Phoelia : http://the-other-world-rpg.forumactif.org/t81-phoelia-de-reony

Voilà, je crois que je n'ai rien oublié ^^ il manque le texte des Caractéristiques, mais je ne me rends pas encore bien compte de la place qu'il y aura, donc pour l'instant du Lorem Ipsum suffira. Encore merci à celui qui voudrait bien s'occuper de tout ça!

Hey

Vu que je suis de retour, je peux m'en charger !
Tout est en effet en ordre, merci pour ces précisions .
Je devrai commencer demain !

Bonne journée

Hey~ ^^
Merci beaucoup de t'en charger =)
C'est pas super urgent alors n'hésite pas à prendre ton temps ♥

Juste une petite question :
As-tu des restrictions au niveau de la manière d'afficher l'entête ? Je veux dire, est-ce que ça te dérange si c'est sur une page HTML du forum qu'on appelle indirectement, ou est-ce que tu veux que ce soit directement appelé ?
(en gros, c'est pour savoir comment j'organise mon css et mes balises )

Euuuh...je suis pas sûre de comprendre la question...xD ça change un truc à l'affichage que ce soit appelé directement ou non? =O Honnêtement, fais ce qui t'arranges le plus ^^"

Ca ne change rien .
Le temps de chargement est par contre un peu plus long avec une entête appelée d'une autre page. (0.5secondes, environ).

Ce qui m'arrange le plus c'est de l'appeler indirectement, donc la méthode qui est un peu plus longue au chargement :$.

Je vais pas chipoter pour 0,5 secondes xD T'embêtes pas, fais l'appel indirect ^^

Je sais pas, je verrai si mon côté masochiste ressort demain quand je me plongerai dedans

Dac xD
( Je me suis rendu compte que j'avais oublié les précisions sur la police, j'ai rajouté ça en violet ^^ )

Un effet de diffusion ? Que veux-tu dire par là :$ ?

Oups pardon, c'était pas très clair >< Sur cette page -> https://msdn.microsoft.com/fr-fr/library/jj680149%28v=vs.85%29.aspx , ce serait l'exemple "with spread support"...C'est avec "text-shadow" ^^ Je ne sais pas trop quelle couleur de diffusion par contre, peut-être un violet sombre type #3F0432? (d'ailleurs si tu as un avis de nature esthétique sur la PA, n'hésite pas à m'en faire part, la visualisation mentale a ses limites ^^")

Okay ! Je vois ce que tu vux !

Bon et bien, je commence demain

Coucou

Il ne me reste plus que le slider à faire . j'ai du jouer avec les couleurs car le blanc ne se voit pas partout. je te montre ça ce soir .

Bonne journée !

Hey~ ^^

J'ai hâte de voir ça *_*
Bon courage avec le slider, j'ai conscience que ça doit être la partie la plus galère ^^"

À ce soir =)

Coucou Ariane !

Voilà, ta commande est terminée !
Alors, avec tout ce que tu m'as dit, tu peux voir le résultat ici (et donc tester en direct) :
https://a-toi-de-coder.forumactif.org/h5-commande-ariane

J'ai laissé les bordures grises juste pour que tu voies comment sont positionnés les éléments, je les enlèverai après .

A toi de me dire comment tu trouves tout ça

PS : La police utilisée est Amaranth

Concernant la qualité du code, voici le code passé au vérificateur de normes W3C :
https://validator.w3.org/nu/?doc=http%3A%2F%2Fa-toi-de-coder.forumactif.org%2Fh5-commande-ariane

Hey~ ^^

*__* Même avec les images de démo, elle claque déjà pas mal...
La police rend super, et bon choix pour les changements de couleur ^^

Quelques petites modifications éventuelles :
- Si c'est possible, rendre les images (bienvenue, slideshow, etc) complétement opaques ;
- Pour le slideshow, faire en sorte qu'il "boucle", au lieu de revenir en arrière à la fin (je sais pas si je suis claire >.>") + le rendre un peu plus rapide (moins deux secondes par image, je dirais) ;
- Pour les partenariats, augmenter un peu la taille du cadre vers le haut pour rajouter du texte (un truc comme "Autres galaxies" ou "Mondes alliés")
- Pour les top-sites...je changerai l'image pour une différente et un peu plus petite, il y aurait moyen de rajouter un texte en dessous? (comme "Votez toutes les deux heures"...) [image en 30x30 pour le test : https://i.servimg.com/u/f21/19/29/50/06/portal11.png ]
- Pour les prédéfinis, centrer les images, voire les aligner à droite pour qu'elles soient moins collées aux crédits & co;
- Pour la partie gauche de la PA, j'ai du un peu me tromper au niveau des calculs, du coup la liste défilante est ridiculement espacée et les boutons de partenaires tout recroquevillés dans leur coin...^^" Est ce que ce serait possible d'avoir ce type d'alternative? ->

Schéma:

(Le schéma est un peu brouillon mais en gros, il faudrait que le cadre de bienvenue soit remonté afin que les partenaires soient disposés en L et qu'on puisse réduire un peu la taille du cadre de liens)

Et...je crois que c'est tout xD Ah non, j'avais une petite question, tu as bien rempli le fond des cadres de noir à 30%? (je n'arrive pas trop à me rendre compte) Sinon, je veux bien voir ce que ça donne ^^

En tout cas merci beaucoup pour cet excellent boulot, je n'y serai jamais arrivée toute seule! Les modifications que je te demande viennent en fait uniquement de trucs que je n'avais pas anticipé ou oublié de préciser...J'espère qu'elles ne poseront pas problème ><

Modifications apportées :
-Images opaques
-Fond noir opaque à 30%
-Slideshow plus rapide (2sec33 par frames)
-Centrage des partenaires
-Ajout du titre pour les partenaires
-Rajout de partenaires au centre
-Suppression de l'espace vide en haut
-Centrage prédéfinis + marge
-Rajout du lien topsite
-Modification image topsite

Modifications impossibles :
Slideshow qui boucle

A toi de me dire
https://a-toi-de-coder.forumactif.org/h5-commande-ariane

Hey~ ^^ Juste pour prévenir, je ne t'ai pas oublié, c'est juste que je demande leurs avis aux autres membres du staff et que ça prend un peu de temps...U.u" Merci beaucoup pour les modifications en tout cas <3 Ce n'est pas très grave pour le slideshow =)

Pas de soucis

En attendant leur réponse, n'hésite pas à participer aux jeux, aux discussions, à passer ton examen ou à t'inscrire à une formation

Hey~ Désolée pour le retard, j'ai eu une semaine bien chargée et j'étais absente ce Week end...Bref, me voilà enfin ^^"

Voici les quelques revendications que j'ai pu récolter:
- Un changement de l'image de fond pour celle-ci > https://i.servimg.com/u/f68/18/81/77/43/bgalt210.jpg qui rend le tout un peu plus lisible et est probablement plus dans le thème;
- Rendre le "Mondes alliés" un peu moins fluo ;
- Centrer le "Votez toutes les deux heures", le mettre au dessus des images de portails & désactiver le lien pour en faire un simple texte ;
- Augmenter un peu la taille du cadre de bienvenue pour que les boutons des partenaires aient plus d'espace entre elles mais soit plus proche des autres (idéalement, qu'il y ait la même distance entre la première de la ligne et les 4 autres),

Et je crois que c'est tout =) En tout cas tu as le remerciement de tout les membres du staff pour ton boulot, aucun de nous n'aurait su en faire autant <3

Coucou !
Okay je vais voir ce que je peux faire pour les logos . Pour tout le reste aucun problème .

Bonne soirée .
Ahah merci !

Et voilà : https://a-toi-de-coder.forumactif.org/h5-commande-ariane

je ne peux pas faire mieux pour les logos, sinon le code sera tout moche :'(

xD T'inquiètes, c'est super comme ça~ ^^ Maintenant il reste plus qu'à trouver un graphiste doué...>.>

On va essayer de l'installer et je te préviendrais si on rame, mais à priori ça devrait être bon. Encore une fois, merci beaucoup <3

Un graphiste ? Pour ?

Ahah, pour ça il vous faut le code .
Vous le voulez ? Avec les explications et tout ? Ou comme ça, brut ? .

Pour faire des images un peu plus classes xD Pour le bienvenue, le slideshow et les liens top-sites ^^ (et peut-être les images agrandies des prédéfs, mais c'est secondaire) On passera probablement une commande sur Royale-Pub, même si j'aurai préféré un plus petit forum pour un partenariat privilégié...Mais c'est dur d'en trouver qui ne soit pas overbooké! Bref, je dérive un peu là >.>"

Ah oui mince, c'est vrai que sur l'actuel il y a les lignes grises xD Euh, je veux bien quelques petites indications...^^" (je pensais qu'il suffisait de copier-coller mais c'est peut-être plus compliqué >.>")