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.

Le Deal du moment :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G ...
Voir le deal
599 €

    (Ylkhana) Fiche de lien, possibilité d'en faire une présentation

    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Mer 13 Avr 2016 - 20:53

    Ma demande



    Bonjour, je demande quelque chose de compliquer je crois... J'aimerais un codage en forme d'ordinateur interactif... Vous pourrez le voir dans les schémas, j'ai essayé de mettre les images en ordre. C'est un codage pour fiche de liens qui pourrait avec quelques retouches être une fiche de présentation. Je remercie le fou qui va se lancer dans ce codage...
    Alors pour les couleurs voici les signification comme ça vous pourrez mieux comprendre :
    Bleu foncé : description
    Vert : liens recherché
    Violet : avatar des personnages et leur fiche de lien
    Rouge : icônes pour les autres membres
    Bleu clair : Rp en cours, terminé et futur


    Schéma(s) et Eléments
    Schémas :  
    https://nsa37.casimages.com/img/2016/04/13/160413081320461563.png
    https://nsa38.casimages.com/img/2016/04/13/160413081321212461.png
    https://nsa38.casimages.com/img/2016/04/13/160413081324183682.png
    https://nsa38.casimages.com/img/2016/04/13/160413081324404810.png
    https://nsa38.casimages.com/img/2016/04/13/160413081324897721.png
    https://nsa38.casimages.com/img/2016/04/13/160413081323950573.png

    Tailles des éléments : (en pourcentage ou en pixels, ou bien simplement en proportions approximatives si vous ne savez pas comment les indiquer)
    Effets voulus : alors imaginez bien parce que mes schémas on pas du vous aider énormément... Donc
    - Première image : C'est lorsqu'on voit la fiche sans passer de curseur dessus, le windows orange étant pourquoi pas un fond d'écran windows ou un fond d'écran normal alors...
    - Deuxième image : J'aurai du faire une image de transition parce que celle-ci c'est quand on passe le curseur sur la zone bleu qui deviendrait un rond avec une image du style 100*100 ou 150*150 si c'est pas trop grand sinon on fait plus petit... Donc quand on passe sur l'avatar 1 (tache bleu) un cadre s'ouvre pour laisser un descriptif du personnage apparaitre...
    - Troisième image : Pareil que la deuxième image, on passe le curseur sur l'avatar 2 en rond (tache verte) et un cadre s'ouvre pour les liens recherchés.
    - Quatrième image : Alors sur le clavier, une touche aura la tête de l'avatar du lien 50*50 ou si ça fait moche, un carré avec un symbole du style : ❤ ♔ ♕ ☀ ☁ ❆ ☮ ♣ ♦ ♥ ♠ -> il en faudrait qu'on puisse en rajouter ou diminuer peut-être sans qu'il y est de répercussion...
    Quand on passe le curseur sur le symbole un cadre s'ouvre avec l'icone de l'avatar 100*100 ou 150*150 avec la description à coté.
    - Cinquième image : Quand on passe le curseur sur le clic gauche, on peut voir les icônes proposés par le membre pour les fiches de liens.
    - Sixième image : Quand on passe le curseur sur le clic gauche, on peut voir les rp en cour, fini et futur...


    Ressources
    Pour le fond d'écran : https://nsa37.casimages.com/img/2016/04/13/160413105833838697.jpg
    L'avatar pour le cercle bleu : https://nsa37.casimages.com/img/2016/04/13/160413110721897042.jpg
    L'avatar à la place du cercle vert : https://nsa38.casimages.com/img/2016/04/13/160413110720823370.jpg


    Autres précisions ?
    Je suis disponible en cas de besoin... Courage et merci encore...


    Dernière édition par Sydeale le Mar 14 Juin 2016 - 23:02, édité 1 fois
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Mer 20 Avr 2016 - 20:52

    Up !
    Dites moi si c'est possible ou pas :/
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Sam 7 Mai 2016 - 13:17

    Hey Sydeale,
    Toujours là ? (je laisse un codeur répondre sur la faisabilité, je sais pas du tout)



     
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Mar 17 Mai 2016 - 15:51

    Toujours là... (Désolée de la réponse un peu tard) J'attends toujours :3
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Ven 20 Mai 2016 - 9:36

    Up :)
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Dim 22 Mai 2016 - 10:40

    UP !
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Mer 25 Mai 2016 - 16:07

    up :3
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 25 Mai 2016 - 23:18

    Salut!

    Je viens juste confirmer que oui, cela se fait. Par contre, je crois qu'il manque des images. Ou peut-être qu'on peut se servir de ton schéma? Parce qu'on va avoir besoin d'une image (idéalement en format render) de l'ordi, du clavier et de la souris.



    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Dim 29 Mai 2016 - 21:33

    si je dois passer commande pour une image comme tel, je peux passer commande il y a pas de soucis faut juste demander ^^
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Dim 5 Juin 2016 - 14:47

    Up
    Ylkhana
    Ylkhana
    FémininAge : 31Messages : 328

    Mer 8 Juin 2016 - 11:47

    Coucou !

    Tout d'abord, je tiens à préciser que je viens te montrer une "démo" de ce que j'ai commencé à faire pour toi. Le code est en travaux et vu que je suis juste en train de me replonger dans cet art périlleux, je ne peux pas te promettre que, s'il te convient, je le finirai rapidement. Je m'en excuse par avance.

    Ensuite, voici un petit aperçu de ce que j'ai pour l'instant.
    (Ylkhana) Fiche de lien, possibilité d'en faire une présentation Demo10

    Pour ce qui est des "adaptations", il y a plusieurs points que je voudrais soulever :

    • Les avatars sont au format 100*80 pour plus de lisibilité mais je peux les réduire à 80*80 si tu veux qu'ils soient ronds.
    • Par défaut, j'ai laissé la page blanche activée car je pense qu'au lieu des images sur le clavier & des zones cliquables pour la souris, on pourrait utiliser les trois boutons en haut à gauche de la page. Ce sera peut-être une zone plus instinctive au survol & plus ergonomique que les boutons de la souris. Pour le clavier, j'ai peur de ne pas réussir à y intégrer une image de façon esthétique. & puis je risque de galérer à faire la souris :x
    • J'ai mis un fond gris clair par défaut, je trouvais qu'en blanc le PC ne se voyait pas suffisamment. Je peux adapter la couleur à celle de ton forum par contre :)


    C'est tout ce qui me vient dans les "changements". J'essaierai d'ajouter des effets un peu cools par la suite mais j'aimerais d'abord être sûre que ce que je propose te convient, notamment pour le changement d'emplacement des boutons.
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Mer 8 Juin 2016 - 12:03

    C'est vrai que j'ai demandé une commande un peu tordu... donc ce n'est pas grave si les points ne sont pas forcément abordé parue que c'est vrai que tout ne peut pas être réalisable,  j'aime bien les changements que tu as trouvé pour que ce soit plus utile (très joli ordinateur avec la petite caméra ). Les avatars sont pas choquant comme ça.
    Je voulais savoir si on pouvait ajouter des boutons ( comme le rouge, orange, vert) si on veut mettre plusieurs catégories et si on pouvait aussi modifier la couleur des boutons (quand on en ajouté d'autres)
    Jaime vraiment bien comme ça, cet une jolie alternative à ce que je voulais, je savais bien que pour les boutons c'était  pas vraiment possible donc j'adore ton alternative comme si c'était des bouton fermer, réduire à la Apple.

    Franchement c'est une tuerie !
    Ylkhana
    Ylkhana
    FémininAge : 31Messages : 328

    Jeu 9 Juin 2016 - 0:41

    Me revoilà !

    Finalement c'est allé assez vite puisque j'ai pu solliciter un autre designer/codeur (Leograph, que je ne remercierai jamais assez même si je sais qu'il ne lira pas ce message) pour m'aider, et ton code est tout beau tout propre : le voici !

    J'espère que ça te convient. Comme tu le vois, pas mal de remaniements, autant ergonomiques qu'esthétiques. On a volontairement mis plein d'emplacements de liens en bas, et tu verras ça s'ajuste très bien tout seul (même si je ne te recommande pas d'en mettre plus que 8 ^^).

    D'ailleurs fais pas attention aux Lorem Ipsum, ils sont blindés de private jokes Very Happy

    J'espère que ça te convient, si oui, voici le code HTML :


    Et le CSS (il est linké par la première balise HTML mais je te conseille de le garder sous la patte au cas où :) ) :


    J'espère que cela répond à ta demande ! Dans le cas contraire n'hésite pas à me faire signe :) et bien sûr les icônes, j'ai mis du 50*50 par défaut mais tu peux mettre plus grand.

    Bonne nuit !


    Dernière édition par Ylkhana le Jeu 9 Juin 2016 - 8:21, édité 1 fois
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Jeu 9 Juin 2016 - 5:23

    Merci, c'est très très trop trop joli, j'aurai jamais imaginer un écran comme ça...
    J'avais une question, est ce qu'on peut remplacer le texte des boutons pour mettre une petite image du style 20*20 ou 10*10. Ou peut-être deux, est il possible de mettre une image de fond et en passant dessus on a un accès visuel des deux avatars et des description ? Ou c'est pas ergonome et c'est pas possible ?
    Et un e troisième question, quand j'ouvre un onglet bouton... ça m'ouvre une page avec le lien du topic ? Ou c'est parce que je suis sur tablette...
    Le clavier ne devait pas faire joli donc tant pis, grâce à toi beaucoup de forum basé sur les jeux à la SOA vont s'arracher ton codage ! J'adore vraiment ton codage !!!
    Ylkhana
    Ylkhana
    FémininAge : 31Messages : 328

    Jeu 9 Juin 2016 - 6:48

    Je vais voir pour les images :) mais je trouvais un texte plus joli ^^ maintenant je peux toujours faire des tests ! Qu'est-ce que tu voudrais mettre comme image ? Les caractères spéciaux indiqués dans la demande par exemple ?

    Les liens c'est normal: si tu veux faire des liens vers les personnages avec qui tu as un lien, ou vers ton journal, ou vers une galerie pour les icônes, il suffira de remplacer le # dans la balise "a href" correspondante Wink
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Jeu 9 Juin 2016 - 15:14

    Comme style d'image, j'ai pas encore trouvé l'image que j'aimerai, mais en 10*10 ou 20*20 http://www.icone-gif.com/icone/dossiers/nice/Trash_Empty.png ou les caractères spéciaux aussi, mais à ce moment là je peux juste le mettre comme un texte.

    Édit : même si là où s'est mit il faudrait des boutons qui fasse réel plutôt qu'un dossier de ce style peut être... http://www.icone-gif.com/icone/vista/vista-glass/Wmp11.png
    Ylkhana
    Ylkhana
    FémininAge : 31Messages : 328

    Jeu 9 Juin 2016 - 15:20

    Eh bien écoute, c'est tout à fait possible :) Je viens de tester avec l'image que tu m'as fourni, et ça donne ceci :
    (Ylkhana) Fiche de lien, possibilité d'en faire une présentation Demo210
    Il suffit de remplacer le texte par
    Code:
    <img src="http://www.icone-gif.com/icone/dossiers/nice/Trash_Empty.png" width="20px" height="20px">
    Définir la taille dans le HTML permet de la redimensionner automatiquement, ça devrait t'éviter pas mal de problèmes Wink Et oui effectivement, les caractères spéciaux restent du texte, c'était juste pour être sûre de bien cerner ta demande.

    Autre chose ? :)
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Jeu 9 Juin 2016 - 15:29

    Non c'est niquel, j'étais pas sur qu'il fallait utiliser img dans ce cas là, je te remercie beaucoup ☺
    Ylkhana
    Ylkhana
    FémininAge : 31Messages : 328

    Jeu 9 Juin 2016 - 15:37

    Alors parfait :)

    Comme ce matin on a pris un peu de temps pour nettoyer le code, je te mets sa dernière version flambant neuve. Amuse toi bien avec ta nouvelle fiche !



    PS : pense à éditer ta demande si c'est tout bon pour toi :)
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 2:58