Scripts de partage et de gestion de fichiers en ligne

Hop, on reprend les mémos.

Comme d’habitude, pour répondre à la demande d’un client, j’ai cherché un script à héberger qui permette le partage et la gestion de fichiers en ligne, de préférence avec des comptes utilisateurs et la possibilité de pouvoir gérer des dossiers.

Une solution de type dropbox n’était hélas pas envisageable du côté du client.

Il fallait une solution simple, ne nécessitant pas de connaissances techniques particulières (oui l’usage d’un soft FTP demande des connaissances particulières).

La solution de facilité aurait été d’utiliser les outils de publication et de gestion de fichiers d’un CMS quelconque, mais au final ça manque de fonctionnalités ciblées.

Voici pour l’instant ceux que j’ai retenu, si vous en connaissez d’autres, parlez-en dans les commentaires, j’étofferais la liste.

Liste de scripts de partage et de gestion de fichiers en ligne :

  1. Webshare :

    Présentation rapide : Script assez complet totalement orienté gestion et partage de fichiers en ligne
    Le site du projet : http://www.webshare.fr/
    demo en ligne :
    http://www.webshare.fr/demo/start.php
    Avantages :
    look sympa, fonctionnalités puissantes, convivial
    Inconvénients :
    ne semble plus être maintenu pour le moment.

  2. Agora project :

    Présentation rapide : plus qu’un outil de partage de fichiers, c’est un gestionnaire d’espace collaboratif en ligne
    Le site du projet :
    http://www.agora-project.net/
    Démo en ligne :
    http://www.agora-project.net/demo/module_tableau_bord/
    Pas eu le temps de tester à fond, le truc à l’air très (trop pour les besoins du client) complet, mais je me le garde sous le coude pour tester à fond ses fonctionnalités plus tard.

  3. Owl :

    Présentation rapide : Comme le précédent, plutôt orienté gestion de travail collaboratif, mais il existe une version light permettant uniquement le partage et la gestion de fichiers en ligne.
    Le site du projet :
    http://owl.anytimecomm.com
    Démo en ligne :
    http://owl.anytimecomm.com/demo-owl
    Juste testé la version ultralight, pas à fond car la version en démo semble être bridée.

  4. Dmanager :

    Présentation rapide : Outil de partage et de gestion de fichiers
    Site du projet :
    http://www.dmanager.org/
    D’après la présentation, semble faire exactement ce dont on a besoin, mais je n’ai pas pu tester l’espace démo en ligne pour le moment il va donc falloir que je le teste sur un de mes serveurs.

Comme je vais probablement continuer mes recherches, la liste s’étoffera peut être petit à petit, mais n’hésitez pas à me présenter d’autres produits.

Bug de background color avec Outlook 2007

Petit mémo pour moi et au passage comme d’habitude, j’en fais profiter mes amis intégrateurs qui adoooorent se prendre la tête avec outlook.

Donc en gros, j’ai un un problème à gérer sur une newsletter, problème d’affichage avec outlook, comme d’habitude on pourra dire.

Deux cellules (<td>) d’un même tableau, la ligne (<tr> les contenant possède un background et par sécurité, ce background est également intégré à chaque cellule.

Problème, sous Outlook 2007, la deuxième cellule affiche un bloc blanc sans background en haut, ensuite le background est bien appliqué.

Visuellement ça donne ça :

bug-background-outlook

La problème vient tout simplement d’un padding-top appliqué à la première cellule qui n’était pas appliqué à la deuxième car ce n’était pas nécessaire.

Du coup, outlook semble se perdre dans les affichages et ne commence l’affichage du background sur la deuxième cellule qu’après la hauteur du padding-top de la première.

Solutions :

  • Appliquer le même padding-top aux deux cellules (j’ai essayé avec un padding-top:0 en reset pour la seconde et ça ne fonctionne pas).
  • Appliquer un margin-top ou un padding-top au premier élément de première cellule et non pas à la cellule elle même.

WordPress : afficher une blogroll contextuelle

La blogroll, c’est en général le grand fourre tout voir bien souvent le grand n’importe quoi.

On affiche d’un coup des tonnes de liens, ça prend une place folle dans la sidebar à tel point que de nombreux blogueurs la placent dans une page dédiée voir la supprime totalement.

Comme vous l’avez peut être constaté, ce blog subit de profonds changements, l’occasion pour moi de tester différentes choses et de mettre en place certaines idées que j’ai eu.

Parmi celles-ci, la blogroll thématique.

Passons aux choses sérieuses : la technique

Afficher une blogroll (liste de liens externes) thématique en fonction d’une catégorie ou d’un tag

Pré requis : utiliser wordpress, bidouiller un peu le PHP (et encore) et surtout connaitre un peu le moteur wordpress.

Première étape : créez une catégorie de liens.

Allez dans votre interface wordpress, onglet liens > catégories de liens

Créez une catégorie thématique (exemple référencement), enregistrez là.

Affichez la liste des catégories de liens et cliquez sur le lien modifier la catégorie.

Regardez l’url affichée dans votre barre d’adresse elle se finit par le code suivant : cat_ID=X.

X est l’identifiant de votre catégorie, notez le dans un coin et passons à l’étape 2.

Deuxième étape : récupérer l’identifiant de la catégorie d’articles concernée.

Allez dans votre onglet Articles > Catégories.

Faites la même chose que pour la catégorie de liens et notez le numéro identifiant dans un coin.

Troisième étape : récupérer l’identifiant du tag qui vous intéresse.

Là c’est pas difficile, en fait, il vous suffit de récupérer le Slug du tag, vous pouvez même le déduire aisément :

  • retirez les accents
  • remplacez les espaces par des –
  • retirez les majuscules

Exemple : Référencement devient referencement, mais vérifiez quand même des fois que.

Dernière étape, le code pour afficher la blogroll thématique

Ouvrez le fichier sidebar.php de votre thème et ajoutez le code suivant à l’emplacement ou vous voulez voir apparaitre la blogroll thématique :

<?php if (is_category('8') || in_category('8') || has_tag('referencement')) { ?>
<ul class="xoxo">
<h3>Blogs de Référencement</h3>
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0&category=44'); ?>
</ul>
</ul>
<?php } ?>

is_category('8') définit si vous êtes sur une page d’archive de catégorie

in_category('8') définit si l’article affiché fait partie de la catégorie ciblée

has_tag('referencement') regarde si votre article possède le tag ciblé

<?php wp_list_bookmarks('title_li=&categorize=0&category=44'); ?> affiche la liste de liens de la catégorie ciblée.

A vous d’utiliser les identifiants que vous avez noté plus haut.

Ce code est à personnaliser en fonction de la construction de votre sidebar.

Sur l’Ajblog, ce code me permet d’afficher la blogroll de blogs et sites parlant de référencement sur les pages d’archives de la catégorie, sur tous les articles de la catégorie et sur tout article possèdent le tag référencement (et ne faisant pas forcément partie de la catégorie référencement).

Vous pouvez ensuite répéter ce code (ou l’affiner avec des elseif) pour chaque catégorie de liens thématiques de votre blogroll.

Comment importer un player Myspace dans un Blog

Ou dans n’importe quelle page Html d’ailleurs…

Un client artiste m’a demandé d’importer le player de son espace Myspace dans son nouveau blog.

Pas de soucis me dis-je, facile.

Sauf que, Myspace n’a pas prévu de code d’export de son player par l’utilisateur lambda.

Il parait qu’il y a une option d’export dans l’admin Myspace mais je n’y avais pas accès.

Une petite recherche sur Google, rien, nada, que dalle, pas grave on va le faire à l’ancienne.

J’analyse donc la source de la page Myspace (mes yeux ! mes yeux ! Arrglll…) pour dénicher le code de ce satané player.

Je l’isole et tente de l’importer dans le blog wordpress de mon client. Forcément, ça ne marche pas.

J’analyse mieux la page et découvre du javascript un peu partout dans la source avec des variables dans tous les coins.

On retente avec le code source généré (merci la Web developper tootlbar), rien à faire, ça ne marche pas.

Ok, ils ont verrouillé leur truc.

Fidèle à ma devise (un problème = une solution), je me pose et analyse la page et le player.

Bon, il n’y a vraiment pas d’option pour exporter le player Myspace… par contre, je vois un petit bouton « ouvrir le lect… » en haut à droite du player, je tente ma chance.

Ouverture de popup, avec le player, des infos, et de la pub. Je retente ma chance avec la source du popup.

J’isole le code du player (merci Firefox), le copie, le colle dans le blog, enregistre…

Et comme par magie, le player s’affiche bien dans la page du blog, fonctionnel et tout et tout.

Donc pour résumer :

Comment importer un player Myspace dans un blog :

  • Allez sur la page Myspace de l’artiste et trouvez le player.
  • Cliquez sur « ouvrir le player » en haut à droite et affichez la popup.
  • Et là, il y a une feinte, il faut utiliser firefox et son magnifique outil en clic droit : Code source de la sélection.
  • Cliquez sur une chanson du player Myspace affiché dans la popup.
  • Posez votre souris en haut de la popup la ou il n’y a ni logo ni info en flash.
  • Faites clic droit > Code source de la sélection.
  • Copiez tout le code affiché (pas seulement celui sélectionné à l’ouverture de la fenêtre code source) .
  • Passez à l’éditeur de votre blog (ou votre éditeur html préféré), passez en mode code (ou html) et insérez le code du player que vous avez copié.
  • Enregistrez la page.

Et là, devant vos yeux ébahis, tout fonctionne.

Et petit bonus, si vous ne voulez pas que la musique démarre automatiquement (ce qui est particulièrement énervant, ), changez la variable suivante dans le code : ap=1 en ap=0.

PS : sous wordpress, évitez de repasser en mode d’édition « Visuel », ça va va vous détruire le code.

PPS : comme précisé par jibs dans ce commentaire, cette opération est contraire aux CGUs de Myspace, donc à vos risques et périls.

Javascript : préférer href= à replace pour une meilleure navigation

Hop, comme d’habitude, un petit mémo utile (enfin pour moi).

Si vous avez besoin de créer un lien sur un élément autre qu’un <a> bien légitime, vous allez forcément utiliser le javascript.

On va donner ici deux possibilités :
onclick="window.location.replace('mon-url-de-lien');
et
onclick="window.location.href='mon-url-de-lien';

Dans mon cas, c’était pour donner le lien à un élément <li> contenant une image, un titre lien et un texte. Avec un ligne de javascript, je m’évite dix lignes de CSS pour donner le layout au lien sur toute la surface du <li> sans mettre le lien sur les autres éléments.

Donc, des deux solutions proposées, préférez la seconde, onclick="window.location.href='mon-url-de-lien'; , car si les deux codes semblent donner le même résultat, en fait, d’un point de vue navigation il n’en est rien.

onclick="window.location.replace('mon-url-de-lien'); va indiquer à votre navigateur de « remplacer » la page active par celle dont le lien est donné dans le code. Problème, le bouton back du navigateur est du coup inopérant.

Donc, pour ne pas perdre votre visiteur, préférez onclick="window.location.href='mon-url-de-lien'; qui lui permet l’usage du bouton back du navigateur.

Erreurs 500 WordPress 2.7 avec OVH et 1and1

Ca fait une heure que je me prends la tête avec WordPress 2.7 pour attribuer des modèles de pages à une série de page via le back office.

Erreur 500, erreur 500 et encore erreur 500…

Le genre de truc qui vous bousille une soirée de boulot, d’autant plus que même une par une, les modifications me donnent une fois sur deux… je vous le donne dans le mile… une erreur 500. Toh !

A partir de là, faut chercher l’origine du bug.

WordPress 2.7 lui même ? Peu probable vu que je n’ai aucun problème quand je travaille sur un site hébergé chez Infomaniak, MON hébergeur de confiance.

J’ai déjà été confronté à ce problème sur un WordPress chez OVH.. hmmm une piste ? Le site sur lequel je travaille est hébergé chez 1and1.

Le point commun de ces deux hébergeurs ? Une gestion plus que hasardeuse du PHP5, je lance donc une petite recherche et bingo !

La réponse se trouve ici : De WordPress 2.6 à WordPress 2.7 commentaire de Lockheart

Il vous faut éditer votre fichier .htaccess de la façon suivante :

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php

# END WordPress

En clair, ajoutez les deux lignes suivantes à la fin de vos règles de réécriture :

AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php

Mais attention, ce petit canaillou de wordpress risque de vous réécrire votre .htaccess et donc de faire voler ces deux lignes (c’est ce qu’il m’a fait lors d’un teste pour voir si la modif fonctionnait).

J’ai donc été barbare, un chmod en 444 pour que le fichier .htaccess ne puisse être modifié par personne (et surtout pas wordpress) et voilà, je peux enfin attribuer mes modèles de pages en groupe chez 1and1 et OVH sans… erreur 500.

Détecter la non présence d’une frame et faire une redirection

J’étrenne une nouvelle rubrique, mon aide mémoire en ligne.

Que voulez-vous, je me fais vieux, alors cette rubrique sera mon aide mémoire en ligne, un blog, ça sert à tout.

Donc aujourd’hui, un petit script tout bête dont j’avais besoin pour un projet client. Certaines pages de son site n’apparaissent que via des liens thickbox et il faut absolument qu’elles soient inaccessibles en direct autrement, enfin si, mais pas par l’utilisateur final.

La solution la plus simple était donc de détecter si la page n’est pas afichée dans une frame (ou iframe) et dans ce cas, de rediriger le visiteur automatiquement vers la page « parent ».

Voici le script :

<script type= »text/javascript »>
if (top.frames.length==’0′)
{
window.location.replace(« url-de-redirection »);

}
</script>

Parce que figurez vous que si ce script était très utilisé à l’époque de l’usage massif des frames, maintenant, c’est plus chaud à trouver quand on n’est pas un pro du javascript.