- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte personlive_helpToutes les questions
Jeed0
4 janvier 2023 - 04 janvier 2023 à 12:01
checkConversation résolue
7 réponses
Partage sur Github en preservant les données confidentielles de settings.py
Bonjour,J'ai terminé le mini-site avec pycharm, comme indiqué en suivant le tuto à la lettre. J'aimerai le refaire, ou faire les lecons suivantes avec un depot github.Github est plus qu'un …
00:00:00 :Dans cette vidéo, je vais vous montrer comment j'ai assez rapidement mis en place cette paged'accueil sur le site avec un peu de CSS et une image de fond également que vous voyez en cemoment. Donc tout de suite, je vais vous montrer ce que ça donne au niveau du HTML et du CSS. Je
00:00:16 :ne vais pas écrire toutes les lignes avec vous, je les ai déjà écrites parce que je trouve que çan'a pas grand intérêt d'écrire chaque ligne séparément devant vous, ce n'est pas une formationaxée sur le CSS. Donc je voulais juste arriver à un résultat un peu plus sympathique que ce
00:00:29 :qu'on avait jusqu'à présent et dans cette vidéo, je vais donc vous montrer comment j'ai réussi àfaire ce résultat qu'on a actuellement avec un peu de HTML et de CSS. Donc au niveau de mon fichier
00:00:39 :HTML, je n'ai rien changé au début, j'ai bien le load static qui me permet d'accéder à monfichier CSS. J'ai fait quelques changements ici, donc j'ai rajouté une div avec une classe
00:00:50 :container qui va me permettre de styliser cette div dans mon fichier CSS et ici j'ai légèrementmodifié le contenu. J'ai mis un h1, un h2 et un h3 avec bienvenue sur mon site. On affiche ensuite
00:01:02 :la date avec le format jour, le mois et l'année et j'affiche également l'heure. Donc là ici j'aiutilisé encore une fois le filtre de template date et je lui ai passé l'heure et les minutes et icivous voyez que j'ai rajouté un slash h. Donc ça en fait c'est tout simplement pour échapper le h
00:01:19 :ici parce que si on met juste h, en fait h c'est un symbole qui signifie quelque chose. Si je mesouviens bien ça correspond aux heures mais sans padding, donc par exemple s'il est une heure del'après-midi ça va afficher 1 et non pas 0 1. Donc moi ce que je voulais c'est mettre ici
00:01:32 :vraiment la lettre h et non pas l'information de l'heure. Donc pour ce faire j'échappe ce caractèreavec un slash en lui disant donc que ce caractère doit être considéré comme un h, donc comme lalettre h. Ce qui fait qu'on a bien ici 17h43 qui est affiché. Ensuite dans le CSS et bien j'ai
00:01:48 :quelques lignes de code ici. La première c'est un import qui me permet d'utiliser une policed'écriture. Donc cette police d'écriture je l'ai trouvée sur Google Fonts. Dans mon cas j'ai
00:01:58 :pris une police qui s'appelle la police Lato qui est une police d'écriture assez populaire et j'aipris le Régular 400 ici. Donc pour l'ajouter vous cliquez ici sur Select this style et vous allez
00:02:09 :tout en haut à droite cliquer sur View your selected families, donc l'icône ici. Et vousallez avoir les liens ici pour soit l'importer depuis le HTML soit dans un fichier CSS avec leat import. Donc c'est cette ligne ici donc sans les balises style que je copie et que je mets à
00:02:25 :l'intérieur de mon fichier CSS. Et vous avez ensuite l'indication qui vous montre commentutiliser cette police d'écriture donc avec la chaîne de caractère Lato avec un L majuscule.
00:02:34 :Donc c'est ce que je fais ici dans mon fichier, j'importe la police d'écriture et ensuite jespécifie que pour mon HTML ebody je veux avoir le font family donc la police d'écriture quiutilise Lato. Et si cette police d'écriture n'est pas trouvée on revient sur un sans serif
00:02:50 :normal. Ici je set la hauteur du HTML et du body à 100%. Je remets à zéro les marges et les bordsdonc margin et border à zéro. Donc ça c'est ce qu'on appelle un reset du CSS puisque par défaut
00:03:02 :il va y avoir des marges qui seront présentes sur votre site et moi dans ce cas ci je ne veuxpas avoir de marge donc je remets tout ça à zéro. Dans le body j'utilise une image que j'ai
00:03:11 :téléchargée qui est disponible et libre de droit donc cette image background.jpg qui estdirectement dans le fichier CSS donc dans nos dossiers statiques ici dans doc blog et cetteicône donc je l'affiche dans le body avec background image en utilisant url et là vu quel'icône est au même niveau que mon fichier style.css il me suffit de mettre le nom de l'image
00:03:31 :donc background.jpg en chemin relatif donc puisque on est dans le même dossier ici. Ensuite je faisun background position center, je ne veux pas répéter l'image et j'utilise background side àcover pour que ça prenne toute la largeur de mon écran. Ensuite on a le container ici donc là
00:03:48 :encore je spécifie une hauteur de 100% pour pouvoir bien aligner mon contenu sur le milieude la page. On met là aussi les paddings et les margins à zéro et on va créer ce qu'on
00:03:58 :appelle un container flexible donc un flex container en anglais avec display flex. On metla direction en colonne donc ça c'est pour avoir les trois éléments ici qui sont sur la hauteur etnon pas sur la largeur donc pour avoir le h1, le h2 et le h3. Ensuite on a ici les alignements
00:04:16 :donc align items et justify content qui sont à center ce qui me permet d'avoir l'alignement surl'axe horizontal et vertical. On grossit un petit peu la police d'écriture avec font size qu'on
00:04:26 :met à 2rem donc ça c'est relative. On a ensuite une couleur de blanc pour la police d'écriture etj'ai mis un background color en noir avec une opacité de 0,35 sur mon fond. Donc ça me permet
00:04:39 :de détacher un peu mieux la police d'écriture on pourrait même peut-être l'augmenter jusqu'à 0.5et si j'actualise on aura bien ici le fond qui va être un peu plus sombre qu'auparavant et égalementl'heure qui se met à jour ici donc il est actuellement 17h50. Vous remarquerez si vous
00:04:54 :regardez tout en haut à droite de mon écran que moi il est 18h50 au moment où j'enregistre alorsc'est normal puisque en fait on a une heure de décalage. Par défaut le serveur de Django va être
00:05:05 :basé sur l'heure GMT qui est l'heure de la zone autour de Londres donc Londres c'est uneheure de moins que la France donc de Paris là où j'enregistre actuellement et donc c'est pour çaqu'on a ce décalage horaire c'est tout à fait normal et vous pensez bien qu'il est bien entendu
00:05:19 :possible de modifier cet horaire pour qu'on ait le bon fuseau horaire. Je ne vous montrerai pas çadans cette formation mais si jamais vous souhaitez changer le fuseau horaire de votre serveur c'esttout à fait possible avec Django. Donc voilà pour cette petite partie qui nous permet d'avoir un
00:05:33 :rendu assez sympathique, d'avoir quelque chose qui est aussi responsive puisque si je change la taillede ma fenêtre vous voyez que tout reste centré correctement et que l'image change bien de tailleaussi pour pouvoir s'adapter à la largeur de ma fenêtre. Donc voilà pour cette partie dans laquelle
00:05:48 :je vous ai fait un aperçu rapide de ce qu'on pourrait faire en CSS avec notre site qui estdonc dynamique avec l'heure qui se met à jour ici puisqu'on l'a récupéré dans notre vue et donc unrendu assez sympa pour ce petit site créé avec Django. Et avec cet exemple j'espère que vous voyez
00:06:04 :que faire un site web ce n'est pas que ce qu'on appelle donc le back-end puisque actuellementDjango ce que ça nous permet de faire c'est toute la partie back donc c'est à dire par exemplerécupérer la vue, les routages du RL et envoyer des informations à la vue comme on le fait ici
00:06:17 :en affichant l'heure. Donc ça c'est toute la partie back-end mais il y a toute la partie front-enddonc ce qu'on appelle le front-end c'est ce que vous voyez qui là est en fait tout simplement duhtml, du css, éventuellement du javascript donc tout ça c'est complètement différent de Python.
00:06:33 :Vous voyez que dans le template html on peut très bien inclure des variables on va pouvoirégalement faire des boucles ou des structures conditionnelles donc grâce au langage detemplate donc de gabarit de Django on va pouvoir avoir cette logique à l'intérieur du fichier htmltout comme on pourrait le faire par exemple avec d'autres langages comme du php ou du javascript
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.