[Résolu] Site école maternelle

Bonjour à tous, je suis enseignant, je suis en train de créer un site pour présenter mon école (bénévolement).
Actuellement, ce site est simple et fonctionne parfaitement, seulement je voudrais ajouter une page d’accueil de quelques secondes pour le rendre plus attrayant.
Je souhaiterai au démarrage avoir une animation de ce type en page unique pour accueillir les visiteurs:
https://www.youtube.com/watch?v=E7QZhynh1KE&feature=youtu.be
qui une fois terminée (la aussi, ça ne me pose pas de difficulté) basculerai sur mon site de présentation (site principal).
La ou je me casse les dents, c'est comment faire pour intégrer cette page d’accueil à mon site.
Y a t il une librairie à utiliser qui permette de lancer une première page puis à son issue un seconde ?
Je suis preneur pour toutes les indications qui me permettront d'avancer sur ce sujet.
Merci pour votre aide.

Très cordialement.

La réponse est oui, tu ne manqueras pas d’aide sur ce forum, il y a des gens très qualifiés qui le fréquentent assidûment.
Ce sur quoi je voudrais attirer ton attention c’est que les personnes qui le voient pour la 20ème fois auront envie de sauter directement au sujet principal. C’est ce que j’ai vécu sur un site: ça commence par de la musique, ce qui est légitime pour un site de chorale, mais j’ai dû ajouter un bouton on/off et mémoriser son état dans un cookie. Et finalement les abonnées (deuxième cookie) sautent complètement la séquence d’initialisation.
Modifié par PapyJP (29 Jun 2020 - 15:32)

Merci pour ta réponse PapyJP, j'y ai pensé c'est pour cela que je veux limiter la séquence d'initialisation à quelques secondes, donc effectivement, si je n'y arrive pas c'est pas un drame. Mais ce qui m’intéresse est aussi la solution technique, c'est parce-que je ne sais pas faire que j'ai envie de comprendre. Ça veut dire que dans mes recherches j'ai forcement loupé une information, j'essaie de combler mes lacunes. Je dois avouer que j'ai commencé la programmation html de zéro à l'occasion du confinement, donc je manque drastiquement de recul,mais si je peux proposer un site informatif sympa et qui ne ressemble pas à un site administratif austère, alors je suis preneur d'ou l'idée d'ajouter cette animation.

Bonjour,

C'est tout à fait possible bien sûr, mais ça commence à être un brin technique pour quelqu'un qui débute...

Donc, dans un premier temps, faire "quelque chose" : c'est à dire créer le site comme il doit être "au final" pour l'utilisateur. La page de présentation envisagée n'est qu'une surcouche au site et peut être implémentée après coup.

Pour cette dernière, si l'on suit la proposition de Papy - avec laquelle je suis tout à fait en phase - il faudra alors aussi enregistrer la première visite d'un utilisateur, soit via un cookies, soit via localStorage. Si pas d'infos sur une première visite j'affiche ma surcouhe, si déjà une information de visite dans mon cookies ou mon localStorage alors je n'affiche pas ma page de surcouche.
Modifié par Olivier C (29 Jun 2020 - 12:37)

J'en suis bien la, le site comme il doit être "au final" est bien terminé, la page de "surcouche" elle aussi existe et dure 3 secondes en tout, dans un fichier html séparé, mais je pense que ce serait un plus de pouvoir l'intégrer.
Au vu de sa durée, je veux faire simple, pas besoin de cookies et autre même si l'idée m'intéresse.
Plus j'entends vos propositions plus j'ai envie d'apprendre, mais dans mon cas particulier je cherche comment faire, malheureusement je n'ai aucune piste, c'est pourquoi je me tourne vers vous !
Je ne sais pas quoi chercher, quel mot clef...
En plus du fichier html, je mets en forme avec du CSS, j'ai un JS en source pour faire clignoter du texte et afficher le nombre de visites avec une API. Mon animation est réalisée avec la librairie typed.js.
Voila ou techniquement j'en suis.
Très cordialement.

momtoto a écrit :
Bonjour à tous, je suis enseignant, je suis en train de créer un site pour présenter mon école (bénévolement).
Actuellement, ce site est simple et fonctionne parfaitement, seulement je voudrais ajouter une page d’accueil de quelques secondes pour le rendre plus attrayant.
Je souhaiterai au démarrage avoir une animation de ce type en page unique pour accueillir les visiteurs:
https://www.youtube.com/watch?v=E7QZhynh1KE&feature=youtu.be
qui une fois terminée (la aussi, ça ne me pose pas de difficulté) basculerai sur mon site de présentation (site principal).
La ou je me casse les dents, c'est comment faire pour intégrer cette page d’accueil à mon site.
Y a t il une librairie à utiliser qui permette de lancer une première page puis à son issue un seconde ?
Je suis preneur pour toutes les indications qui me permettront d'avancer sur ce sujet.
Merci pour votre aide.
Très cordialement.

A priori, si j'ai bien cerné le problème, c'est l'équivalent d'un "spash screen" dont tu as besoin.
Si tu connais (et c'est sûrement le cas) la durée exacte de la vidéo, tu peux créer cette page d'accueil pré-principale en plaçant dans sa section HEAD une balise de redirection (LINK) vers l'autre page, ayant une durée correspondant à celle de la vidéo (exprimée en secondes).
Tu trouveras toute la documentation sur les redirections HTML sur MDN.
Pour permettre toutefois aux visiteurs de sauter la vidéo, tu peux ajouter un simple bouton quelque part sur cette page de préchargement avec un lien hypertexte vers la page principale.

Merci pour vos réponses Jean-Pierre et sepecat, ce n'est pas une vidéo que je souhaite intégrer mais ce bout de code: https://rchristophe.github.io/hello/ sur un site principal comme celui-ci: https://www.alsacreations.com/xmedia/tuto/exemples/design_css/etape4.html
Je ne sais pas si c'est possible, d'ou mon questionnement.
Puis faire une transition, mais ça je n'y suis pas encore, il me faut d'abord franchir l'étape actuelle.

Voilà qui pourrait te mettre sur la bonne voix :

<p></p>

const text = "Je suis momtoto le meilleur prof";
const p = document.querySelector('p')
var index = 0;

const play = () => {
  p.innerHTML = text.slice(0, index);
  index++;
  if(index > text.length) {
    index = 0;
  }
};

let timer = setInterval(play, 100);

Oui, merci vzytoi mais je n'ai pas de soucis pour faire défiler mon texte avec la bibliothèque typed.js
Grosso modo, j'ai 2 sites htlm qui fonctionnent tous les 2 et je cherche comment je pourrais faire pour utiliser le premier en page de bienvenue, suivi à l'issu de ce premier script de quelques secondes, du second comme site principal.
Je suis preneur de toutes les idées.

Ben, sauf que non, je n'ai pas eu ma réponse. Je demandais comment je pouvais faire pour agréger 2 fichiers html, pas du tout comment faire de la typo.
Comme j'ai précisé, je souhaite faire une page d’accueil de quelques secondes avant d'aller sur mon site principal qui est parfaitement fonctionnel.
Donc merci pour ta réponse Jean-Pierre mais ce n'est pas ce que j'attendais puisque je sais le faire.
Ce ne sera pas un drame si je n'y arrive pas, mais une satisfaction personnelle si j'y arrive.
Très cordialement.
Modifié par momtoto (30 Jun 2020 - 16:30)

Je crois que l’expression « agréger 2 fichiers html » n’est pas claire.
Au sens propre on ne peut pas « agréger » des fichiers html
On peut (a la main) fabriquer un nouveau ficher sui contient les infos des deux fichiers
On peut également afficher un premier fichier et lancer l’affichage du second après un certain temps.
On peut aussi créer un contenant dan un fichier et y afficher le deuxième
Il y a sans doute plein d’autres choses que l’on peut faire et auxquelles je ne pense pas pour le moment
Peux tu être plus précis pour que nos réponses puissent l’être ?
Modifié par PapyJP (30 Jun 2020 - 18:00)

Bonjour PapyJP, "On peut également afficher un premier fichier et lancer l’affichage du second après un certain temps.", c'est exactement cela que je cherche à faire. Le premier fichier étant:
https://rchristophe.github.io/hello/ et le second mon site principal.
Mais je sèche complètement, je n'ai aucune piste du début d'un bout d'idée.
C'est pourquoi je me tourne vers vous !

momtoto a écrit :
Bonjour PapyJP, "On peut également afficher un premier fichier et lancer l’affichage du second après un certain temps.", c'est exactement cela que je cherche à faire. Le premier fichier étant:
https://rchristophe.github.io/hello/ et le second mon site principal.
Mais je sèche complètement, je n'ai aucune piste du début d'un bout d'idée.
C'est pourquoi je me tourne vers vous !

Ton site principal n’est pas un fichier, c’est un site.
Un site est matérialisé par un ensemble de fichiers et de répertoires dans un répertoire dit « racine » du système de fichiers du serveur.
Donc si je comprends bien il faut d’abord recopier ton fichier GitHub dans ton répertoire de serveur.
Ensuite on choisira entre plusieurs options techniques. Le plus simple est sans doute de considérer que ton fichier GitHub est le premier fichier affiché et on y ajoute le mécanisme pour lancer ensuite le fichier 2. Mais bien sûr il y a d’autres options

momtoto a écrit :
Bonjour PapyJP, "On peut également afficher un premier fichier et lancer l’affichage du second après un certain temps.", c'est exactement cela que je cherche à faire. Le premier fichier étant:
https://rchristophe.github.io/hello/ et le second mon site principal.
Mais je sèche complètement, je n'ai aucune piste du début d'un bout d'idée.
C'est pourquoi je me tourne vers vous !

Ton site principal n’est pas un fichier, c’est un site.
Un site est matérialisé par un ensemble de fichiers et de répertoires dans un répertoire dit « racine » du système de fichiers du serveur.
Donc si je comprends bien il faut d’abord recopier ton fichier GitHub et le fichier que tu appelés "ton site" dans ton répertoire de serveur.
Ensuite on choisira entre plusieurs options techniques. Le plus simple est sans doute de considérer que ton fichier GitHub est le premier fichier affiché et on y ajoute le mécanisme pour lancer ensuite le fichier 2. Mais bien sûr il y a d’autres options
Modifié par PapyJP (30 Jun 2020 - 18:11)

Donc, il faut que a la racine du site je me retrouve avec 2 fichiers en .html ?
Ça ne pose aucun problème. L'idée est de lancer la première partie puis au bout d'un certain temps on lance la seconde ?
Mais quoi permet cette action.
Merci PapyJP.

Désolé d'avoir dû interrompre la discussion si longtemps.
Une des multiples solutions possibles:
- dans le répertoire racine mettre deux fichiers A et B
- dans le fichier A écrire quelque chose de ce genre

<htlm>
    <head>
        ................
       <script>
            function gotoB() {
               window.location = "/B";
            }
        </script>
    <body onload="setTimeout(gotoB, 5000)">
        ................
        <button onclick="gotoB()">Aller à B</button>
        <!-- suite du fichier A -->
    </body>
</html>

Comment ça marche;
- au chargement de la page A (body onload) on dit de lancer la fonction gotoB au bout de 5 secondes
- si on clique sur le bouton on dit de lancer la fonction gotoB
Dans les deux cas la fonction gotoB dit de remplacer la page en cours par la pageB

Est-ce clair?
Modifié par PapyJP (01 Jul 2020 - 12:17)

Merci PapyJP, j'y suis presque.
Mes premiers essais semblent concluants.
Je crois que je vais pouvoir m'en sortir maintenant, avant de clore le sujet, permet-moi de finir mes tests pour éviter d'y revenir dans un autre fil.
En tout cas, chapeau, pas évident d'expliquer à un novice et de se faire comprendre aussi bien.
Grand merci à tous, je suis ravis d'avoir appris en votre compagnie.
Très cordialement.

Je confirme PapyJP tu es mon héro, ce petit accueil est un plus qui rend le site moins austère.
Comme j'avais précisé, c'est pour l'école maternelle publique de Pignans dans le Var, donc entièrement bénévole, si tu n'étais pas intervenu, ça n'aurait pu être fait.
Merci pour cela !

Résolu !!!

Pas de problème
Le tout est d’arriver à comprendre ce que ton interlocuteur connaît déjà.
Chacun d’entre nous connaît beaucoup de choses partiellement il en connaît encore plus qu’il ne croit. Il suffit de relier certains points entre eux pour que tout se mette en place.