Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Muse CC 2015

Visualiser les exercices terminés

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez prendre le temps de visualiser les exercices que vous allez utiliser dans cette formation.

Transcription

Dans cette vidéo je vous propose de parcourir ensemble le site que nous allons réaliser dans cette formation. Il s'agit du site de la fête de fin d'année de la petite école du chemin vert. Ceci rappelez-vous représente un cas d'utilisation typique de Muse, le site d'un petit événement local pour une petite association locale, aux ressources très probablement très limitées mais vous voyez que malgré les ressources limitées et grâce à Muse et bien ils n'ont pas à rougir de leur site. Alors sur leur site il y a ces images qui défilent et ça c'est réalisé avec ce qui s'appelle dans Muse un widget, donc ce diaporama il est tout fait dans Muse, on n'a plus qu'à le personnaliser, et à y mettre bien sûr nos propres images. Alors juste en dessous du diaporama, et bien nous avons la barre de liens, Accueil, Programme, Réservations et Contact et là je vais vous montrer ce que j'entends par design d'interaction par conception d'interaction donc. Alors regardez le mot Programme, il est écrit en bleu, et quand je passe ma souris sur ce mot Programme, et bien la couleur du texte change puisque ce mot est alors écrit en jaune, donc là vous voyez que je dois prévoir plusieurs états pour un même élément, par exemple ici il y a le bouton Programme, l'état normal du bouton, l'état survolé du bouton, et puis quand je clique dessus et bien encore un autre état pour ce bouton, maintenant cette grosse zone jaune représente la page sur laquelle on se trouve, donc si je clique sur le mot Réservations c'est maintenant le bouton réservations qui est en jaune, et puis si je reviens sur ma page d'accueil, et bien c'est le bouton accueil qui est maintenant en jaune. Même chose avec ces 3 colonnes ici, et les boutons Plus d'info que vous avez ici dans le fond de chacune des colonnes, et bien ils sont également interactifs donc j'ai l'état normal, du bouton Plus d'info avec le mot écrit en jaune, quand je passe ma souris dessus vous voyez que j'ai l'état survoler ce bouton avec le mot écrit en blanc. Quand je clique et que je laisse le bouton de la souris enfoncé et bien j'ai un troisième état, c'est l'état cliqué de ce bouton, donc avec la bordure jaune et puis l'action associée à ce bouton et bien elle a lieu quand je relâche le bouton de ma souris. Hop, voila, je suis redirigé vers ma page Programme à hauteur de cette activité ici. Donc Ouverture des activités extérieures. Alors je vais revenir sur ma page d'accueil, la faire défiler, voila, pour vous montrer les autres éléments de cette page d'accueil et puis surtout pour vous montrer le pied de page qui est ici dans le fond en bleu avec les icônes des réseaux et puis surtout une information capitale, le moment à laquelle cette fête aura lieu. Voila, maintenant je vais vous montrer la page programme. Voici le programme de cette fête qui s'annonce tout à fait grandiose, et puis surtout vous montrer que sur cette page programme il y a exactement le même pied de page que sur la page d'accueil, alors pour réaliser ça avec Muse c'est extrêmement simple puisqu'on a une notion dans Muse de Gabarit alors si vous êtes habitués à In Design et bien vous savez ce qu'est un gabarit c'est exactement la même chose ici dans Muse et c'est grâce à cela que je peux définir des éléments qui réapparaissent sur plusieurs pages. Alors la page suivante, c'est la page réservation, là vous allez trouver un formulaire de réservation ici donc, un formulaire qui contient des champs, plusieurs types de champs, tout d'abord un champ texte dans lequel je peux tout d'abord vous voyez je peux taper mon nom et mon prénom, vous avez ici un champ de type bouton radio qui me permet de choisir l'une de deux valeurs et puis ici un autre type de champ texte, un champ texte multilignes si vous faites de l'HTML on appelle ça une Text Area, et puis biens sûr le bouton Envoyer qui lui aussi est interactif et lui aussi contient plusieurs états, un état normal, un état survolé. Alors si vous testez ce formulaire chez vous,et bien vous risquez d'avoir un message d'erreur puisque pour que ce type de formulaire fonctionne convenablement, et bien il faut que le site soit hébergé sur un serveur puisqu'on a besoin d'un petit composant PHP pour traiter donc la demande particulière, la requête qu'on appelle ça générée par ce formulaire. Voila donc ne vous étonnez pas d'avoir un petit message d'erreur si vous testez ce formulaire, c'est tout à fait normal. Alors la dernière page ici c'est la page contact, et là vous allez voir d'autres widgets de Muse en plein action dont notamment un widget qui me permet de mettre ici un Google Maps sur ma page, et puis une version un petit peu plus générique un peu plus allégée du formulaire de contact qui vous voyez est interactif avec des éléments qui possèdent plusieurs états. Alors je vais revenir sur la page d'accueil pour vous montrer le comportement réactif de ce site, regardez je vais placer ma souris sur le bord de mon navigateur, et je vais modifier la largeur de mon navigateur tout ça pour vous montrer que les différent éléments alors redimensionnent et se repositionnent pour s'adapter à la largeur, à la taille, de l'écran sur lequel le site est lu. donc ici cela va me permettre de voir un peu ce qui se passerait sur un smartphone ou sur une tablette, alors je vais descendre ici et regardez les colonnes et la barre de lien, au bout d'un moment, là je vais continuer à réduire la largeur de mon navigateur, vous voyez qu'au bout d'un moment, je n'ai plus trois colonnes, mais donc les éléments qui étaient en colonnes sont maintenant les uns au-dessus des autres et puis le menu, le menu a été remplacé par cette grosse icône qui est là, alors cette icône elle est suffisamment grosse pour qu'on puisse taper dessus sur un écran tactile avec son doigt, et quand on clique, ou quand on tape sur cette icône le menu se révèle, et il est maintenant vous le voyez vertical, donc ici, voila, je peux afficher ou masquer ce menu. Donc vous voyez ici le comportement réactif de ce site, un site qui s'adapte donc au support sur lequel il est lu. Voila donc le site que nous allons créer ensemble, ce site vous est livré avec les sources de cette formation donc si vous avez accès à ces sources et bien je vous invite à prendre le temps de visiter ce site par vous même et puis surtout je vous invite à modifier la largeur de votre navigateur afin de bien vous rendre compte du comportement réactif des différentes pages.

L'essentiel de Muse CC 2015

Créez des sites web riches et dynamiques sans aucune compétence en programmation avec Muse. Gérez les plans et les calques, mettez en place une navigation entre vos pages, etc.

3h50 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :21 juil. 2016
Durée :3h50 (44 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !