Après avoir installé la dernière version de Firefox, Firefox 3, j’ai remarqué que le back-end (la partie administration appellée aussi BE) de mes installations Typo3 ne fonctionnait plus correctement.

Dès qu’on clique sur un des modules de la colonne de gauche, celle-ci disparaît. Celà serait dû à la nouvelle gestion des frames plus sécuritaires dans Firefox 3. Plus précisément, l’héritage des character sets, qui était appliqué entre frame parent et enfant ne l’est plus que si le parent et l’enfant sont chargés à partir du même serveur.

Ceci dit, j’avoue que je reste sceptique. Si c’est vraiment la cause, une installation Typo3 devrait fonctionner correctement en local, à part si Firefox détermine l’origine d’une frame à partir de critères autres que le nom du domaine.

Solution

Marc Neuhaus a développé une extension qui règle le problème le temps qu’une nouvelle version de Typo3 voie le jour.

Firefix3 backend bug fix

Il suffit de l’importer à travers le manager d’extension, de l’installer, de se déconnecter puis de se reconnecter pour résoudre le problème.

Après de multiples recherches, ce que j’ai trouvé de meilleur, pour sa flexibilité, sa simplicité et surtout sa documentation (en anglais) est JW Image Rotator. Il est Open Source et libre d’utilisation pour usage non commercial.

JW Image Rotator permet d’afficher les images contenues dans une playlist en XML au format RSS, XSPF ou ASX et d’appliquer une multitude de transitions entre elles. Il permet d’utiliser des images de type JPG, GIF et PNG, possède une variété de flashvars qui modifient le comportement du Flash, et une large API en javascript pour la communication entre le monde extérieur et le SWF. De plus, des modules pour différents CMS ont été développés pour faciliter l’installation.

Téléchargement

Page de téléchargement du JW Image Rotator…

Notez qu’il n’est pas obligatoire d’inscrire son adresse e-mail avant de cliquer sur le boutton Download JW Image Rotator. Mais il faut cocher la case d’acceptation de la license d’utilisation.

Un fois téléchargé et décompressé, le dossier imagerotator contient un fichier README.HTML que je vous conseille de lire. Il contient un exemple d’installation et un début de documentation.

Installation

L’installation de JW Image Rotator est relativement facile. La difficulté réside seulement dans la définition des chemins d’accès pour le SWF, le XML et les images.

On peut choisir plusieurs types d’intégration du SWF dans la page (Voir Embedding Flash). La technique la plus simple est d’utiliser une balise <embed> :

<embed
  src="imagerotator/imagerotator.swf"
  width="470"
  height="160"
  allowscriptaccess="always"
  flashvars="file=imagerotator/imagerotator.xml
    &transition=blocks"
/>

Cette technique a fonctionné en local, mais avec le même code et la même structure de fichiers, elle a buggé sur mon serveur et sur Internet Explorer. De plus, elle ne permet pas l’utilisation de l’API Javascript.

Une autre technique fournie avec le JW Image Rotator consiste à utiliser un script en Javascript qui intègre le SWF pour vous :

1. D’abord, définissez un DIV vide pour l’accueil du SWF

   <div id="container"></div>

2. Ensuite, insérez la librairie Javascript

   <script type="text/javascript"
     src="imagerotator/swfobject.js"></script>

3. Enfin, insérez ce code pour créer le SWF

   <script type="text/javascript">
     var s1 = new SWFObject("imagerotator/imagerotator.swf",
       "rotator","400","200","7");
     s1.addVariable("file","imagerotator/madrid.xml");
     s1.addVariable("width","400");
     s1.addVariable("height","200");
     s1.addVariable("shownavigation","false");
     s1.addVariable("transition","fade");
     s1.write("container");
   /script>

Dans cet exemple, tous les fichiers se trouvent dans le même dossier appelé imagerotator, vous devez adapter l’exemple à votre structure de dossiers. ATTENTION : tous les chemins doivent être relatifs à la page contenant le SWF. Vous pouvez utiliser un chemin absolu en cas de besoin : http://votre-domaine.com/imagerotator/…

Le XML

Un exemple est fourni avec le téléchargement : madrid.xml. Les formats possibles sont listés dans cette page du site de JW Image Rotator.

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <title>Grass by Night</title>
      <creator>Jeroen Wijering</creator>
      <location>imagerotator/image1.jpg</location>
      <info>http://www.jeroenwijering.com</info>
    </track>
    [...autres tracks...]
  </trackList>
</playlist>

Une image est contenue dans un enregistrement <track> qui contient aussi d’autres informations concernant l’image. Ces informations peuvent être affichées dans le Flash pour la navigation, la recherche…

Notez qu’un script serveur (en php, aspx …) peut être généré sur le serveur et remplacer le fichier XML. A condition bien sûr que le format généré corresponde.

ATTENTION : Là aussi, le chemin d’accès des images est la page contenant le SWF.

flashvars

Les flashvars sont les données envoyées au SWF à partir du <embed>. Un liste exaustive des flashvars possibles sont listées sur le site du JW Image Rotator.

Grâce au flashvars on peut choisir le fichier XML, le type de fondu, l’affichage ou non de la navigation…

Intéraction avec le Javascript

Le SWF du JW Image Rotator peut communiquer avec le monde extérieur grâce à une API en Javascript. Notez que pour des raisons de sécurité, cela n’est possible qu’avec la version 8+ du plugin Flash et que sur votre serveur en ligne (pas en local).

Toute la documentation requise se trouve sur le site.

Une de mes très vieilles connaissances fait un usage très avancé de Typo3. Il possède un journal et son portail, et doit pouvoir réagir à l’actualité très rapidement. Pour cela, le système de gestion de son site doit lui donner les moyens de modifier presque instantanément un emplacement sur n’importe quelle page, à partir de données diverses. Il trouvait qu’avec Typo3, la tâche était trop complexe, et prenait trop de temps.

Il s’est donc mis à chercher une solution dans d’autres CMS comme Drupal, qui parraît plus facile d’accès et plus rapide à implémenter, et m’a demandé conseil étant donné que j’avais eu la chance de piloter la réalisation de son site.

Ma réponse

J’ai regardé les comparatifs entre Drupal et Typo3. Ce qu’on en dit correspond à peu prêt à l’idée que je m’en faisais. Les 2 systèmes ayant atteint une maturité suffisante, et puisqu’il existe une grande communauté et une grande variété de modules, la robustesse et la flexibilité des 2 CMS n’est plus à prouver.

Pour moi, il reste donc 2 critères à évaluer :

1. L’objectif du site
   Je compare Drupal a une meilleure implémentation de Joomla!. Il a été conçu avant tout pour faciliter le développement d’un site avec CMS. Il est facile d’accès (autant pour le développeur que pour l’éditeur), et on peut jouer avec le code plus facilement qu’avec Joomla! qui est un peu plus bordélique. Il est parfait pour des agences de créations de sites Internet parce qu’il leur permet d’offrir très facilement une valeur ajoutée supplémentaire à leurs clients (l’édition du site et les fonctionnalités d’interaction usuelles).
   Typo3 par contre, n’a pas été conçu dans le sens de la facilité d’accès. La learning curve est bien plus longue parce qu’il veut offrir le plus de flexibilité possible en respectant au maximum les principes de programmation : séparation de la présentation du contenu, indépendance des modules… En plus, il offre des fonctionnalités avancées comme le workflow et le versioning très robustes, qui répondent aux besoins d’organisations complexes. Il permet aussi de minimiser l’édition du HTML grâce à Templavoilà, ce qui, dans un site complexe devient absolument ingérable. Le mélange du HTML et des balises propres au CMS rend le contrôle et la maintenance très difficile, j’ai essayé !
   
2. L’incertitude dans le changement de technologie
   Maintenant que ça fait 1 an et demi au moins que vous travaillez avec Typo3, vous avez largement passé le cap difficile de la learning curve. Il est dangereux de passer à une autre technologie, pas parce que vous n’y arriverez pas, mais parce qu’il faudra intégrer quelque chose de nouveau, dont vous ne connaissez pas le temps d’apprentissage, ni l’adaptabilité à la complexité de vos processus. En gros, vous risquez d’y perdre beaucoup de temps, pour un résultat incertain et une économie d’échelle qui tardera à venir.
   En plus, vous allez jongler avec plusieurs plateformes, et donc réduire votre capacité à maintenir vos systèmes. Vous risquez de tomber dans d’autres problématiques liées à la scalabilité de Drupal.

Que faire ?

Il faut surtout être sûr d’utiliser Typo3 à son max. J’ai réfléchi au problème que vous m’avez expliqué brièvement : la capacité à réagir à l’actualité en créant des nouvelles présentations de contenu. Ce qu’il est conseillé de faire, et ce que font la plupart des développeurs, ce n’est plus de penser Typo3 comme une plateforme qui permet d’inclure des extensions toutes faites ou de les adapter. Il faut créer les extensions qui correspondent à ses propres processus, avec un esprit de réutilisabilité. Typo3 est le réceptacle idéal pour ça.

Par exemple, créer une extension qui permette de choisir le contenu des tables à utiliser, la template, le CSS et le What to display (liste, single, top…), et ne laisserait donc au développeurs qu’a créer la template et le CSS à chaque fois qu’il veut un nouveau format de contenu.

Au pire, on peut toujours créer du code php qui fait une requête à la base de données pour formater et afficher un contenu quelconque, et créer une extension bidon qui l’appelle pour l’intégrer dans une page.

N’hésitez pas à faire vos commentaires…

putty

putty est un client Telnet/SSH qui permet de se connecter sur le serveur de son hébergeur directement à travers une fenêtre de commande UNIX. Votre hébergeur pourrait avoir désactivé l’accès SSH, auquel cas, demandez lui de vous l’activer. Pour moi, un bon hébergeur devrait comprendre la nécessité d’un tel outil, et vous indiquer l’URL et le port sur lequel vous pouvez vous connecter.

FileZilla

FileZilla est un client FTP Open Source léger.

7zip

7zip est un utilitaire d’archivage (compression/décompression) de fichiers sous Windows. Il permet de compresser sous les formats les plus utilisés : ZIP, GZIP, BZIP2 et TAR en plus de son propre type 7z. Il permet de décompresser les archives de type : RAR, CAB, ISO, ARJ, LZH, CHM, MSI, WIM, Z, CPIO, RPM, DEB et NSIS.

Procédure d’upload rapide

Dans la plupart des cas, j’utilise FileZilla pour uploader mes fichiers sur le serveur. Mais quand il s’agit d’envoyer tout un site, spécialement s’il est question d’un CMS qui peut contenir des milliers de fichiers, le upload peut être très lent (la vitesse de upload dépend du nombre de connexions que doit ouvrir le client FTP et non de la bande passante).

Pour cela, il est préférable de compresser le répertoire de votre site, le uploader, puis le décompresser sur votre serveur.

1. Compression : Certains hébergeur (comme le mien) ne supportent la commande unzip. Par contre, on peut utiliser le serveur pour décompresser les fichiers tar.gz. Faites attention au répertoire à compresser, pensez d’avance au répertoire de décompression.
   Utiliser 7zip. Compresser d’abord en TAR, puis recompresser le TAR en Gzip.
2. Upload : Utiliser FileZilla pour uploader l’archive .tar.gz dans le bon répertoire de votre serveur. Là où vous souhaitez qu’il soit décompressé.
3. Décompression : tar xvfz <archive>.tar.gz

Commandes fréquentes

Carte de référence UNIX/LINUX (en anglais)

Aide mémoire de l’Université Laval au Québec

• ls : lister les fichiers et dossiers d’un répertoire

  ls -l (affiche une liste avec plus d'infos)

• cd : changer de répertoire (.. est le répertoire parent). En général les fichiers du site sont présents dans /home/user/www
• mv : déplacer un dossier ou un fichier. Utilisé aussi pour renommer. Si le nom du dossier de destination existe, déplace la source, sinon, la renomme.

  mv -f source destination (pour forcer l'overwrite)

• rm : supprime un fichier ou un répertoire.

  rm -r dossier (récursive)

• vi : éditer un document avec VIM
  Carte de référence VIM
• chmod : changer les permissions d’accès aux fichiers et dossiers

  chmod -R 777 dossier (permettre l'écriture, la lecture et l'exécution d'un dossier récursivement. A utiliser pour les répertoire de uploads, de cache ou temporaires)

• chown : changer le propriétaire d’un fichier ou d’un répertoire

  chown -R nom:group répertoire (récursivement pour un répertoire)

  Voir la remarque sur les permissions serveur Web plus bas.

Remarques

Permissions serveur Web

Si votre site Internet possède des fonctionnalités de upload, et qu’il crée donc des fichiers sur votre serveur, ces fichiers auront pour propriétaire (owner) non pas votre utilisateur, mais nobody. En fait, ce n’est vous qui avez crée ces fichiers comme vous l’auriez fait en FTP ou en SSH, mais c’est le processus du serveur Web (Apache ou autre).

Ainsi, en vous connectant en SSH ou en FTP, si vous souhaitez modifier ou supprimer ces fichiers, vous risquez d’obtenir une erreur indiquant une opération non permise.

En essayant de faire un chown sur ces fichiers, nous obtiendrez encore une erreur :

chown: changing ownership of 'fichier': Opération non permise

Solutions possibles

1. Utiliser le serveur Web (donc votre site Internet) pour modifier les fichiers en questions. Vous pouvez écrire un programme, utiliser un CMS ou installer Quixplorer (un gestionnaire de fichiers en ligne).
2. Demander à votre hébergeur d’exécuter cette commande sur votre répertoire wwww, réinitialisant le propritaire de tous les dossiers et fichiers créés par le processus serveur Web.

   chown -R votre_user:votre_groupe /home/votre_user/www

TYPO3 est un système de gestion du contenu (CMS en anglais pour Content Management System) OpenSource. C’est un outil qui permet aux utilisateurs d’un site Internet de mettre à jour le contenu de leur site Internet sans recourir à un technicien. OpenSource est traduit par Logiciel Libre en français, il est donc totalement gratuit et son code source est accessible par n’importe qui (voir typo3.fr, typo3.com et typo3.org). Il est réputé pour être le CMS libre le plus complet, mais il reste difficile d’accès pour les développeurs débutants. Mais une fois maîtrisé, il crée une économie d’échelle extraordinaire.

Pour vous donner une idée de sa puissance, voici ce qu’écrit, sans honte et sans retenue, le créateur de TYPO3 (Kasper Skarhodj) dans sa documentation. Le paragraphe a été pris dans un tutoriel pour débutants :

Traduction libre

J’approuve totalement !