avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 29 Juil 2018 - 1:09
Coucou, @Tigrlion :3

Est-ce que tout va bien ? Je n'ai plus de tes nouvelles depuis un moment :3
J'espère que ce n'est rien de grave :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 11 Aoû 2018 - 22:58
Salut @Reine des Ténèbres

Je suis désolée, j'ai pas d'excuses. Problèmes personnels, on va dire.

Je pense bien proposer mon code en LS, évidemment.

Je sais pas trop si je suis d'attaque pour continuer le cours en ce moment. On pourrait le mettre en stand-by quelques temps ? On partir sur autre chose, mais quelque chose de simple, sans attendre forcément des réponses rapides de ma part ?

Mais j’essaierais de plus trop disparaitre, excuse-moi...
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 20 Aoû 2018 - 23:08
Coucou :3

Alors vu que j'étais en vacances la pause ne me dérange pas.
Dis-moi si tu as besoin de plus de temps, on pourrait prolonger la pause alors ou si tu préfères qu'on fasse des trucs simplement sans prise de tête ça m'ira aussi.

Quand est-ce que penses-tu pouvoir être disponible ?

Bon courage avec tes problèmes, j'espère que ça va s'arranger :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 22 Aoû 2018 - 18:52
Quand je serais de nouveau active hum... Je ne sais pas trop, peut-être vers mi-septembre ? Je pense, je vais essayer en tout cas.

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 24 Aoû 2018 - 1:49
Hm d'accord.
Bon je vais te laisser tranquille alors jusqu'au début de septembre au moins et après on verra si on peut faire des choses simples pour ne pas perdre complètement tes connaissances acquises.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 22 Sep 2018 - 17:50
Salut @Reine des Ténèbres Câlin 3

Cette fois, je pense pouvoir revenir pour de vrai... J'ai envie de reprendre les cours en tout cas, alors je vais faire tout mon possible pour tenir le coup ! Raww
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 22 Sep 2018 - 19:22
Coucou :3
Je suis ravie d'apprendre que tu peux revenir, j'espère que tes soucis sont réglés :3

Alors pour la reprise des cours, veux-tu commencer par quelque chose de particulier ? Le concours de codage peut-être ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 23 Sep 2018 - 17:18
Il a l'air super compliqué je trouve >///<
Mais Let's Go !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 25 Sep 2018 - 16:28
D'accord, tu as préparé un schéma ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 25 Sep 2018 - 22:38
Non, à vrai dire, j'ai essayé, mais j'ai franchement pas d'idée... X_x
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 25 Sep 2018 - 22:40
D'accord pas de soucis, je vais essayer de faire quelque chose pour demain, en espérant qu'on aura assez de temps pour le codage.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 25 Sep 2018 - 22:42
D'accord !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 28 Sep 2018 - 2:25
Coucou :3

Je suis vraiment désolée pour le retard, j'ai passé ces deux jours à faire le tour des médecins.
Je t'envoie le schéma par MP au cas où tu participes malgré le peu de temps qui reste.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 29 Sep 2018 - 23:50
Voilà ce que j'ai fait pour l'instant ! J'suis pas du tout sûre que la manière dont je l'ai fait soit bonne, mais euh, voila >///<

J'ai pas encore touché aux nouveautés, je ferais sûrement ça de la même manière que la navigation (si c'est pas "mal" de faire ça comme ça ?), mais je sais pas comment faire pour que la bordure n'apparaisse pas là où il y a le titre écrit, alors...

avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 30 Sep 2018 - 3:25
Coucou :3

Je passe rapidement, je n'ai pas examiné tout le code mais ça m'a l'air très bien dans l'ensemble, bravo.
Pour ta question déjà, on va devoir ajouter un fond au texte nouveautés pour cacher la bordure. Le souci ici c'est qu'on a une image et non un fond uni, on peut soit mettre la même image en fond mais ça risque d'être casse-tête pour la positionner donc le mieux serait à mon avis de mettre une couleur de fond très proche de celle de l'arrière-plan et régler une petite hauteur au texte pour que ça ne soit pas trop voyant, la bordure ne risque pas de prendre beaucoup de place de toute façon.

N'oublie pas que les propriétés top, left etc fonctionne sur tous les types de positionnement (sauf en static bien entendu), donc une marge de 270px ce n'est pas très beau à voir :p

Pour la navigation, c'est bon ainsi mais si tu veux réduire un peu ton code tu peux mettre simplement ton cadre directement sur ton bloc et ajouter un bloc vide pour l'autre cadre. Pour mieux positionner ton texte tu joueras sur les paddings qui devraient être plus grand d'un côté que de l'autre.

Je vois que tu as changer la taille de police au hover, c'est correct mais il me semble plus intéressant à ce niveau d'utiliser une transformation d'agrandissement (scale) si tu te rappelles un peu des transformations :3

Pour les prédéfinis, il me semble qu'on devrait avoir au moins les pseudos pour pouvoir faire la différence entre les personnages. On peut les faire apparaître au dessous au hover ou bien faire agrandir l'icône au hover et mettre le pseudo dessus.

Alors pour la partie nouveautés, tu auras ton bloc cadré et à l'intérieur on va mettre chaque nouveauté dans une balise séparée (div, p ou span c'est comme tu veux) et de leur donner le même nom de classe.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 30 Sep 2018 - 20:52
Pour la marge de 270px et le transform:scale de la navigation, c'est corrigé !
J'ai ajouté des petites infobulles pour les prédefs aussi (mais je sais pas trop si je les ai faites correctement ?)
Et j'ai préparé le cadre des nouveautés !

avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 1 Oct 2018 - 20:57
C'est très bien, ça me rend tellement fière

Alors on va passer directement au petit script qui nous permettra de faire apparaître les nouveautés en boucle.
Je suis sûre que tu as déjà vu/utilisé des scripts dans les templates. Voici une petite intro au JS tuto.
Bon je dois avouer que la première fois où j'ai lu ce tuto j'étais un peu déçue, ça n'apprend pas grand chose à mon goût mais si jamais voilà /pan.

En gros on a
var machin : machin c'est la variable.
truc() : c'est une méthode, les méthodes sont des actions qu'on peut faire.
.length : est une propriété qui va calculer le nombre de caractères d'un élément.
+ - * / etc : sont des opérateurs arithmétiques qui vont faire des tâches, genre + va ajouter, * va multiplier etc. D'ailleurs le point est aussi un opérateur.
var, document, x etc ce sont les objets, chaque objet peut avoir ses propres méthodes ce qui va permettre de faire des choses plus complexes. Par exemple, getElementById est une méthode de l'objet document qui va nous permettre de faire appel à un élément HTML par son nom d'id.

Bref, le script qu'on va utiliser est le suivant : [Le résultat partie staff ici]
Code:
var slideIndex = 0;
 carousel();

 function carousel() {
 var i;
 var x = document.getElementsByClassName("st_slide");
 for (i = 0; i < x.length; i++) {
 x[i].style.display = "none";
 }
 slideIndex++;
 if (slideIndex > x.length) {
 slideIndex = 1
 }
 x[slideIndex - 1].style.display = "block";
 setTimeout(carousel, 4000);
 }

Premièrement on a définit notre variable que j'ai nommé IndexSlide.
carousel(); est la fonction qui va nous permettre de parcourir les éléments en boucle, comme une carrousel justement.
Après on a ce qu'on appelle l'évènement, tout ce qui est entre les accolades { }, c'est qu'on définit les opérations qui devraient se passer dans la fonction.
Là c'est plus au moins des maths dans une formulation spécifique au JS.
On définit donc notre variable. i sera le début de la boucle donc 0.
Notre élément html est x et du coup on va le sélectionner en utilisant son nom de class avec la method getElementsByClassName("st_slide"). à la place de st_slide tu metteras de nom de class que tu as choisi pour tes trois paragraphes.
Puis la fonction :
Code:
for (i = 0; i < x.length; i++) {
 x[i].style.display = "none";
 }
slideIndex++;
va cacher nos éléments et exécuter  SlideIndex.

Code:

 if (slideIndex > x.length) {
 slideIndex = 1
 }
 x[slideIndex - 1].style.display = "block";
Et on définit une condition pour la fonction SlideIndex qui va changer le CSS de notre élément à afficher de display: none à display: block.

Code:
setTimeout(carousel, 4000);
finalement on définit le laps de temps entre le changement de blocs. J'ai mis 4000 c à d 4000ms qui est 4 secondes.

Voilà j'espère que c'est clair, utiliser un script ne devrait pas être compliqué si on connait là où on peut modifier sans avoir de bugs.
Malheureusement, je ne peux pas t'apprendre à créer des scripts de 0 parce que je ne peux pas le faire non plus mais on peut au moins essayer de comprendre ce qui est déjà fait.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 2 Oct 2018 - 18:04
Je pense avoir compris le principe oui :3

Du coup, voilàààà !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 2 Oct 2018 - 23:07
Oui c'est parfait Lovely

hm, il me semble que si on diminue la taille des liens d'un pixel les mots ne toucheront pas le cadre au hover. C'est purement esthétique donc bon.

Je vois une déclaration transition-delay: 0s; sur le staff, ça veut dire que l'animation va démarrer immédiatement et c'est la valeur par défaut donc ça n'ajoute rien à ton code.

Pour faire des ronds tu peux mettre simplement border-radius: 100%; ça t'évitera de faire des calculs à chaque fois.

Sinon c'est aussi un avis personnel mais je crois qu'il serait bien d'ajouter quelques shadows pour améliorer la lisibilité pour nouveautés par exemple et les liens du staff.
Et pour les prédéfinis, l'infobulle du 2ème me donne un sentiment de déséquilibre parce qu'elle réduit la distance entre le 1er et 2ème personnage et on a l'impression que le 3ème est trop loin. Je ne sais pas si c'est clair mais je pense qu'il serait mieux de la positionner en bas comme les autres.

C'est tout et si tu as des questions n'hésite pas :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 2 Oct 2018 - 23:53
Tu as raison pour la taille des liens, je vais enlever 1px, c'est mieux !

Pour le transition-delay:0s, ça doit être un résidu de trucs que j'avais testé et que j'ai pas gardé, je l'enlève tout de suite x'3

Je ne savais pas du tout pour le border-radius:100%, je vais mettre ça alors ! (j'en ajoute un directement aux images du staff tiens aussi en passant... ça fait plus 'doux' :3)

Pour les prédéfinis, je m'étais aussi faite la remarque oui, et j'avais beaucoup hésité... Si tu penses qu'il vaut mieux mettre en bas, je vais mettre en bas, alors.

J'ai jamais été fan des text-shadow flous mais c'est vrai que le titre Nouveautés n'était pas très lisible, alors j'ai ajouté un petit truc discret. Pour les liens des staff... Je les trouve lisible, à part le 2ème staff quand on passe la souris... mais j'ai mis un truc flou trèès léger, c'est vrai que c'est un peu plus lisible.

Est-ce que c'est bon comme ça ? :3

avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 3 Oct 2018 - 0:15
Oui c'est parfait :3

Alors le script tu le mets dans la balise script évidemment, soit à la fin du code ou bien après la partie concernée. Je l'aurais mis après les p juste avant /div. Il vaut mieux mettre le script après l'élément et non avant parce que logiquement on crée d'abord l'élément puis on le fait bouger. Le navigateur va charger l'élément d'abord puis exécuter le script.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 3 Oct 2018 - 19:40
J'ai tout mis sur une page HTML du coup !



Voila le code de ma page HTML du coup :



Est-ce qu'il est bon, j'ai bien placé ma balise script ?_? Parce que ça marche mais Forumactif me met les balises en rouge après. Il y a un problème ou je dois pas m'en préoccupé ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 3 Oct 2018 - 23:20
Ton code est bon, FA doit avoir un problème avec le JQuery. Je ne suis pas sûre pourquoi c'est rouge mais t'en fais pas pour ça, le navigateur n'affiche aucune erreur dans l'exécution de ton script.



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 4 Oct 2018 - 2:11
D'accord, c'est tout fini alors !
Je vais envoyé tout ça pour le concours demain ! :3

On peut passer à autre chose, j'suis ready et motivée pour tout ce que tu peux me proposer !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 6 Oct 2018 - 1:58
Coucou :3

Désolée du retard,  j'avais beaucoup de travail du coup j'ai pris mon temps pour te faire une maquette.

Voici donc notre prochain exercice :

Spoiler:

Avant de parler du template je pense qu'il est temps de voir du CSS avancé et notamment le flexbox.

Alors, je sais que je t'en ai parlé brievement avant de voir le positionnement classique et ça a du avoir l'air hyper compliqué à l'époque. Maintenant tu connais plus au moins tous les autres types de positionnement, le float, l'inline-block donc le flexbox est aussi une façon de positionner les éléments.

Comme son nom le sous-entend c'est une façon plus flexible pour gérer le positionnement dans une "boite" et donc un bloc.
Les mots clés ici sont "flexible" et "boite".
- Flexible parce que la taille de nos éléments peut varier selon l'espace disponible et les configurations choisies qu'on verra ultérieurement.
- Le bloc auquel on va attribuer un "display:flex;" va devenir une sorte de boite qu'on va appeler le conteneur (flex container), les éléments à l'intérieur (ses enfants directs) vont "subir" et seront donc automatiquement positionnés (flex items).

Rien de plus parlant qu'un exemple : ici
J'ai donc une liste non ordonnée qui va me servir de conteneur et ses éléments li.
Logiquement, les éléments blocs comme li sont positionnés l'un au dessous de l'autre. Les éléments inline seront sur la même ligne.
Je te laisse donc retirer les symboles du commentaire sur le display: flex et me décrire ce qui change.
Dans change view > Editor Layout, choisis le mode vertical qui affiche le résultat à droite ou à gauche.
Je t'invite à modifier la taille de la partie résultat en agrandissant et réduisant la largeur de la partie du code.


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