Revue web

Il fallait que je fasse un article sur IE. Ses contraintes sont pesantes et ralentissent le développement des sites surtout quand on essaye de supporter les x versions de IE.

J'avais vu des publicités sur IE "plus rapide, plus sûr, plus performant, un browser moderne...". Comparé aux autres, il est à la traine dans tous les domaines. Heureusement que les dernières IE s'arrangent mais ça ne suffit toujours pas.

CMS

J'ai constaté récemment, sur la version 1.5.4.1 de Prestashop, qu'on ne pouvait pas réordonner les pages de types CMS. La plupart du temps, ce n'est pas une fonction indispensable mais quand même...surtout quand on veut changer l'ordre des liens du blockcms. C'est un bug connu. Une correction a été apportée sur une branche de développement. Il suffit d'appliquer les modifications indiquées sur la page BO : fixed bug #PSCFV-9586 - Unable to sort CMS page in back office. Il suffit d'enlever les lignes surlignées en rouge et de les remplacer par celles en vert.

Attention cependant, le réordonnancement ne pourra se faire qu'avec les flèches situées dans la colonne "Position" et non par Drap & Drop. Après modification de l'ordre, il ne faut pas oublier d'aller sur le blockcms et le sauvegarder pour tenir compte des nouvelles positions.

Suite à une question en commentaire, voici un tuto rapide en images qui devrait rendre les choses plus claires.

Etape 1: Aller dans la page CMS (menu Préférences / CMS du back office) et réordonner les articles.

tuto-prestashop-cms1

Etape 2 : Aller dans la configuration du module blockcms et cliquez sur Save. Ceci permet de tenir compte des nouvelles positions.

tuto-prestashop-cms2

J'espère avoir réussi à éclaircir cet article :-)

CMS

Dans Joomla, la classe JMail est utilisée pour gérer l'envoi des mails. On utilise l'appel $mailer = &JFactory::getMailer(); pour récupérer l'instance de JMail (plus d'informations sur l'utilisation de la méthode JFactory::getMailer()).

Un problème revient régulièrement sur les forums dédiés à Joomla. Il s'agit de la liste des destinataires qui n'est pas réinitialisée si on souhaite envoyer un mail plusieurs fois à différents destinataires. Le besoin peut être d'envoyer un mail personnalisé pour chaque utilisateur ou groupe d'utilisateurs.

Le code posant problème :

$mailer = JFactory::getMailer();
$from = "contact at hostname0.com";
$fromName = "Contact";
$subject = "...";
$body = "...";
$recipients1 = array();
$recipients2 = array();
$recipients1[] = "address1 at hostname1.com";
$recipients1[] = "address2 at hostname1.com";
$recipients2[] = "address1 at hostname2.com";
$recipients2[] = "address2 at hostname2.com"
$ret = $mailer->sendMail($from, $fromName, $recipients1, $subject, $body, false);
$ret = $mailer->sendMail($from, $fromName, $recipients2, $subject, $body, false);

 On s'attend logiquement à ce qu'un mail soit envoyé au premier groupe de destinataire ($recipients1) puis qu'un autre mail soit envoyé au deuxième groupe de destinataires. Ce n'est pas le cas. Lors du deuxième appel à sendMail le premier groupe est ajouté au deuxième groupe de destinataires. Il ne s'agit pas d'un bug de Joomla. JMail hérite de PHPMailer, une librairie très utilisée pour l'envoi de mails en PHP, et il s'agit du fonctionnement normal de cette librairie.

Pour contourner ce désagrément, on peut réinitialiser la liste des destinataires. Entre les deux appels à sendMail(...), il suffit d'ajouter $mailer->ClearAddresses();.

Etant donné que je suis tombé aussi sur ce problème, j'espère que ce post pourra en aider d'autres.

 

That's it!

Revue web

En tant que webmaster et développeur web, je m'efforce de créer des sites agréables à visiter et conformes aux normes du web (W3C & co). Il est aussi important d'essayer de proposer des sites modernes par le design et par les technologies utilisées. Proposer de tels sites nécessite parfois de jongler avec les outils à notre disposition.

Les navigateurs web font partie de ces outils. Ils ont énormément évolué ces dernières années, ils ont mené une véritable course à l'innovation, aux performances et à la sécurité, pour le plus grand plaisir des internautes. D'ailleurs, le nombre de navigateurs n'a cessé de croitre depuis ces années. D'une époque où utilisait Netscape, Internet Explorer et Mozaic, nous sommes passés à une ère où nous avons le choix entre Internet Explorer, Chrome, Firefox, Safari, Opera, Maxthon, ...

navigateurs web

CMS

Une question qui revient régulièrement sur le web et qui trouve assez peu de réponses : Comment personnaliser la feuille de style du menu livré avec Prestashop 1.5?

Le menu correspond au module blocktopmenu. Le fichier CSS (superfish-modified.css) correspondant se trouve dans le répertoire suivant : <RépertoireInstallationPrestashop>/modules/blocktopmenu/css. Il vaut mieux ne jamais modifier les fichiers core et les modules livrés par défaut avec Prestashop ! C'est dans le répertoire themes qu'on pourra ajouter ou modifier les fichiers de style du framework.

Pour personnaliser blocktopmenu, il faut copier le fichier <RépertoireInstallationPrestashop>/modules/blocktopmenu/css/superfish-modified.css dans le répertoire : <RépertoireInstallationPrestashop>/themes/<VotreThème>/css/modules/blocktopmenu/css/ et le modifier selon vos envies tout simplement.

En savoir plus sur la technique de surcharge (override)

Actu site

Quokka Web vient de terminer le développement d'un site d'annonces immobilières basées sur la région du Perche. Le site se base sur Joomla agrémenté, notamment, des composants JEA (Joomla Estate Agency) et SobiPro.

thumb-le-perche-immobilier

Le composant JEA est un outil gratuit et proposant vraiment des fonctionnalités très intéressantes. Bien que son architecture soit de type MVC, on se retrouve freiné par des contraintes liées à Joomla. Il est difficile de faire évoluer cette architecture sans réécrire une grande partie des controlleurs. Je me suis basé sur le plugin MVC override qui m'a permis d'étendre certaines parties du code sans toucher au coeur du composant cependant de nombreuses parties ont été réécrites. Le processus d'upload des photos du composant a été revu pour proposer un upload plus moderne et plus performant avec, entre autres, le support du multiupload, l'intégration de barre de progression et une meilleure gestion de la mémoire pour le traitement des images).

SobiPro a été utilisé pour gérer l'annuaire du site. La prise en main de SobiPro a été fastidieuse. Même si le composant est gratuit, aucune aide n'est fournie avec et sur leur forum il est assez rare d'obtenir de l'aide. En effet, l'accès à l'aide est payant et on peut aisément comprendre que ceux qui payent pour y accéder ne veulent pas en faire profiter ce qui ne payent pas cependant en farfouillant à droite, à gauche, j'ai réussi à obtenir des bribes d'aide bien utiles. Et puis, la lecture du code a permis d'en apprendre plus sur les possibilités de ce composant. Il s'agit vraiment d'un outil puissant et personnalisable (même si ce n'est pas forcément évidemment pour les non initiés à la programmation). En contre-partie d'un outil puissant, nous avons affaire à un outil d'une lenteur extrême. C'est son principal défaut. En voyant le code, on comprend pourquoi. Ils embarquent leur propre système de template et une partie du coeur de Joomla!

Découvrir le site d'annonces immobilières, Le Perche Immobilier

Vous aussi, vous souhaitez avoir un site d'annonces immobilières ? Consultez mon offre de création de sites internet.

Tutoriaux

La gestion de la mémoire allouée en PHP est une question redondante sur le web notamment lorsqu'il s'agit de manipuler des images. Cette question revient parce que les développeurs se sont déjà retrouvés face à ce message d'erreur "Fatal error: Out of memory (allocated xxx) (tried to allocate yyy bytes) in <path>".

Cette erreur se produit lorsque PHP n'arrive pas à allouer assez de mémoire pour un processus. Sur un serveur local, il est possible d'augmenter cette limite en changeant la valeur de l'option memory_limit dans le fichier php.ini. Lorsque vous êtes en hébergement mutualisé, ces options ne sont pas modifiables. Il faut soit passer à une offre supérieure (voire du dédié), soit subir cette contrainte, soit essayer d'améliorer vos scripts.

Dans de nombreux cas, il est possible d'optimiser vos scripts PHP pour mieux gérer la mémoire. C'est ce qu'il faudrait toujours faire en premier lieu!

Pour l'exemple des images, voici un petit script permettant de vérifier les quantités de mémoire disponible, utilisée, ... :

$basedir = "./";
$images = array('IMG_001.JPG', 'IMG_002.jpg', 'IMG_003.JPG');
foreach ($images as $a) {
	$infos = getimagesize($a);
	$width = $infos[0];
	$height = $infos[1];
	$bit = $infos['bits'];
	$channel = $infos['channels'];
	//en octets
	$m_used = memory_get_usage();
	//en Mo
	$mem_used = round($m_used / pow(1024,2),2).'M';			
	//calcul de mémoire utilisé pour le traitement de l'image
	$m_need = round(($width * $height * $bit * $channel / 8 + pow(2, 16)) * 1.65); 			
	//la memoire limite du server
	$m_limit = (integer) ini_get('memory_limit') * pow(1024, 2);			
	//la mémoire à allouer pour eviter la Fatal error
	$m_aloc = $m_need - $m_limit;
	$m_aloc += $m_used;//on ajoute la mémoire déjà utilisé
	//on convertit en Mo
	$memory = round($m_aloc / pow(1024,2),2);
	echo "taille: $width x $height px
nb de bits: $bit
canaux: $channel
"; echo 'Memoire utilisé par le script : '.$mem_used; echo 'Mémoire utilisée pour la redimension : '.round($m_need / pow(1024,2),2).'M '; echo 'Mémoire possible : '.round($m_limit / pow(1024,2),2).'M'; echo "Manque de mémoire : $memory M"; $im = imagecreatefromjpeg($basedir . $a); imagejpeg($im, $basedir . $a); imagedestroy ($im); echo "$a done\n"; }

Il s'agit d'une boucle. Pour chaque itération, on exécute la fonction imagedestroy($im) pour libérer de la mémoire. Je vous propose de lancer ce script tel quel puis en commentant la ligne imagedestroy($im).

Créez un fichier testmemory.php dans un répertoire contenant des images (de préférence de grosses tailles), copiez ce code (et remplacez le nom des images par celui de vos images) puis lancez-le dans un navigateur web. Vous verrez que la fonction imagedestroy() est vraiment utile mais surtout qu'il n'est pas forcément utile de toucher à l'option memory_limit de php.ini.

Source grandement inspirée de cette page : http://www.developpez.net/forums/showthread.php?t=269986

 

CMS

Dans Joomla, pour afficher un module dans une vue d'un composant, il faut simplement ajouter ce petit bout de code PHP à l'endroit souhaité :

	jimport('joomla.application.module.helper');						
	$module = JModuleHelper::getModule('nom_du_module');
	echo JModuleHelper::renderModule($module);

Ce code fonctionne au moins avec la version 2.5 de Joomla.

Actu site

Le site d'Emma, la contorsionniste, a été complètement refait pour le rendre plus moderne, plus pro et avec une meilleure mise en avant de la qualité de son travail. Cette mise en avant s'est traduit par l'épuration du design et par une grande place accordée aux images. Son travail visuel se devait d'être honoré. Cela passe par une page d'accueil centrée tout de suite sur de magnifiques photos en slideshow.

Le site s'adapte aussi aux nouvelles technologies avec, notamment, un design qui s'adapte en fonction de l'écran du visiteur, du smartphone aux écrans larges.

Aperçu du site d'Emma sur smartphoneAperçu du site d'Emma sur pc portables

Aperçu du site d'Emma sur écrans larges

Dans la même idée, la galerie photos aussi s'adapte en fonction de la taille du navigateur grâce à la librairie JQuery Masonry.

D'habitude, je travaille avec Joomla mais ce projet a été l'occasion d'aller à la rencontre de WordPress.

Je vous invite à découvrir Emma, la contorsionniste. Elle vous en mettra plein la vue.

Revue web

Quand vous préparez un site, vous devez avoir à l'esprit que celui-ci sera affiché sur des écrans de différentes tailles. Il faut donc en tenir compte dès le début de votre projet lors de la préparation de la maquette graphique. La tâche se révèle de plus en plus compliquée de nos jours avec la multiplication des supports visuels tels que les smartphones, les tablettes, les ultrabooks, ...
On fait face à l'évolution de 2 tendances opposées, d'une part nous avons des écrans de plus en plus petits avec de petites résolutions allant jusqu'à 320x480 pour l'iPhone 3GS, d'autre part les écrans pour PC de bureau de plus en plus grands 22, 24, voire 30 pouces avec des résolutions allant jusqu'à 2560x1600!

Il est donc important de pouvoir tester votre réalisation sur ces différents formats mais il est difficile d'avoir accès à toutes ces configurations matérielles. Comment faire?
Heureusement, il existe des sites et des solutions logicielles qui vous permettront de tester l'affichage de votre site avec différentes résolutions.

Screenfly by Quirktools

quirktools-tablette-preview

Screenfly est un outil en ligne permettant de tester l'affichage d'un site déjà en ligne. Il est très simple d'utilisation. On peut choisir parmi 4 types d'écran : Desktop, tablette, mobile ou télévision. Pour chaque type d'écran, on a le choix d'une résolution correspondant à un produit du marché. Le site s'affiche dans une boite style fancybox.

quirktools-mobile

Ci-dessus, on peut voir le même site affiché dans 2 configurations différentes sur smartphone et sur tablette. C'est intéressant, notamment pour tester les sites "responsive", qui s'adaptent à la résolution de l'écran.

Testez vos propres sites en vous rendant sur le site quirktools. Il suffit juste d'entrer l'adresse URL de votre site dans le champ qui s'affiche sur la page.

Resolution Test pour Chrome

Il s'agit d'une extension pour le navigateur Chrome. Pour ceux qui ont Chrome, vous pouvez accéder à la page de téléchargement de l'extension Resolution Test. Lorsque vous activez cette extension, vous verrez apparaitre une icone à droite de la barre d'adresse.

resolution-test-preview

En cliquant sur le bouton Resolution test, une boite se déplie avec une liste de résolutions les plus fréquentes. Il suffit de cliquer sur une résolution cible pour que Chrome change de taille et s'adapte à la résolution choisie. Le principal inconvénient est la difficulté de tester les résolutions plus grandes que celle de son propre écran. Dans ce cas, Chrome va déborder de l'écran et il ne sera pas possible de naviguer dans la page car il n'y aura pas d'ascenceurs.

En savoir plus sur les résolutions d'écran

Parler de résolution d'écran est un abus de langage, on devrait plutôt parler de défiinition d'écran. Je vous invite à lire un article très intéressant sur le blog Le bloc-notes ; ergonomie & UX faisant le point sur le parc des résolutions actuelles et un autre sur la différence entre résolution et définition (toujours sur le même site).

J'espère que ces quelques infos pourront vous aider.