La première journée d’une formation est l’une des plus importantes, autant pour les élèves que pour le professeur. Si elle est correctement abordée, elle permet de gagner un temps considérable sur l’ensemble de la formation en posant des bases solides dès le début, plutôt que de diffuser les informations de manière locale et ponctuelle.
Remise à zéro des postes
- Supprimer le contenu situé sur le bureau
- Supprimer le contenu du dossier /sites
- Supprimer les bases de données dans phpMyAdmin
- Supprimer l’historique du navigateur
Mise en place et configuration des logiciels de base
Dropbox
Afin de pouvoir travailler à la fois sur les PCs de l’école ainsi que chez vous, sans trop avoir à se soucier de récupérer les fichiers, les élèves peuvent utiliser Dropbox (déjà installé sur les postes normalemeng). Si pas de compte, en créer un. Paramétrer le compte sur le poste :
- Se loguer
- En cas de compte dropbox existant, définir une synchronisation partielle (uniquement les fichiers de cours)
- Définir l’emplacement du dossier Dropbox dans /sites afin de ne pas avoir à le déplacer plus tard lors des projets php (nécessite d’être dans le dossier du serveur local)
Il s’agit d’un gestionnaire de favoris que je recommande.
Edit 2023 : En vrai je ne tourne quasi plus qu’aux favoris du navigateur pour les liens usuels, et via ma liste de liens sous excel pour la grosse sauvegarde alakon.
La raison est que souvent on ne pouvait pas ajouter de multiples liens sur les gestionnaires.
Il permet de pouvoir utiliser ses favoris partout. Je recommande la création de dossiers à thème ( A lire, HTML, CSS, JS, PHP, Référencement, Inspiration, Veille, etc.)
Note : On peut également synchroniser les favoris via le compte google 😉
Slack
Salon de discussion asynchrone (~qui garde les messages en ligne) qui permet d’échanger et de garder les ressources / discussions à portée de main.
Je reco la création des salon suivants :
- absenceretards / Prévenez de vos retards & absences ici
- boireunebiere / Prévoir les rendez-vous au bar
- integration / Discussions sur l’intégration
- js / Discussions sur le javascript
- phpay / Discussions sur le php
- photostableau / Postez ici les photos du tableau, afin de pouvoir y accéder tout le temps, et en cas d’absences
- ressources / Partagez vos liens utiles ici, afin de pouvoir facilement les retrouver et de ne pas encombrer les autres chaînes
- sql / Discussions sur les sql, les bdds
Partager correctement du code sur slack (“+” > Code > Langage)
Penser à rajouter les emojis custom 😡
Confort de l’élève
En cas de problèmes de lisibilité, vous pouvez augmenter de la taille des polices pour le navigateur et les éditeurs de texte via le raccourci (Ctrl + “+”) ; ou affichage > zoom > +.
Ne pas hésiter également à baisser la luminosité de l’écran ou à installer des thèmes sombres (plus confortables) sur les éditeurs de textes.
Edit 2023 : Je reco les lunettes anti lumières bleues également ~gameurh
Propriété intellectuelle
La plupart du temps, les énoncés des exercices, et parfois leurs corrections, sont la propriété de l’école et/ou du prof.
N’hésitez pas à demander avant de les partager sur vos sites, réseaux ou git/svn.
Boilerplate / Projet par défaut
Checkez le concept d’un boilerplate, en faire créer avec une structure décente (index.php, dossiers css / js / etc.) puis utilisez html5boilerplate, et renommer le index.html en index.php.
Mettez en place un petit thème de base, avec des couleurs et des polices qui vous parlent.
Pour les projets php :
- Renommez index.html en index.php
- Rajoutez également un style au niveau des erreurs php
- Pensez à les afficher par défaut 😉
// Affichage des erreurs PHP
ini_set('display_errors', 'On');
ini_set('display_startup_errors', 'On');
error_reporting(E_ALL); Liens de référence :
- Exemple de boilerplate / https://html5boilerplate.com
- Couleurs jolies
- Adobe colors > trends / https://color.adobe.com/fr/trends
- Google “color trends”
- Polices google faciles à utiliser / https://fonts.google.com/featured
- Icônes > font awesome / https://fontawesome.com/
- Animer / https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons
- Edit 2023 : Pas indispensable, on peut utiliser des Emojis à la place / https://getemoji.com/
Rémi GASNIER La balise à intégrer pour avoir la dernière version de Fontawesome : <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.9.0/css/all.css”> En réalité il suffit de virer les attributs integrity et crossorigin et de remplacer le numéro de version par celle actuelle (v5.9.0) et le tour est joué. Pas la peine de donner son mail :clin_d’œil:
Raccourcis claviers & autres
Editeur recommandé : https://atom.io/ / Edit 2023 : VSCode est devenu la norme en général, sinon PHPStorm pour PHPay.
Plugin recommandé : https://emmet.io/. Edit 2023 : Plugins recos pour VSCode.
Article dédié aux raccourcis clavier
Cache
Comprendre le concept de cache.
🚨 Attention aux caches navigateurs (css/js) ET serveurs (php).
🚨 Il y a également du cache sur mobile.
Vider l’historique de navigation Ctrl + Shift + R
Edit 2023 : lorsque vous travaillez sur serveur (local via XAMP/MAMP/WAMP ou autre) ou en ligne (via FTP) une astuce pour ne pas galérer consiste à modifier le nom de fichier via GET. Ca somme ptet comme du chinois mais grosso merdo au lieu d’appeler le CSS ou le JS de manière classique
<link rel="stylesheet" href="style.css">
On l’appelle en rajoutant du gras au bout, le serveur croit qu’il s’agit d’un autre fichier
<link rel="stylesheet" href="style.css?version=2"> <link rel="stylesheet" href="style.css?date=20231203">
Après il faut le changer “à chaque fois”, mais après on peut gruger via php pour afficher soit un chiffre aléatoire très grand ; mais pour être sûr la date & l’heure affichée en dynamique font le taf
<link rel=”stylesheet” href=”style.css?timestamp=ANNEE-MOIS-JOUR—HEURE-MINUTE-SECONDE”>
<link rel=”stylesheet” href=”style.css?ts=<?= date(‘Y-m-d—h:i:s’) ?>”>
Erreurs communes
Connaissance de la console
Encore une fois, pensez à activer les erreurs php
N’hésitez pas à traduire les erreurs si vous galérez en anglais, ou à checker google / stack overflow.
Discussions / échanges
Je recommande vivement d’installer et de prendre en main des outils tels que
- Discord
- Teams
- Teamviewer
Qui sont très pratiques pour échanger à distance, notamment avec les fonctionnalités de chats vocaux et de partages d’écrans.
Et cela ne sera clairement pas perdu quand vous serez dans le milieu professionnel 😉
Voila, ça fait déjà un bon paquet de choses à voir 👀, ne vous découragez pas devant la quantité : le mieux reste d’appréhender une chose à la fois, voir de se familiariser avec une notion par jour (voir par semaine) et de les intégrer au fur et à mesure dans votre flux de travail, en prenant de bonnes habitudes.
Laisser un commentaire