html-css80

Préparer son atelier de développement web

Problématique

Cette fiche est commune à tous les langages utilisés : Html5, Css3, JavaScript, PHP.

Le navigateur ne sait interpréter que les 3 premiers : Html, Css et JavaScript.

Le code HTML sera construit à la main ou par un serveur, en programmation PHP :

  • Css : Des fichiers de style peuvent être liés aux pages Html pour embellir leur présentation.
  • JavaScript : Des fichiers de script peuvent être ajoutés pour des effets spéciaux, une interaction avec l'utilisateur, etc.

Le développeur (vous) doit pouvoir, simultanément :

  • Éditer une ou plusieurs pages Html.
  • Éditer un ou plusieurs fichiers Css.
  • Éditer un ou plusieurs fichiers JavaScript.
  • Consulter des documentations en ligne (plusieurs onglets).
  • Afficher sur 3 navigateurs différents (au moins) le résultat de son travail.
  • Prendre des notes bien organisées au fur et à mesure de son apprentissage.

Enfin, si son travail doit être publié sur internet, il devra en outre :

  • Mettre à jour son site distant par synchronisations manuelles ou planifiées.
  • Tester son site avec d'autres ordinateurs, tablettes, smartphones et autres appareils connectés.

 

Les solutions

La problématique ci-avant exposée est la même pour tous.

Par contre, on trouvera autant de solutions que de développeurs : chacun a ses trucs, son organisation, etc.

Dans le cadre d'une formation de groupe, il sera nécessaire d'établir des conventions pour simplifier la tâche du formateur et les échanges entre tous.

Voici les conventions proposées. CheckList : imprimer ce qui suit, puis cocher chaque ligne

Programmes à utiliser : les installer si absents.

  • Navigateur Mozilla Firefox : Affichage des pages web + outils pour le développeur (F12).
  • Navigateur Google Chrome : Affichage des pages web + outils pour le développeur (F12).
  • Navigateur Internet Explorer : Affichage des pages web + outils pour le développeur (F12).
  • Sublime Text 3 : Édition des fichiers Html, Css, JavaScript, texte.
  • Programmes pour documents élaborés : traitement de texte, tableur, pdf, édition d'images, ...
  • FreeMind : Prises de notes.

 

Organisation des fichiers : .html, .css, .js, documents (.txt, .docx, .xlsx, pdf, ...), images (.jpg, .png . gif)

  • Si l'ordinateur ne vous appartient pas (salle de cours, ...), utilisez un disque dur externe personnel.
    • Vous pourrez ainsi travailler sur d'autres ordinateurs, avec le même disque.
  • Créer si non existant le dossier 'www' à la racine d'un de vos disques : C:, D:, Clé usb, DD externe, etc.
    • L’appellation 'www' s'appliquera au disque que vous aurez choisi, sans préciser sa lettre (C:, D: ou autre)
    • Dans ce dossier, créer quelques dossiers qui contiendront les exercices : exe001, exe002, ...
    • Dans le dossier 'www\exe001' créer les dossiers 'css' et 'img'
      • Lorsque le besoin s'en fera sentir, en cours de progression, on ajoutera les dossiers 'js', 'fonts' et 'files'
      • Évidemment, pour des besoins d'organisation, ces dossiers pourront contenir des sous-dossiers. Les dossiers exe002 et suivants seront complétés au fur et à mesure.
  • Sur le même disque dur, à la racine, créer si non existant le dossier 'doc'
    • Dans ce dossier, créer les dossiers 'css', 'html', 'javascript' ... pour l'instant 😉
    • Ces dossiers vont contenir des documents, des notes, etc.
    • Ils vont évoluer pas à pas au cours de la progression.
    • Chacun pourra les organiser à sa convenance (les prises de notes étant personnelles)
  • Vérification : à la racine de votre disque, seuls 2 dossiers seront utilisés : 'doc' et 'www'
    • Ils sont indépendants, le dossier 'doc' étant complètement inutile au fonctionnement de vos sites.

 

Paramétrage des navigateurs :

  • Créer le fichier 'www\exe001\test.html', vide.
  • Double-cliquer dessus : Le navigateur par défaut doit s'ouvrir, en affichant une page toute blanche.
  • Tester l'outil de développement sur les 3 navigateurs (F12 ou accès par menu)
    • Vérifier qu'il peut s'ouvrir en bas, à droite ou détaché.

 

Sublime Text :

  • S'assurer d'avoir la version 3.
  • S'assurer qu'il apparaît dans le menu contextuel des fichiers :
    • Clic droit sur le fichier précédemment créé (www\exe001\test.html)
    • On doit avoir dans le menu : 'Open with Sublime Text'
    • Si ce n'est pas le cas, télécharger ce fichier de réparation, puis l'exécuter.
      • Attention, certains navigateurs ajoutent .txt au nom du fichier téléchargé.
        • Dans ce cas, retirez cette extension manuellement avant de l'exécuter.
        • L'extension du fichier doit être .reg
        • A ce jour Le navigateur Chrome fonctionne correctement.
  • Vérifier qu'en double-cliquant sur un fichier '.txt', celui-ci s'ouvre dans sublime text.
    • Si tel n'est pas le cas, corriger en modifiant l’association des '.txt'
      • Panneau de configuration > Programmes > Toujours ouvrir un type fichier ... > Trouver .txt > Bouton 'Changer le programme' > Choisir 'C:\Program Files\Sublime Text 3\sublime_text.exe'
  • Vérifier que les paramètres personnalisés ont bien été installés.
  • Créer son propre thème si aucun de ceux proposés ne convient.
  • Vérifier que le plugin 'emmet' est installé :
    • Ouvrir la page 'www\exe001\test.html' dans sublime text, elle est vierge.
    • Taper ! suivi de l'appui sur la touche Tab : la magie opère !

 

FreeMind : Notes bien organisées.

  • Créer 2 cartes mentales : 'Html5' et 'Css3'.
  • Enregistrer sous ... 'doc\html5.mm' et 'doc\css3.mm'
  • Liaisons :
    • Créer le premier nœud dans 'Html5' que l'on nomme 'Balises'
    • Créer le fichier 'doc\html\balises.txt'
    • Nous allons lier ces 2 éléments :
      • Clic sur le nœud 'Balise', puis Ctrl + Maj + K
      • Trouver le fichier 'doc\html\balises.txt' puis valider.
      • Vérifier en cliquant sur le lien que ce document s'ouvre dans sublime text.
    • Créer un nœud enfant du précédent : 'Lien web N°1'
    • Nous allons le lier à un site web :
      • Sélectionner ce nœud (clic dessus), puis Ctrl + K
      • Copier https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html
    • Créer un autre nœud, frère du précédent (et fils de 'Balises') : Lien web N°2
      • Trouver sur internet (Google) un autre site traitant du sujet.
      • Sélectionner ce nœud, puis Ctrl + K
      • Copier l'url du site, puis vérifier.
    • Notes sur les liaisons :
      • Chaque nœud possède une zone en bas de la fenêtre, pour les notes essentielles ou synthétiques.
      • Un seul lien peut être appliqué : fichier ou url. Si plusieurs liens doivent être appliqués, dupliquer ce nœud (N°1, N°2, etc)
  • Les notes ont pour but d'être consultées par une tierce personne ou par vous-même quelque temps plus tard, alors même que vous les avez oubliées.
    • Par conséquent, c'est en pensant à cela que l'organisation d'une carte mentale doit être élaborée.
    • Une carte moyenne comporte une centaine de nœuds imbriqués. Trouver l'information recherchée doit être quasi instantané.
  • Un bon exemple de carte mentale est donné dans l'aide : Menu > Aide > Documentation
    • Certains nœuds sont terminés par de petits ronds, indiquant qu'ils ont une descendance.
    • Cliquer dessus pour l'afficher.
  • Les nœuds peuvent être déplacés, réaffectés à un autre parent, réordonnés (Ctrl + flèche), etc.
  • Apprendre à utiliser cet outil est un investissement en temps très rentable.

 

0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *