AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-40%
Le deal à ne pas rater :
Tefal Ingenio Emotion – Batterie de cuisine 10 pièces (induction, ...
59.99 € 99.99 €
Voir le deal

    [PA] Demande code page d'accueil

    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Lun 21 Sep 2015 - 21:33

    Bonjour à tous, je me permet de venir aujourd'hui faire une demande de codage pour ma prochaine page d'accueil.



    L'idée serait de proposer à deux membres de voir leurs vidéos à l'honneur chaque semaine en tête de forum en gros sur mon index et en dessous une barre de progression cliquable avec les autres vidéos des membres.

    - Le premier code serait un menu Progress bar

    - Le second code serait une barre défilante de vidéos à la flèche

    Encore d'avance pour l'aide ce serait vraiment super j'ai testé pas mal de chose mais sans résultat je commence à désespérer ^^



    Schémas : Voici un modèle:

    https://nsa38.casimages.com/img/2015/09/21/150921023327482864.jpg

    https://nsa38.casimages.com/img/2015/09/21/150921023327244718.jpg

    https://nsa37.casimages.com/img/2015/09/21/1509210233232942.jpg

    Tailles des éléments : Les deux bloc du dessus c'est du 550px par 350px chaque vidéo et en dessous c'est plus petit 320px par 250 chaque vidéo.
    Effets voulus : rien de spécial
    Version de votre forum : PHPBB3


    Point: https://nsa37.casimages.com/img/2015/09/21/150921023657740729.png

    Point gris foncé (quand on clique dessus) https://nsa38.casimages.com/img/2015/09/21/150921023657255860.png

    Fleche droite : https://nsa38.casimages.com/img/2015/09/21/150921023829827991.png

    Fleche gauche : https://nsa38.casimages.com/img/2015/09/21/150921023830175200.png



    Cellule vidéo du haut (index/honneur) : https://nsa38.casimages.com/img/2015/09/21/150921023829469401.png

    Cellule vidéo du bas : https://nsa37.casimages.com/img/2015/09/21/150921023829303721.png





    En guise de remerciement je suis tout prêt à mettre un lien sur mon index du membre et/ou du site never-utopia sur ma page d'accueil ou sur ce même code afin de vous remercier et vous faire de la pub ce que je trouve bien normal Wink

    Bonne journée à tous,

    Merci d'avance.




    Dernière édition par Solid6Snake le Dim 27 Sep 2015 - 20:03, édité 6 fois
    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Jeu 24 Sep 2015 - 7:44

    Up!
    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Dim 27 Sep 2015 - 8:42

    Up personne pour me donner un peu d'aide?

    :kdo:
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Dim 27 Sep 2015 - 11:05

    Coucou ^^

    Pour savoir puisque ce n'est pas précisé :

    ¤ Les vidéos doivent défiler automatiquement en haut/en bas ?
    ¤¤ Si oui, elles doivent s'arrêter de défiler quand on clique sur un bouton ?
    ¤¤¤ Si oui, elles doivent reprendre le défilement après un certains temps sans clique sur un bouton ou sur une vidéo ?
    ¤¤¤¤ Si oui à au moins une réponse, une idée des durées ?

    ¤ Il ne faut pas respecter les proportions du schéma je suppose, vu que tu donnes des dimensions différentes ?

    ¤ Est-ce que si on clique sur une des vidéos en dessous, elle s'affiche en plus grand histoire d'être vu comme il faut (genre dans le cadre des vidéos au dessus le temps de la regarder) ou est-ce que ça emmène vers le lien de la vidéo simplement ?

    Je vois pas d'autres questions à te poser, par contre si jamais tu veux essayer de réaliser ça toi-même, essaye de voir du côté des Slideshow ou Caroussel en JS, ou même en CSS c'est jouable tout autant ^^ On a un tuto pour ça fais par NyoTheNeko sur le forum si je ne m'abuse :)



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Dim 27 Sep 2015 - 12:17

    Alzufen a écrit:Coucou ^^

    Pour savoir puisque ce n'est pas précisé :

    ¤ Les vidéos doivent défiler automatiquement en haut/en bas ?
    ¤¤ Si oui, elles doivent s'arrêter de défiler quand on clique sur un bouton ?
    ¤¤¤ Si oui, elles doivent reprendre le défilement après un certains temps sans clique sur un bouton ou sur une vidéo ?
    ¤¤¤¤ Si oui à au moins une réponse, une idée des durées ?

    ¤ Il ne faut pas respecter les proportions du schéma je suppose, vu que tu donnes des dimensions différentes ?

    ¤ Est-ce que si on clique sur une des vidéos en dessous, elle s'affiche en plus grand histoire d'être vu comme il faut (genre dans le cadre des vidéos au dessus le temps de la regarder) ou est-ce que ça emmène vers le lien de la vidéo simplement ?

    Je vois pas d'autres questions à te poser, par contre si jamais tu veux essayer de réaliser ça toi-même, essaye de voir du côté des Slideshow ou Caroussel en JS, ou même en CSS c'est jouable tout autant ^^ On a un tuto pour ça fais par NyoTheNeko sur le forum si je ne m'abuse :)


    Merci d'avoir pris le temps de lire mon message de de répondre  cheers

    - En haut ça doit défiler automatiquement (5 secondes environ) mais aussi cliquable avec les deux boutons si possible en dessous.

    - En bas uniquement coulissant avec le flèches gauche droite.

    - Non il ne faut pas exactement respecter mes dimensions ce sera sur mon accueil alors ça devra être au format de ma page d'accueil de toute façon.

    - Pour les vidéos du dessous ce sera un affichage ifame youtube donc la vidéo se lancera au clic sans grossir non et de toute façon avec le logo youtube en bas à droite de toute façon ça emmène directement sur la vidéo du membre donc ça doit rester en petit.

    En faite j'ai déjà un menu accordéon en place sur mon index ce sera le même système en faite sauf qu'en menu accordéon c'est dommage il n'y à pas de flèches et je trouve ça bien plus intuitif et dynamique pour les membres curieux.

    http://www.entraide-youtubers.com/

    - Si vous avez un lien de tuto fait par NyoTheNeko je veux bien aller lire oui.
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Dim 27 Sep 2015 - 12:49

    Il n'est pas automatique par contre, mais il est fait qu'en CSS3 ça évite d'utiliser le JS (bien que je trouve ça moins optimal pour une PA Razz), faut l'adapter un peu pour mettre des vidéos et tout mais si ça peut t'aider sans attendre la fin de ta demande ^^ :

    https://www.never-utopia.com/t50204-slideshow-full-css3-sans-target

    Sinon tu as celles-là aussi :

    https://www.never-utopia.com/t49360-pa-bleue-avec-un-slideshow
    https://www.never-utopia.com/t53036-pa-sombre-onglets-staff-bulles-slideshow-auto
    https://www.never-utopia.com/t54414-pa-couleurs-automnes-avec-slideshow-automatique

    Tu peux prendre le code et les adapter pour avoir ce que tu veux en bidouillant un chouille ^^ Après ça se trouve aussi très facilement sur internet les slideshow/caroussel Razz

    Si jamais tu préfères qu'on te le fasse dans ce cas-là je prendrais en charge ta demande :)



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Dim 27 Sep 2015 - 13:19

    Même sans être automatique c'est pas un drame non plus de toute façon et je sais que c'est moins optimal que JS mais n'étant pas le seul à modifier ce genre de vidéos je préfère un code simple pour les admins du forum qui eux n'y connaissent pas grand chose en codage ^^

    Encore merci pour les liens c'est vraiment sympa je vais lire tout tranquillement ce soir et effectuer des tests avant toute chose et je reviens ici au besoin pour demander de l'aide si besoin.

    Bonne journée Wink
    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Dim 27 Sep 2015 - 18:29

    Premier test effectué j'ai placé le code HTML et CSS j'ai bien modifié les images pour mon iframe vidéo c'est visible et ça coulisse bien avec la flèche de droite:

    Test: http://testentraideyoutube.forumactif.org/forum

    Il sera possible de mettre tout ça dans mon tableau actuel mais en faite ce n'est pas tout à fait le rendu que je souhaite, je sais le code est fonctionnel et tout mais mon schéma de présentation n'est pas tout à fait pareil.

    Je tiens vraiment à avoir la même chose ou presque que mon schéma en faite mais je suis incapable de faire ce genre de chose le css c'est bien trop compliqué à coder pour moi..


    Alzufen tu serais capable de réaliser ce genre de chose ou pas?
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Lun 28 Sep 2015 - 21:22

    Salut ^^

    En réalité j'essaye depuis hier soir de réaliser ce que tu souhaites, malgré tout j'ai encore quelques trucs à peaufiner. J'ai bien vu le lien que tu as donné hier et ce que tu souhaiterais, j'essaye de réaliser la même chose du mieux que je peux de manière à que ça te convienne. Malgré tout les dimensions seront à revoir, car avec tes dimensions actuel, je peux mettre que 2 vidéos en bas côtes à côtes. Nous verrons ça après ^^

    Du coup, je reviens vers toi quand j'aurais terminer au moins te montrer ce que j'ai fait pour voir si l'effet te conviens et ensuite discuter des dimensions ^^


    Edit : Est-ce que cela t'irais ?

    http://jsfiddle.net/Alzufen/c460senw/1/show/

    Le jaune symbolise la première vidéo que tu auras, les autres, donc les rouges, bah c'est les autres. On voit bien qu'avec les flèches, si on arrive à la fin, la flèche de droite va ramener au début mais vers la droite, et celle de gauche va amener à la fin mais vers la gauche. J'ai tenté de reproduire au mieux ce que faisait le lien que tu avais fournis mais sans plugin déjà fais ^^

    Par contre, la vitesse est peut-être trop longue ou trop rapide pour toi, ça, ça peut se régler ^^ Il y a aussi le soucis des largeurs/hauteur, en bas, j'ai pu mettre que 2 vidéos si je voulais que ça fasse la même largeur que celle du haut. Du coup, va peut-être falloir revoir les dimensions, ou alors c'est moi qui à mal compris Razz

    Dans tous les cas, j'espère que le principe est là ^^



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Lun 28 Sep 2015 - 23:04

    C'est exactement ce que je recherche mais exactement ça c'est dingue O_o

    Concernant les dimensions en effet ce sera a ajuster oui, en faite je suis parti du principe que la page d'accueil est assez large donc il y a la possibilité de mettre le bloc vidéo du haut bien plus long.  

    Parce que deux vidéos en dessous c'est légé au premier abord, quatre en dessous ce serait parfait (j'ai honte de demander ça) ^^

    En gros comme mon premier schéma vu que la vidéo du dessous sera plus longue que large je me disais qu'en dessous il y aurait forcément de la place pour en mettre au moins quatre voir cinq directement mais si c'est plus long en bas c'est vraiment pas grave non.

    La vitesse c'est bien comme ça oui Wink
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Lun 28 Sep 2015 - 23:53

    Même si je mets la vidéo du haut en 1169px de largeur (comme tu l'indiques dans ton premier schéma), je peux mettre environs 3 vidéos en bas, mais pas plus...

    Sachant qu'en plus, si la vidéo du haut fais 1169px, ça veut dire que ta PA fera au moins 1169px et théoriquement le tronc de ton forum... Ca fais quand même assez énorme, encore ça va, tant que ça reste en dessous de 1200px mais si des gens ont un écran plus petit (ce qui est rare maintenant certes) ils ne verront pas la PA entièrement ni le forum et donc auront une scrollbar en bas ce qui fait pas très beau ^^

    A la limite avec des dimensions plutôt comme ça :

    http://puu.sh/krGNN/1a29cfc05f.png

    Ce serait peut-être mieux.

    Le bloc d'en haut fait 786px de largeur mais c'est à cause des bordures de ceux d'en bas, ça donne 750px sans bordure, donc un peu plus petit, et 350px de hauteur, mais tu peux mettre plus ça, ce n'est pas un soucis. En bas, chaque bloc fait 150px de largeur pour 75 de hauteur, mais on peut monter la hauteur à 100 pour garder une forme assez rectangulaire.

    Après, si tu trouves trop petit, tu aussi jouer avec d'autres valeurs en essayant de pas dépasser les 1000px de largeurs total, selon moi, un tronc de forum devrait faire 900-1000px de largeur maximum pour être "bien" ^^

    Exemple :

    - 875 px de largeur pour le bloc d'en haut, peu importe la hauteur, je dirais entre 350 et 450px
    - 175px de largeur x5 en bas, la hauteur peut être monté jusqu'à 125px maximum.

    http://puu.sh/krGPc/dca1b98d50.png

    Si tu passes à 4 vidéos en bas tu peux même monter à 200/225 px de largeur en bas, voire 250px pour une largeur totale de 1000.

    Mais du coup, avec tes dimensions actuels, c'est impossible de faire 4 ou 5 vidéos en bas, je peux en mettre que 3, les cadres sur ton schéma ne doivent pas être aux bonnes dimensions ^^



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Mar 29 Sep 2015 - 0:24

    J'ai certainement fais une bêtise sur les dimensions.. Rrrrrrr

    Pour les deux vidéos actuellement en haut c'est width: 550px; height: 350px et il y en à deux.

    En dessous sur le menu accordéon c'est width: 320px; height: 200px


    C'est vrai que c'est gros quand même à choisir il faudrait mieux mettre ce style avec les vidéos du dessous juste un peu plus haute du coup.

    http://puu.sh/krGNN/1a29cfc05f.png


    Il faut trouver le bon compromis entre petit et grand écran oui c'est vrai mais 4 vidéos en dessous franchement ce serait très bien sachant que le slide fera le reste de toute façon Wink
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Mar 29 Sep 2015 - 10:07

    D'accord ^^

    Toute façon en haut j'ai mis 3 blocs mais c'était uniquement pour tester le code et pour faire le futur LS ^^ Tu pourras retirer un des contenu sans soucis le code JS s'adaptera, changer la couleur de fond et mettre des vidéos à la place des "divs" ou dedans, ça suffira ^^

    Du coup je vais essayer de voir ça cet aprem, si vraiment les blocs font trop petit (parce que sur mon premier screen ils étaient bien rectangulaire mais ils faisant trop petit, alors que le deuxième ils faisaient pas assez rectangulaire) j'essayerais de les adapter un peu plus voire d'en mettre 4 ^^

    Je reviens vers toi quand j'aurais fais ça mais je peux pas avant "je ne sais pas" quand dans l'aprem, je suis pas chez moi avant ^^



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Mar 29 Sep 2015 - 12:46

    OK, après trois blocs au dessus c'est bon aussi je pourrais mettre une autre vidéo à l'honneur comme ça il y aura la chaîne à l'honneur, la vidéo à l'index et le meilleur montage c'est limite mieux !

    Pour le reste pour moi c'est bon et prend ton temps surtout ça fait un mois que je fais des tests sans y arriver je ne suis plus un un jour prêt ^^

    C'est déjà super sympa d'avoir pris le temps de regarder.
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Mar 29 Sep 2015 - 14:47

    Ca te conviens comme ça ? http://jsfiddle.net/Alzufen/c460senw/2/show

    J'ai respecté les dimensions que j'avais donné pour le screen que tu as redonné, juste j'ai agrandi les blocs d'en-bas de 100px de hauteur, ça reste rectangulaire mais ça me parait un peu plus grand, c'est pas l'idéal pour voir une vidéo mais pour ça reste mieux que 75px de haut, et au pire ils cliqueront juste sur le bouton "Youtube" qui les redirigeront automatiquement. On peut même faire en sorte que clique sur une vidéo d'en bas ouvre un nouvel onglet sur leur navigateur avec la vidéo, comme ça impossible de lire la vidéo en petite et pas besoin de cliquer sur le logo "Youtube" ^^

    Pour le nombre de vidéo que ce soit en bas ou en haut, tu pourras modifier par toi-même, le code JS s'adaptera automatiquement, il faut juste respecter de mettre 5 vidéos en bas à chaque fois. Si tu n'en mets pas 5, tu auras un vide à droite des dernières vidéos, parce que les vidéos en bas partent forcément 5 par 5.

    En gros, si tu as 5 vidéos, ça switch les 5 pour en afficher 5 autres. Par contre, si au lieu d'en avoir 5 après, tu en as que 3, ça va en afficher 3, et à droite de ses trois là tu auras un blanc (la place où devraient être les 2 autres vidéos manquante) et une fois que tu cliques de nouveau sur la flèche ça reviens au début. Si vraiment tu peux, je peux modifier le code pour que si genre en bas tu mets que 17 vidéos, les 3 dernières seront les 3 premières de manière à avoir une vraie boucle infinie même si tu n'as pas un multiple de cinq en nombre de vidéo en bas ^^

    Je sais pas si je suis très clair XD



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Mar 29 Sep 2015 - 18:57

    Franchement c'est juste parfait !!!

    J'ai bien compris pour l'ajout de vidéo c'est très clair Wink

    En dessous oui il devront cliquer sur le logo YouTube pour être rediriger vers la chaîne oui ça me va très bien.

    Pour le réglage des couleurs je ferais des tests par rapport à mon menu accordéon actuel ça devrait aller à régler ça sur le CSS sinon je viendrais demander ^^

    OK pour moi c'est bon comment ça se passe à partir de maintenant ?

    Sachant que c'est ma première demande je ne voudrais pas abuser ou passer pour un vulgaire profiteur Wink
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Mar 29 Sep 2015 - 19:02

    Vu que depuis un bon bout de temps maintenant les "commandes" en codage sont devenu des "demandes" (de LS), je dois poster le code en Libre Service avant que tu puisses le prendre ^^

    Du coup bah maintenant tu as pu qu'à attendre, je vais faire deux trois petits réglages dans le code (Notamment tout optimiser au maximum le JS, de manière à que tu es juste à mettre les vidéos que tu veux dans le HTML et changer ce que tu veux en CSS, le code s'adaptera de lui même en ajoutant le nombre de point etc. ^^) et après je fais ça ^^

    Dans tous les cas, je repasserais dans ce topic te signaler une fois le LS posté, ou alors je te donnerais, à toi, le code carrément ici, ça reviens au même au final Razz



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Mar 29 Sep 2015 - 19:07

    OK ok
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Mar 6 Oct 2015 - 15:17

    Bonjour,

    Désolé de pas encore avoir posté le LS et de ne pas te tenir au courant... J'ai terminé ce qu'il restait à faire pour que ce soit compatible avec FA, j'essayais de faire en sorte que si tu ne mets pas un multiple de 5 en nombre de vidéos en bas, ça ajoute les premières à la fin des dernières, histoire qu'on est l'impression que ça reviens jamais au début à proprement parlé (je dois pas m'expliquer bien) mais j'y arrive pas vraiment.

    Du coup, bah ça restera comme c'est actuellement, pour l'instant en tout cas (à voir pour peut-être une MAJ du LS si j'arrive à modifier, si un jour tu repasses dessus), bref. Je m'excuse du coup du retard, pas mal de "soucis" IRL, enfin surtout de choses à régler et tout, du coup j'avais pas trop la tête à ça et pas trop le temps, je t'oublie pas et je poste ça sous peu avant la fin de la semaine promis Wink

    Voilà voilà, encore désolé ^^



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Mer 7 Oct 2015 - 8:00

    Il n'y à pas de problème ce n'est pas urgent de toute façon je passe de temps en temps voir l'actu Wink

    Bonne journée !
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Sam 10 Oct 2015 - 12:16

    Salut,

    Désolé, j'ai vraiment pas trop le temps en ce moment, pleins de changement dans ma vie et de démarche en plus de ce que je parlais déjà dans mon précédent message, donc je passe pas trop sur le PC ><'

    Je vais essayer de poster le LS ce week, donc ce soir ou demain histoire de pas trop te faire attendre, surtout que c'est pas cool, c'est fini et tout. Il y a juste un truc que j'ai remarqué... J'ai pas mis le défilement automatique, donc je me demandais si tu le voulais quand même ou pas ^^

    Si oui, je peux le faire c'est pas dérangeant, ça prendra pas trop longtemps je pense, et je posterais le LS dans la foulée histoire de pas te faire attendre plus. (Au fond, heureusement que j'ai pas eu le temps de le poster avant, j'aurais pas remarqué ce détail sinon XD)

    Voilà voilà, encore désolé ^^'



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Sam 10 Oct 2015 - 20:35

    Salut, alors oui je préfère avec le défilement automatique s'il te plaît même si ça prend plus de temps ce n'est pas grave je suis très patient Wink

    Dans un mois ou six mois ce n'est pas grave ça fait deux ans que j'ai cette page d'accueil je peux attendre encore un peu ^^
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mar 20 Oct 2015 - 10:04

    Hello! ^^
    Est-ce que c'est toujours d'actualité?  N'oublie pas de upper! ^^



    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Mar 20 Oct 2015 - 21:22

    OUi oui je passe pour voir s'il y à du nouveau mais rien pour l'instant donc j'attend Wink
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mar 20 Oct 2015 - 21:49

    Il ne faut tout de même pas oublier de upper au moins une fois par semaine ^^



    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Avr 2024 - 17:47