Un peu de neuf du coté du développement web... Je termine actuellement la création de nouvelles fonctionnalités du système de gestion de contenu Data Brain Tool (DBT pour les intimes ;-), qui donnera naissance à la toute nouvelle version 1.2.
Au menu, une gestion complète des utilisateurs et de leurs droits d'accès, modification, création etc... ainsi qu'une gestion de médiathèque, permettant l'upload de média en tout genre, leur organisation en dossiers et sous-dossiers, et leur intégration directe dans des articles.
Le tout s'accompagnera rapidement d'un canevas FrontEnd tout prêt, qui permettra ainsi d'installer et de personnaliser votre site Internet en deux temps trois mouvements.
Enfin, cette version de la DBT intégrera également la dernière version de la bibliothèque javascript WOT.
Bientôt en téléchargement... alors à surveiller de près !!!
Je continu le développement de la bibliothèque WOT. Voici donc un des premiers nés des modules réalisés à l'aide des fonctions WOT de base. Il s'agit d'un grand standard du web : la fenêtre avec contenu scrollable. Si la fonctionnalité n'est pas révolutionnaire, ce petit exercice m'a permis de tester l'efficacité des différentes fonctionnalités élémentaires de la bibliothèque.
Dans le monde du Web, aujourd'hui rempli d'Ajax, de frameworks et autres bizarreries Internetienne, je me suis dit que j'allais me pencher sur ces petits bouts de code qui permettent de booster les pages web à grand renfort de DHTML. L'aventure du Framework a donc commencée, sous la forme d'un projet perso baptisé Web Objects Tool (WOT pour les intimes...). Il s'agit d'une bibliothèque de fonctions javascript et php, qui permettra à terme d'intégrer toute une série de fonctionnalités et d'objets dans une page web. Voici donc en ligne une première version béta, incluant toutes les fonctions de base, qui vont ensuite permettre de créer une couche supplémentaire.
Dans le top 5 des composants qui reviennent régulièrement dans les sites Internet, on trouve la galerie photos. A force de taper pour une nième fois du code quasi-identique, il m'est apparu opportun de développer un composant avec pour objectif une mise en œuvre ultra simple, facilement paramétrable et adapté à un maximum de configurations. D’où la création d’e-Mage, une galerie photos Internet, projet qui devra évoluer au fil du temps. Voici déjà une version béta exploitable.
e-Mage, c’est quoi ? Il s’agit d’une visionneuse d’images, au format JPEG. Vous paramétrez ses dimensions, ses couleurs de fond, la taille des icônes de prévisualisation à l’aide d’une interface HTML en ligne. Donc pas besoin d’entrer dans le code ou dans un fichier de configuration. Ensuite, vous placez vos images dans un répertoire dédié de votre site, puis deux petites lignes de code dans votre page Web, et e-Mage s’occupe du reste…
Comment ça marche ? Quelques pré requis techniques malgré tout : e-Mage utilise des syntaxes PHP. Un serveur PHP, avec bibliothèque GD2 active, doit donc tourner chez votre hébergeur.
Et qu’est-ce qui se passe ? Une fois configurée, votre galerie va lire automatiquement les images dans le répertoire d’images. Les icônes de prévisualisation sont générées automatiquement et e-Mage s’occupe d’agencer au mieux ces icônes dans votre menu, en fonction des différentes dimensions paramétrées.
Une fois chargée dans un navigateur Web, la galerie ne nécessite pas de rechargement de page. Seules les images sont chargées au fur et à mesure de la consultation, ce qui facilite grandement l’intégration dans une page de site, surtout si cette dernière est ouverte avec passage de variables…
e-Mage ne nécessite pas d’accès à une base de données.
e-Mage reste dans sa version béta dimensionnée pour des galeries à taille raisonnable. Entendez donc par là qu’au delà de 80 images, les temps de chargement peuvent devenir un peu long.
Ce qu’e-Mage ne fait pas… encore… A venir dans les versions futures : la possibilité d’ajouter des légendes aux images, et de gérer un classement par rubriques, ce qui devrait considérablement augmenter son potentiel de nombre d’images gérées.
Et pour l’installer ? Rien de plus simple : téléchargez puis décompressez le fichier suivant…
Copiez l’ensemble des fichiers et dossiers dans un dossier que vous dédierez à la galerie sur votre serveur.
Ouvrez le fichier de configuration configuration.php dans un navigateur Web, puis laissez vous guider…
Voilà un petit bout de code tout simple et qui peut être bien pratique pour vos galeries d'images en ligne. Il s'agit d'ouvrir une fenêtre popup contenant une image (par exemple la version haute définition d'une image de galerie photo), et d'adapter automatiquement la taille du popup à la taille de l'image...
Comment ça marche ? Simplement une petite fonction javascript à insérer dans le head du popup, qui va détecter la taille de l'image, puis redimensionner le popup en conséquence. La fonction est lancée à la fin du chargement du code du popup, puis toutes les 0,5 secondes, afin de palier au temps de téléchargement de l'image (sinon, la retaille du popup se fait plutôt mal ;-)
Le code... Voici le code à insérer dans le head de votre popup : <script language="javascript">
function resizeFenetre() {
// detection des dimensions de l'image a afficher
largeurImg = document.images['imgFull'].width;
hauteurImg = document.images['imgFull'].height;
// redimensionnement de la taille de la fenetre en fonction des dimensions de l'image
window.resizeTo(largeurImg, hauteurImg);
}
</script>
puis le code à placer en fin de code du popup : <script language="javascript">
// toutes les 0,5s : mise a dimension du popup (pour palier au temps de chargement de l'image)
testDim = window.setInterval('resizeFenetre()', 500);
</script>
Enfin, n'oubliez pas de compléter la balise IMG de l'image du popup avec l'attribut ID, comme suit : id="imgFull"
Et le tour est joué...
Un exemple... Cliquez sur le lien suivant pour ouvrir un popup utilisant le code : ouvrir popup image
Astuce... Dans l'exemple, le lien est construit avec une balise <a> classique. Vous pouvez rencontrer des problèmes d'affichage, en particulier si votre volet de favoris, ou d'historique est ouvert. Pour palier au problème, utilisez dans le href de votre balise <a> une fonction javascript "window.open(...)"...
