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.

Créer un site web avec Dreamweaver CC

Placer, voiler et synchroniser les fichiers

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Il ne vous reste plus qu'à publier les fichiers nécessaires en ligne. Par la suite, vous devrez améliorer sans cesse les contenus. Pensez également à optimiser les images dans TinyPNG.
05:25

Transcription

Il ne nous reste plus qu'à synchroniser et à placer nos fichiers en ligne. Pour cela on va utiliser le client FTP, bien que cela ne soit pas nécessaire, tout peut être fait à partir de là, les raccourcis clavier sont placés directement sur le raccourci clic droit de la souris. Mais si on passe sur le client FTP, on est bien mieux servi. Ici on est bien sur le serveur distant, on est connecté. On peu se déconnecter de là ou se connecter à partir de là. Tout est impeccable, on va pouvoir utiliser soit les raccourcis ici soit les raccourcis de synchronisation soit directement sélectionner nos fichiers et les placer de manière individuelle. Puisque tous ces éléments-là ne servent pas, on va pouvoir les voiler ici. Et donc, on va a uniquement utiliser « index.css ». Je me mets sur « index.css » et je fais « Placer ». Et à ce moment là, il me place et le dossier, et le fichier, c'est-à-dire tout ce dont il a besoin. Au niveau du document html, on n'a besoin de rien puisque tout était fait ici pour pouvoir développer notre site, on va pouvoir le voiler. Au niveau des « images » bien sûr qu'on va devoir tout livrer, au niveau des « webfonts », bien sûr qu'il va falloir tout livrer également. Au niveau « htaccess », on va pour l'instant ne pas le mettre, on va mettre simplement « indexreel » et « indexvideo » et on va placer tous ces éléments-là qu'on va faire « Placer ». On laisse le temps au client FTP de pouvoir travailler. Vous pouvez si besoin en afficher le détail et agrandir la boîte afin de pouvoir mieux suivre. Ici vous voyez que tout est en train de se transférer. Par contre, vous pouvez en même temps suivre depuis le petite flèche, qui fonctionne, qui vous dit voilà où j'en suis, ce qui a été fait, ce qui est en cours, ce qui est en train. On voit que la progression se fait suffisamment rapidement, le plus long risque d'être les font parce qu'elles sont quand même assez lourdes, et on va voir justement que la compression va pouvoir nous y aider. Et puis une fois que tout va être terminé, on peut également suivre à partir de cet élément-là, tout ce qui est en cours, le fichier en cours de transfert s'affiche dans la partie basse de la palette des fichiers. Et voilà, on va pouvoir laisser travailler. Pour l'instant, ce qu'on va faire, c'est se connecter sur un navigateur. Voilà depuis le site ce que l'on peut voir donc tout est passé. Apparemment tout a été chargé, on voit bien que les animations fonctionnent, tout est nickel. Ce qui m'intéresse maintenant c'est de voir depuis le mode d'inspecteur et sur la partie « Network » de voir en en gros, il va falloir recharger. Le problème est que si on recharge, on va se dire on risque de tomber dans quelque chose qui a été récupé sur le cache. Donc grâce soit à ce petit icône qui est un outil de Chrome qui me permet de vider le cache, soit depuis un Clic droit Clear browser cache, soit en passant par « Disable cache », pour être sûr que le cache soit désactivé. Une fois que ceci est fait, je recharge ma page et l'intégralité du document va se charger et on me dit que je viens de télécharger 5,9 mégabytes de transfert pour récupérer l'intégralité de ces documents. Ce que je vous propose de faire maintenant, c'est de venir depuis Dreamweaver cette fois-ci et puis récupérer le fameux htaccess ici, vous prenez htaccess, et vous faites « Placer » tout simplement. On va retourner dans Chrome. Dans Chrome on nous disait qu'on avait 34 requêtes, 5,9 Mega. Temps de chargement, 4,3 secondes, 5,9 méga. On vide le cache. Une fois que le cache est complètement vidé, on sait qu'on a le htaccess maintenant qui va être récupéré, qui va nous permettre d'optimiser cette navigation, parce que si on regarde du côté du Network, chaque fois qu'on prend un fichier comme par exemple ici, le indexreel, on s'aperçoit que dans la requête qui est donnée, il dit, moi j'accepte l'encodage « gzip, deflate, sdch ». Donc il dit moi, il n'y a pas de souci, j'accepte tout ça si tu m'envoies du deflate, je le récupère. Donc le cache est bien vidé. Parfait. On repasse sur la partie globale et on actualise notre page. On a gagné 100 kilos. On les a gagné au niveau des fonts, voyez ici, on a de la compression. On a le poids réel qui est de 95 et on a chargé 67, 129, 91, pourquoi ? Tout simplement, c'est le fichier qui a été optimisé au niveau des typos. Mais au niveau des images, tous nos PNG font leur poids réel parce qu'ils n'ont pas été moulinés dans TinyPNG. Il suffit de les passer dans TinyPNG pour avoir un résultat bien plus probant. Donc maintenant si on fait une modification du côté de indexreel quelle que soit la modification que l'on va faire, par exemple, on va rajouter un petit point tout simplement, à cet élément-là. Si je viens sélectionner l'ensemble du site et que je dis par exemple Clic droit Synchroniser, au moment où on synchronise on va dire Fichiers locaux sélectionnés, donc tous les fichiers qui ont été sélectionnés. On va demander de « Placer » les fichiers les plus récents, et on va faire « Aperçu ». Et là dans « Aperçu », il me dit indexreel est différent veux-tu le placer ? Oui. Et donc là on va pouvoir maintenir le site de cette manière. Donc je vous laisse compléter ce site. Je vous laisse optimiser les images avec TinyPNG, et voir en retour au niveau de votre production sur ce premier site réalisé avec Dreamweaver.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 janv. 2017

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 !