docs.jmini.fr

Les docs Jmini

Les docs jmini regroupent mes notes personnelles plus ou moins détaillées que je souhaite partager. Compilations de liens, tutoriels, réalisations pense-bêtes, morceaux de codes...
Autant d’informations que je retrouve sur mon site et qui pourront vous être utiles. En savoir plus...



Publié par Jérémie Bresson dans les docs Jmini (http://docs.jmini.fr) à l’adresse (http://docs.jmini.fr/pas-a-pas/editer-html-php-mac-os-x).


Dernière mise à jour : Jeudi 2 août 2007

Éditer des pages HTML/PHP sous Mac OS X

J’ai écrit cet article pour des personnes qui veulent retoucher de manière ponctuelle des pages HTML ou PHP sur un serveur FTP. L’idée est d’utiliser des outils gratuits et open source. Il ne s’agit de pas créer un site complet, ni de paramétrer entièrement les logiciels.

On part du principe que les différents logiciels (en l’occurrence Cyberduck et Smultron) sont déjà complètement paramétrés. Il s’agit donc d’un pas à pas illustré, sur une configuration toute prête…

1) Se connecter au serveur FTP

La première étape consiste à se connecter au serveur qui héberge les pages internet. La majorité des hébergeurs proposent un accès FTP pour réaliser cette fonction. (ce n’est pas le cas des pages web stockée sur un compte .Mac) On utilise le logiciel Cyberduck qui a l’avantage de proposer une approche graphique proche du Finder de Mac OS X. De plus, le logiciel se charge tout seul du téléchargement (sens download et upload) et de l’édition.

Icone de Cyberduck

Icone de Cyberduck

Ouvrir le logiciel Cyberduck dans le dossier application [A].

Ouvrir un signet dans Cyberduck

Ouverture d'un signet dans Cyberduck

Double-cliquer sur le serveur dans la liste des signets [B]. Normalement le contenu du premier répertoire doit s’afficher dans la fenêtre principale [C].

Si la liste des signets n’est pas visible, il suffit de cliquer sur l’icône « Signets » dans la barre d’outil [D]. Les signets sont également listés dans le menu du même nom [E].

Ouvrir un signet par le menu

Ouverture d'un signet par le menu

2) Localiser la page

Visualisation de la page dans un navigateur

Visualisation de la page dans un navigateur

Sur le site web, il faut repérer la page que l’on veut éditer [F]. Chaque slash « / » indique un dossier. Ainsi le fichier correspondant à l’URL : « http://www.________.fr/site/association/organisation.php » est le fichier « organisation.php » dans le dossier « association » lui même dans le dossier « site ».

Pour accéder au fichier dans Cyberduck, il suffit de double-cliquer sur chacun des dossiers.

Dans le pop-up menu [G], on peut vérifier le répertoire courant.

Manipulation dans Cyberduck

Manipulation dans Cyberduck

Ainsi, on est sûr que le fichier « organisation.php » [H] est le bon.

Remarque : lorsque l’on indique l’url d’un dossier (http://www.________.fr/site/), c’est le fichier « index.html » ou « index.php » de ce dossier qui est appelé. La preuve ? http://www.google.fr/ affiche la même page que http://www.google.fr/index.html

3) Éditer la page

On choisit d’utiliser le logiciel Smultron qui a l’avantage de faire de la coloration syntaxique : le code HTML apparaît de manière coloré.

Rien de plus simple pour éditer la page, il suffit de sélectionner le fichier dans la liste [I] cliquer sur l’icône « Édition » [J] (ou par la barre de menu : Fichier > Editer avec > Smultron)

Cyberduck se charge de télécharger le fichier et de l’ouvrir dans le logiciel Smultron.

Code de la page dans Smultron

Code de la page dans Smultron

Il suffit de faire les corrections voulues.

La syntaxe est en HTML ce qui implique que la structure de la page est décrite par des balises (qui apparaissent en bleu dans Smultron [K]). Il existe de très nombreux tutoriels pour apprendre les rudiments du HTML. J’attire également votre attention sur le fait qu’en toute rigueur, les caractères spéciaux sont codés par des entités [L] (« è » s’écrit en toute rigueur : « &egrave; »). Il existe également sur internet des tableaux de correspondance «caractère spécial» <-> «entité» (exemple : Liste des entités de caractères ISO 8859-1 (Latin-1)).

4) Télécharger les modifications sur le site

Manipulation dans Smultron

Manipulation dans Smultron

Pour retransférer la page sur le serveur, rien de plus simple : il suffit d’enregistrer le document en cliquant sur l’icône « Enregistrer » [M] (ou par la barre de menu : Fichier > Enregistrer, ou tout simplement Pomme-S). Cyberduck se charge de tout : il remplace l’ancien fichier par le nouveau que vous venez d’éditer.

On peut voir si des modifications ont été effectuées depuis le dernier enregistrement. Si c’est le cas, l’icône du fichier dans la liste de gauche prend une couleur orangée [N].

Dans l’exemple, on ajoute un nouveau paragraphe contenant le texte : «Nouvelle équipe en cours d’élaboration» [O].

5) Vérifier les modifications

Observation du résultat

Observation du résultat

Pour voir les modifications, il faut bien sûr retourner dans le navigateur… N’oubliez pas de recharger la page en cliquant sur l’icône en forme de flèche ronde [P]. (ou par le menu : Présentation > Recharger la page ou Pomme-R)


Si la modification n’apparaît pas :
  • Cela peut être dû au cache du navigateur, n’hésitez pas à redemander l’actualisation de la page (étape 5).
  • Cela peut aussi être dû à un oubli ou a un mauvais transfert des modifications, dans ce cas il suffit de refaire l’étape 4 (ou dans certain cas la 3 et 4 en ayant pris le soin de refermer le fichier dans smultron avant).
  • Plus rare, mais déjà observé chez certains hébergeurs : il y a une mise en cache des pages côté serveur. Il faut attendre une ou plusieurs minutes avant de recevoir dans le navigateur la page modifiée (dans ce dernier cas, il n’y a pas grand-chose à faire à part attendre, mais encore une fois c’est un cas beaucoup plus rare que les deux premiers cas).

Voir aussi

Les mots-clés de cet article : ,

Cet article est dans la catégorie : Pas à pas


© 2007-2024 Jérémie Bresson | jmini.fr | Ce site est sous licence Creative Commons - en savoir plus