Skip to main content Help Control Panel

Login   A+   A-

Documentation «   Le livre de Yacs «   Créer une identité visuelle «  

Les outils pour travailler

Previous / Next / Index

Modifier son style, refaire les habillages, tout cela ne peut se faire sans quelques outils indispensables.
Cet article peut-doit évoluer grâce à vos apports. N'hésitez pas à laisser un commmentaire ici pour nous aider à l'enrichir. En particulier, des éléments pour plateformes Mac et Linux sont les bienvenus.

En Intro

Pour rester fidèle à l'esprit du monde libre, les outils présentés ici sont majoritairement des logiciels libres. Après le libre, on va de préférence vers les gratuits. Certains nous rapportent utiliser des logiciels propriétaires et payant ! Ben on les a mis aussi ! Nul besoin pourtant de se ruiner pour avoir le site web de ses rêves ! Par contre, on vous renvoie gentiment vers les sites correspondants pour tout ce qui touche aux subtilités d'utilisation.

Nous avons adopté la classification suivante :
  • Logiciels libres : de l'open source et des licences libres, à télécharger, user, distribuer, modifier, sans retenue ;
  • Graticiels : Logiciels propriétaires mais distribués gratuitement ;
  • Propriétaires : Logiciels propriétaires et payants.
Cette liste a été construite à partir d'une question dans le forum : quels sont vos outils pour faire de Yacs "votre Yacs" ?

Editer les pages .css et .php

Il existe de nombreux éditeurs. Voici ceux qui sont utilisés par les Yacsiens.

Logiciel libre

  • Notepad++
  • Notepad2
  • Nvu
  • Gedit (sous Gnome, linux)
  • BlueFisch (linux, sous Gnome c'est sûr, sous KDE ?)
  • Scite

Graticiel

  • Crimson Editor
  • PsPad editor
  • ConTEXT
  • HTML-Kit (html)
  • TopStyleLite (spécifique .css)

Propriétaire

  • Dreamweaver (html)

Régler les css, débugger - y compris javascript

En libre

  • Webdevelopper, extension Firefox. Comporte la possibilité d'éditer directement les feuilles de styles pour faires des modifications "en direct", que l'on peut ensuite rapatrier pour de vrai.
  • Firebug, extension Firefox. LE couteau suisse du développeur, excellent pour les codes, voire mieux que webdeveloppeur, mais aussi et surtout, pour ceux qui y mettent les doigts, pour le javascript. Un must à utiliser sans aucune retenue.

Les images

Logiciel libre

  • The Gimp. équivalent de photoshop. Requiert un bon temp d'adaptation (bon, photoshop aussi, alors...)
  • Gestionnaire d'images gThumb, sous Gnome, linux, permet le redimensionnement rapide (pas par lot)
  • Gcolor2, sous Gnome, Linux, une gestion rapide et très pratique des couleurs (repiquer une couleur sur une fenêtre ouverte, enregistrer ces couleurs pour les réutiliser...)
  • extension ColorZilla pour Firefox - marche mieux sous windows : pour repiquer n'importe quelle couleur sur la fenêtre en cours du navigateur

Graticiel

  • Photofiltre (retouche, redimensionnement, filtres)
  • IrfanView (visualiser et redimensionner par lot)
  • PicSizer (redimensionner les images par lot)
  • Xnview (Visualisation, retouche et conversion de fichiers image)

Propriétaire

  • Photoshop
  • Photofiltre studio (version shareware de photofiltre avec gestion des calques)

Navigateurs

Les navigateurs, il y a ceux que l'on utilise pour "tout le temps", et ceux avec lesquels on vérifie que notre site passe bien. Pour faire court, l'immense quasi unanimité va à l'utilisation des libres, et le reste, c'est pour la vérification. Et c'est loin d'être inutile, croyez-nous, c'est même carrément indispensable et parfois source d'arrachage en règle de cheveux ! Allez, courage, on est tous avec vous !

Logiciel libre

  • Firefox, avec ses extensions et sa gestion des onglets, y'a pas plus pratique pour tout avoir sous la main.
  • Konqueror (Linux)
  • Mozilla

Graticiel

  • Internet Explorer 6
  • Opera
  • Safari (mac)

Les serveurs locaux

Si vous faites héberger votre site chez un hébergeur, en mutualisé ou dédié, vous vous adaptez à ce qu'il propose. Mais si vous voulez installer votre site en local, sur une de vos machines, il va vous falloir quelques outils pour cela. Les environnements "tout prêts" (ou presque) comportent la base : serveur Apache, base de données MySql, langage(s) de programmation (Perl, Php ou encore Python). Tous les environnement proposent au moins Apache, Mysql et Php (AMP donc ). Ici, on parle de libre.
  • EasyPHP pour windows
  • XAMPP, multiplateformes, très complet
  • Lamp (avec L comme... linux bien sûr !)
  • ZMWS (comme ZazouMiniWebServer)
Pour installer Yacs sur EasyPhp, consultez la documentation ici.

Vous trouverez dans cet espace installation de la documentation tout un tas d'informations utiles pour l'installation de Yacs dans divers cas de figures.

Les outils pour la gestion des serveurs distants

En local, on dézippe Yacs et on le met dans un répertoire de sa machine, ça va vite et on maîtrise le copier-coller ou le déplacement.

Pour aller installer et mettre à jour votre yacs préféré chez votre hébergeur ou sur un autre serveur distant, il faut être en prime équipé avec de quoi faire le travail de transfert. Rien de bien compliqué à cela.

Ici encore, les outils sont nombreux, et leurs fonctionnalités ou les buts pour lesquels ils sont utilisés diffèrent.

Petite précision avant de commencer sur la notion de "connexions sécurisées" :
c'est en fait l'utilisation de certificats SSL/SSH.
Tout dépend du serveur, s'il accepte des connexions TLS (remplaçant de SSL), SSH1 ou SSH2. Dans les 3 cas, ça s'appelle du SFTP (voir les infobulles)

Pour le transfert FTP = Manipulation à distance de fichiers

  • FileZilla, de la fondation Mozilla, pratique et efficace. Supporte les transferts sécurisés si vous en avez besoin. Un classique, libre.
  • Gftp sous Linux (Gnome).
  • FireFtp : une extension de Firefox, qui s'ouvre dans un onglet. Peut être pratique pour des vérifications ou petits transferts. Un peu trop lent pour les grosses manoeuvres.

Pour la gestion de serveurs distants = Transfert FTP + Ligne de commandes (accès au shell à distance)

  • Total Commander (le préféré de Bernard si j'ai bien tout suivi ). C'est un manipulateur de fichiers. Recherches, Comparaison de fichiers, Synchro de répertoires, Travail sur archives, client FTP/FXP, etc.
  • WinSCP : un client SFTP pour Windows comme Filezilla mais sous la forme Norton Commander ou Explorer.
  • PuTTY : un client SSH, Telnet, rlogin, et TCP. Il permet de faire de la ligne de commandes sécurisée sous SSH.

Les "zipeurs-dézipeurs"

Voilà donc un type d'outil absolument incontournable, ne serait-ce que pour utiliser l'archive de Yacs que vous avez téléchargé à cet endroit là.

Tout le monde a entendu parler du format propriétaire zip et du logiciel propriétaire qui va avec. Mais point besoin de vous ruiner ou de vous mettre dans l'illégalité pour vos archives :
  • 7zip, un libre très performant, supportant un très grand nombre de formats de compression. Le format 7zip étant pour sa part impressionnant d'efficacité.
  • IZarc. J'ai pas testé ni trouvé d'infos plus précises, mais pas sous licence libre, bien que gratuit (? open-source ?). Très nombreux formats suportés également.


Je fais l'impasse sur les logiciels propriétaires payants : pas besoin.

Pour aller plus loin

Voilà, j'arrête là pour les outils nécessaires aux objectifs de cette section (à savoir l'habillage de votre site).

Je n'ai pas répertorié tout ce qui existe, loin de là, donc allez-y de votre contribution pour que l'on complète l'article. De même si vous repérez une indispensable mise à jour.

Si vous cherchez des informations sur les feuilles de styles, le html... et tout ce qu'il faut pour habiller votre yacs - maintenant que vous avez les outils - voyez Permiers pas avec les feuilles de style.

Par ailleurs, si vous avez des infos plus précises à demander ou à donner sur les outils : c'est juste en dessous, le lien pour ajouter un commentaire !

Notes

Ghjmora on May 4 2006 - #
Une question, marginale, me brûle le clavier....

comment fait-on pour réaliser ces magnifiques  listes repliables et dépliables?
Agnès on May 4 2006 - #
C'est dans la liste des codes Yacs cher ami ! il faut simplement encadrer le texte à "plier" avec la balise folder=le titre que tu veux voir apparaître ...ici le texte vu quand on déroule... puis /folder. Rappel : les balises s'encadrent avec des crochets [folder= quelque chose] ton texte et la balise fermante.

Voilà, pas plus ! Fastoche !




Agnès
Il n'y a pas de problème, que des solutions.
Ghjmora on May 4 2006 - #
Click to fold or pack chouette alors!


Click to fold or pack Yacs = encore plus!


merci Agnès
Elrik on May 4 2006 - #
" extension webdevelopper pour Firefox. Attention, pas de mise à jour de cette extension pour la version 1.5 de Firefox à c't'heure... ça va sûrement venir ! "


Je n'ai même pas vu la différence ! Chez moi, (firefox 1.5.0.3), webdevelopper tourne sans problème.

Tu n'as pas parlé des serveurs "en local" : timidité ?

Click to fold or pack Et plus
Cordialement.


La perfection est atteinte, non pas lorsqu'il n'y a plus rien à ajouter, mais lorsqu'il n'y a plus rien à retirer. (St Exupéry)
Agnès on May 4 2006 - #
Et bien pour ma part, depuis que je suis passée à la 1.5, l'extension a été désactivée, et firefox ne m'en trouve pas à jour (à ce qu'il dit... J'avais tendance à le prendre un peu au sérieux !). Ceci dit, j'ai même pas cherché à la réinstaller... je devrais peut-être essayer, au caz-ou

Pour les serveurs en local, et le reste, c'est par manque de temps... ça va viendre, ça va viendre !


Agnès
Il n'y a pas de problème, que des solutions.
Airport on June 12 2006 - #
Dans les outils du débutants, et pour que la panoplie soit vraiment complète, une courte liste de sites utiles me semble intéressante.

Exemples

HTML, CSS ...:

SELFHTML

site du zéro

etc...


La perfection est atteinte, non pas lorsqu'il n'y a plus rien à ajouter, mais lorsqu'il n'y a plus rien à retirer. (St Exupéry)
Agnès on June 12 2006 - #
Tu as raison, ces informations sont importantes. Elles sont toutefois traitées dans un autre article (premiers pas en css). Je vais rajouter un lien vers cette page.

Merci.


Agnès
Il n'y a pas de problèmes, que des solutions.

Previous / Next / Index

Rate this page
Posted by Agnès on May 4 2006, page edited by Agnès on Oct. 17 2007, (popular)