avatar
Sexe : Masculin
Date d'inscription : 11/04/2018
Messages : 148
Membre timide
Voir le profil de l'utilisateur
# Workshop carte fantasyle Jeu 3 Jan 2019 - 23:37
Workshop carte fantasy
Bonjour à vous :)

Voici donc le tout premier Workshop de JS o/
Pour ce premier Workshop, nous allons nous intéresser à la gestion des catégories d'un forum en Javascript. Le but est donc de voir comment on peut récupérer les informations de nos catégories sur un forum pour ensuite réutiliser ces données autre part. Et pour ce faire, je vous ai préparé une petite maquette de ce que nous allons réaliser :P

[Vous devez être inscrit et connecté pour voir ce lien]
Spoiler:
[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir ce lien]
Spoiler:
[Vous devez être inscrit et connecté pour voir cette image]

Comme vous pouvez le voir, nous avons ici un forum sous la forme d'une carte qui prend tout l'écran (pour cette exercice nous nous contenterons d'une résolution classique de 1920*1080 ou légèrement moins). Les 5 catégories de notre forum sont alors affichées sur la carte. En dessous, est visible le dernier message posté dans la catégorie ainsi qu'un drapeau si un nouveau message a été posté dans la catégorie depuis votre dernier passage. Au survol d'une catégorie, la région de la carte correspondante s'affichage en couleur.

Il est également possible d'afficher les détails de la catégorie en cliquant dessus. Une popup s'ouvre alors avec les forums appartenant à la catégorie sous un affichage relativement classique. Il est possible de ferme la popup en cliquant sur la croix où à l'extérieur de celle-ci.

Et voici pour les explications de la maquette. Par soucis de facilité, on va totalement ignorer ce qui est autre que les catégories. Si vous avez des questions n'hésitez pas à les poser afin d'avoir une compréhension de l'exercice avant de se lancer dedans.

Je vous invite donc à réagir pour exprimer votre avis et si tout est ok pour vous. Ensuite, j'expliquerai plus en détail le déroulement de ce Workshop.

Participants :
  • Dragonnier
  • Dwight
  • 'Christa
  • Reine des Ténèbres


avatar
Sexe : Féminin
Date d'inscription : 30/12/2018
Messages : 53
Newbie
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Ven 4 Jan 2019 - 22:07
Carrément ok et encore plus partante !
Merci pour ce workshop ♥️
avatar
Sexe : Féminin
Date d'inscription : 27/10/2018
Messages : 79
Newbie
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Sam 5 Jan 2019 - 1:01
Holy Guacamole ça m'a l'air compliqué OoO Donc si je résume, récupération des infos d'une catégorie, affichage d'une popup au clic, et tant qu'a faire changement d'apparence d'une partie de l'image au survol ? Ça m'a l'air fun. Toujours partante XD
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2926
Designer - Rose des sables
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Sam 5 Jan 2019 - 23:33
Oh je ne me rappelle pas avoir posté sur ta Dragoland /pan.

Très jolies tes maquettes, bravo :3

It's all OK pour moi, ça a l'air hard mais très fun. J'ai hâte d'être fière à la toute fin x)

Merci Drago :3




Codée par Sun d'amour [Vous devez être inscrit et connecté pour voir cette image]

Spoiler:
avatar
Sexe : Masculin
Date d'inscription : 11/04/2018
Messages : 148
Membre timide
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Dim 6 Jan 2019 - 15:20
Yop o/
Le but ça va justement être de vous montrer que c'est pas si si compliqué que ça :D
Mais y a un peu de tout donc c'est cool comme exercice.
Et merci Reine, en vrai je suis pas totalement fan de la popup avec le parchemin, mais j'avais pas trop d'autres idées et bon c'est jamais qu'un exo.

Sinon juste une petite précision 'Christa, pour le survol des catégories, ça sera bien qu'au survol du titre/bloc de catégorie et non du pays en lui même sur la carte. Car pour un survol d'une partie d'image c'est assez compliqué et ça présente peu d'intérêt donc on va partir sur la version simple :D




Bref, parlons un peu de l'organisation pratique de ce Workshop o/

Pour commencer, ceci est un Workshop et non un cours, de ce fait, je ne vais pas spécialement attendre une réponse de tout le monde avant d'avancer. Si on doit attendre à chaque fois une réponse de chacun pour dire qu'il est d'accord avec ce qui est dit avant ça va énormément ralentir l'avancement et ça serait dommage. Donc ne vous étonnez pas trop à ce niveau, l'intérêt c'est essentiellement de confronter nos avis divers sur le fonctionnement :)
Mais bon, on va voir un peu comment le tout se déroule et n'hésitez surtout pas à venir me le dire si l'organisation vous convient pas.

Autre point, vous êtes plutôt des débutants en js. Du coup, on va évidemment devoir revoir rapidement certaines bases. Pour ce faire, je vais certainement vous donner à chaque fois des tutoriels/documentation sur ce qu'on verra de nouveau. N'hésitez pas à prévenir si il y a des choses que vous ne comprenez pas dans ces tutoriels. De notre côté, on va surtout se focaliser sur la pratique donc moi sur ce genre de côté théorique même si cela reste important.

Dernier point pour l'organisation pratique, jQuery ! Cela va certainement être un des points les plus ennuyants dans ce Workshop, pour certains vous avez envie d'en apprendre plus sur le jQuery et c'est une bonne chose. Je pense d'ailleurs qu'utiliser jQuery reste l'idéal quand on fait du js sur forumactif. Cependant, c'est pas non plus l'idéal de voir seulement ce qu'on va faire en jQuery vu que certains restent assez débutants en js pur. Ainsi, je pense qu'on va partir sur un mixte des deux pour avoir un Workshop pratique à ce niveau. Donc, on va essentiellement faire le Workshop en js classique, mais je mettrai également toujours le même code mais en version jQuery afin que vous puissiez faire le comparatif et voir les équivalents. Vous verrez de la sorte pourquoi utiliser jQuery c'est quand même vraiment cool.

Sur ce, on va donc commencer directement dans le vif du sujet. Dans un premier temps, on va faire une phase de réflexion histoire de voir un peu plus clair sur ce Workshop. Du coup, pouvez-vous me dire pourquoi (selon vous) on va devoir utiliser du javascript pour réaliser la maquette présentées initialement ?
Quels sont les éléments qui vous semblent impossible à réaliser autrement qu'avec du javascript ?
avatar
Sexe : Féminin
Date d'inscription : 27/10/2018
Messages : 79
Newbie
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Dim 6 Jan 2019 - 17:19
Alors, à première vue, le changement de couleur des zones pourrait se faire avec du CSS. Par contre, comme les catégories sont générées par FA, c'est difficile de dire "je veux que telle section du forum soit affichée de cette façon, et telle section affichée de telle autre façon" via du CSS et du HTML. Du moins je ne vois pas comment faire autrement pour sélectionner une catégorie et la manipuler pour qu'elle reste "cachée, puis visible d'un clic". Sans parler de la popup bien mise en page et tout, et potentiellement pas blocable par le navigateur XD.

Ceci dit, j'imagine que la carte peut se faire essentiellement à grands coups de CSS et HTML et c'est à nous de placer les différents "pays" (avec dernier message posté étou étou) au bon emplacement. Du coup toute cette mise en page est conditionnée par le fait qu'on n'aura pas plus de catégories, et que celles qu'on a sont clairement planifiées
avatar
Sexe : Féminin
Date d'inscription : 30/12/2018
Messages : 53
Newbie
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Dim 6 Jan 2019 - 22:33
Hum... De ce que je vois, j'ai surtout l'impression que le JS va alléger le code. Et nous simplifier la vie.

Faire apparaître ou disparaître une catégorie, c'est jouable en HTML / CSS (au final c'est pareil qu'un système à onglets, on déplace juste les onglets en question... combiné avec une sorte de lightbox... j'ai l'impression ?) mais va falloir toucher aux templates et se questionner sérieusement sur la compatibilité navigateur. Et j'ai pas envie de penser au responsive x)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2926
Designer - Rose des sables
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Mar 8 Jan 2019 - 18:59
Coucou :3

Alors à mon humble avis, la structure de chaque catégorie c'est visiblement du HTML et CSS.
Pour les zones je suppose qu'on peut utiliser les balises map/area et une image en background pour la coloration au survol. Le JS va aider à automatiser le passage d'une zone à une autre je pense et aussi mettre toutes les infos sur la bonne zone c'est assez flou dans ma tête, j'utilise map pour définir des zones cliquables et donc des liens mais j'ai un peu du mal à imaginer comment intégrer tout le reste. Peut-être juste différents blocs positionnés en absolu mais ça doit nécessité du JS ? (oui je dis n'importe quoi mais dans ma tête y aura beaucoup d'images et de découpage, donc ça doit être trop long à faire sans JS).

Il me semble qu'on peut faire apparaître les forums au hover avec du CSS mais pas au click, d'où la nécessité du JS. De même pour "sortir" des forums d'une catégorie ça ne me semble pas possible avec uniquement du HTML et CSS, sauf que je peux me tromper x)

Ma réflexion se limite à ça du coup x)





Codée par Sun d'amour [Vous devez être inscrit et connecté pour voir cette image]

Spoiler:
avatar
Sexe : Masculin
Date d'inscription : 11/04/2018
Messages : 148
Membre timide
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Mer 9 Jan 2019 - 20:41
Hey o/

Tout ceci est intéressant et pas si loin de ce qu'on va faire :D
Reine a soulevé un point particulièrement important dans notre cas, c'est que avec la façon dont FA génère les catégories, on a besoin de JS pour séparer nos catégories et nos forums appartenant à ces catégories o/

Bon, pour faciliter un peu l’exercice, on peut séparer tout ça en deux grosses étapes :
- la carte avec les catégories
- la popup pour chaque catégorie et ses sous-forums
En effet, d'un côté nous avons une carte semi interactive sur laquelle on va devoir replacer les informations des catégories et de l'autre on a une popup qui affiche une catégorie et ses forums sous un format relativement classique. Et donc on aura ensuite le clique sur une catégorie qui reliera les deux. Par ailleurs, vous avez raison, l'affichage des catégories au clique va nécessiter du JS. On pourrait plus ou moins le faire en CSS mais les onglets en CSS c'est un peu le mal. Faire ça en JS permettra d'avoir un comportement bien meilleur et plus de flexibilité.

En ce qui concerne la carte : les catégories seront positionnées uniquement en CSS. On peut en effet pas trop deviner leur emplacement avec du JS donc on va devoir faire ça de nous même. Comme l'a souligné 'Christa, cela veut dire qu'on doit connaitre toutes nos catégories et ne pas en ajouter dans le futur pour ce genre de design. Mais pour le coup, on a pas trop le choix si on veut pouvoir avoir une carte de la sorte (sinon il faudrait une carte qui s'auto génère et ça devient bien trop compliqué). Bon, ça veut dire qu'on va faire quelque chose de relativement peu générique mais ce sont surtout les concepts derrières qui sont important :P
Et puis, à moins de faire du LS, généralement on connait nos catégories avant de faire un design.
Et du coup le JS dans tout ça vous me direz ? Il va nous servir pour deux choses principalement. La première sera l'affichage des informations des catégories. En effet, vous ne l'avez pas relevé mais on va devoir afficher le dernier sujet où il y a eu un poste dans toute la catégorie. Et ça, eh bien FA ne nous fourni pas cette information. FA va en effet nous dire le dernier sujet/posteur des forums de la catégorie mais pas plus. Donc on va devoir retrouver cette information par nous même pour ensuite l'afficher au bon endroit. Même chose pour savoir si il y a un nouveau message dans la catégorie.
Le deuxième point, sera lui de savoir quand on clique sur une catégorie et de faire l'affichage de la popup correspondante à la catégorie.
Pour l'affichage des pays en couleurs, on a le choix entre faire ça en JS ou en CSS si on utilise les map/area (c'était pas trop prévu initialement mais pourquoi pas). Par contre, si c'est au survol de la catégorie, ça serait obligatoirement (ou presque) via du JS pour des raisons pratiques (on verra ça plus en détail quand on s'occupera de ça).

En ce qui concerne la popup pour chaque catégorie et ses sous-forums :
Pour le coup ça va être beaucoup plus simple, j'ai été assez sympa avec vous donc l'affichage d'une catégorie en popup c'est exactement ce qu'on fait de façon classique sur un forum FA sauf que là c'est dans une popup. Donc on va juste devoir faire l'affichage au clique en popup via du JS et c'est tout. Rien de trop complexe par ici donc. Bon, il y aura aussi la fermeture de la popup qui devra se faire en JS.

Et voila, je pense que je n'oublie rien :P
Vous voyez un peu mieux ce qu'on va faire exactement c'est bon ?
Petite question au passage, voulez-vous qu'on fasse également la partie html/css ensemble ou bien on ne voit vraiment que la partie JS et je vous fourni ce qu'il faut pour ?
avatar
Sexe : Féminin
Date d'inscription : 30/12/2018
Messages : 53
Newbie
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Jeu 10 Jan 2019 - 17:34
Merci Drago, c'est méga clair -même si là je commence à flipper xD

Pour la partie HTML/CSS, ça peut être intéressant d'en faire un peu, même pour voir quelle logique avoir avec tout le code en général x_x
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2926
Designer - Rose des sables
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Jeu 10 Jan 2019 - 23:37
Bonsoir :3

Ah j'avais complètement oublié qu'on ne peut pas afficher le dernier sujet sur toute la catégorie avec les variables de FA.
Merci pour ces explications, c'est relativement plus clair dans ma tête.

Sinon pour le code de base en HTML/CSS, ça dépend de si c'est intéressant à faire ou pas. Tu sauras mieux sensei :3




Codée par Sun d'amour [Vous devez être inscrit et connecté pour voir cette image]

Spoiler:
avatar
Sexe : Féminin
Date d'inscription : 27/10/2018
Messages : 79
Newbie
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Ven 11 Jan 2019 - 6:00
Lol, j'avais pas fait gaffe à la subtilité du dernier sujet. J'imagine qu'avec JS on devra récupérer les infos des derniers messages postés pour chaque forum d'une catégorie et sélectionner le plus récent ?

Dans tout ça ce qui me fait le plus peur c'est l'interactivité de la carte :o (clics et effet de survol).

J'me dis qu'on peut faire le HTML/CSS ensemble aussi, l'échange d'idées dessus sera probablement intéressant :)
avatar
Sexe : Masculin
Date d'inscription : 11/04/2018
Messages : 148
Membre timide
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Ven 11 Jan 2019 - 16:23
C'est exactement ça 'Christa :D
En vrai, la carte va pas être si compliquée que ça. Le plus compliqué, à mon avis, c'est l'affichage justement du dernier message/posteur d'une catégorie.
Ok, on va donc faire également l'HTML/CSS o/

Je vous propose de commencer par la carte et les catégories justement (les catégories avec des informations lorem ipsum). Une idée de comment on va gérer tout ceci ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2926
Designer - Rose des sables
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Ven 11 Jan 2019 - 17:58
Coucou :3

D'après le schéma, on aura le titre, le dernier message et l'icône qui seront placer dans des zones différentes. Le contenu des catégories lui aura la même position (affiché au click bien sûr, mais toujours au centre de la carte). J'imagine qu'on aura donc la boucle à l'intérieur d'un bloc de référence pour le positionnement.
Au fait vu qu'on va travailler le HTML/CSS ensemble et que si j'ai bien compris, on va travailler sur une taille fixe, ça me fait penser à un petit détail, on se basera sur quelle version de FA ? Le modernBB peut-être ?




Codée par Sun d'amour [Vous devez être inscrit et connecté pour voir cette image]

Spoiler:
avatar
Sexe : Masculin
Date d'inscription : 11/04/2018
Messages : 148
Membre timide
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Ven 11 Jan 2019 - 20:06
Bon j'ai pas totalement compris mais en fait, on aura toute la partie de la carte et les catégories dessus qui sera "externe" à la boucle FA des catégories. En effet, ça sera plus simple en gérant ça nous même en dehors de la boucle et on ira rechercher les données via du JS ensuite.
Ah, j'ai oublié de préciser... Du coup, oui le version du forum sera en modernBB (sauf si vous voulez absolument autre chose). Par contre quand je parlais de taille fixe c'était pas totalement vrai. On va faire un sorte que ça s'affiche de façon normale sur une taille de 1920px de large mais on va quand même faire les choses bien et utiliser des valeurs "responsives" pour permettre d'avoir une taille plus petite. C'est juste qu'on va pas trop se casser la tête pour avoir un affichage vraiment correcte via des media queries et tout (à la limite ça on pourrait faire dans un second temps comme complément du Workshop). Mais donc, aucune valeur fixe en px pour la carte.
Et sinon, je l'ai pas précisé non plus, mais on va commencer par faire notre code en "statique" et non directement sur FA. C'est trop ennuyant de coder sur FA directement donc on adaptera juste le code un peu plus tard pour FA. Il faut juste penser au fait que ça sera sur FA par la suite :D
Bon du coup, en sachant tout ceci, on commence par quoi ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2926
Designer - Rose des sables
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Ven 11 Jan 2019 - 23:06
Alors ce que je disais est de créer nos catégories dans un bloc qui servira de référence pour le positionnement càd qu'il sera en relatif et on positionne nos cat en absolu sur la carte. C'est pas ça ?
Pourrait-on avoir la carte sans le texte au fait ?




Codée par Sun d'amour [Vous devez être inscrit et connecté pour voir cette image]

Spoiler:
avatar
Sexe : Féminin
Date d'inscription : 27/10/2018
Messages : 79
Newbie
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Sam 12 Jan 2019 - 17:41
Je pense plutôt qu'on laissera FA générer les catégories comme d'habitude et qu'on les déplacera via JS ensuite, en mode couper/coller XD Ce qui évitera de rendre le forum impossible à naviguer sans JS. Pour le reste, avec ma crève, je pense à deux à l'heure, donc je suis pas certaine d'avoir compris la question x_x
avatar
Sexe : Masculin
Date d'inscription : 11/04/2018
Messages : 148
Membre timide
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Dim 13 Jan 2019 - 22:57
Alors tout d'abord, voici [Vous devez être inscrit et connecté pour voir ce lien].
Sinon c'est plus ou moins ça en effet Reine :D
A première vue je dirais que notre bloc principal sera plutôt en absolu mais sinon oui.

Ouep c'est tout à fait ça 'Christa :)
Remarque, de nos jours c'est plus vraiment nécessaire de rendre un forum navigable sans JS. Bon ça dépend évidemment du public auquel tu t'adresses, mais le JS devient de loin un incontournable sur le web et une grosse partie des sites de nos jours ne fonctionnent plus sans JS. Du coup c'est plus vraiment une problématique majeure :D

Quelqu'un a envie de se lancer sur le début du code ou pas du tout ? o/
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2926
Designer - Rose des sables
Voir le profil de l'utilisateur
# Re: Workshop carte fantasyle Mar 15 Jan 2019 - 23:55
Je veux bien faire un essai de mon côté, je vais essayer de le faire demain en rentrant du travail, c'est justement pour ça que j'ai demandé à avoir la carte de base.
Mais bien sûr tout le monde peut essayer, c'est bien le but d'un workshop :3




Codée par Sun d'amour [Vous devez être inscrit et connecté pour voir cette image]

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