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.

Revue web

On m'a fait découvrir, aujourd'hui, une belle et originale page 404 sur le site d'un développeur web. Pour ceux qui ne sauraient pas, une page 404 correspond à une page d'erreur indiquant que la page à laquelle vous essayez d'accéder n'existe pas. Techniquement, 404 est le code d'erreur retourné par le serveur web pour indiquer que la page est inexistante.

La page en question :

belle-page-404-2

Vous pouvez cliquer sur l'image pour accéder directement à la page de ce développeur.
On voit que la fenêtre met en scène des Lemmings, les héros d'un jeu de réflexion du même nom créé dans les années 90 sur PC. Ici, le concept consiste à sauver le plus de Lemmings possible. Je tire mon chapeau à l'auteur de cette page. J'en ai vu des paquets de page 404 mais celle-là, c'est la number one de ce que j'ai pu voir.

A l'occasion, si vous cherchez de l'inspiration pour créer vos propres pages 404, je vous invite à aller sur bonjour404 qui liste un grand nombre de designs pour cette page. Il y en a pour tous les goûts! D'ailleurs, il faudrait que je pense à m'en faire une un de ces jours parce que la page 404 par défaut de Joomla, elle laisse un peu à désirer...J'ose même pas mettre une copie d'écran...

Amusez-vous bien avec les Lemmings!

Revue web

logo-javaUne faille très critique a été détectée dans Java 7. Cette faille permettrait à des personnes malintentionnées (des hackers par exemple) d'installer des malwares à l'insu de votre plein gré. Les pirates pourraient installer des virus sur votre machine et de manière assez simple! Une page web suffit pour se retrouver piraté et, apparemment, cette faille aurait largement été exploitée. Heureusement, Oracle, qui s'occupe du développement de Java, a pu publié assez rapidement une correction. Si vous utilisez Java 7, je vous invite à installer ce correctif au plus vite!

Plus d'informations sur ce correctif et toutes les informations pour le déployer

Revue web

Quand on développe des sites web, on utilise toute une palette d'outils pour réaliser différentes étapes du processus de développement. Pour la création de la charte graphique, on va commencer par du papier et un crayon, puis on va passer à des outils informatiques comme Gimp ou Photoshop. Pour le codage, ça va être très varié, on va passer de l'éditeur de texte (personnellement j'utilise Notepad++) à des outils de développement plus poussés comme Eclipse. Au final, on affichera le résultat sur un navigateur web.


Arrivé à cette étape finale, on aura encore des choses à corriger ou à régler. Et là, les navigateurs web vont nous venir en aide en proposant des outils directement intégrés aux navigateurs qui nous permettront de débogueur ce qui ne va pas ou, simplement, d'améliorer certains points.

Les outils de développement de Google Chrome

chrome-outil-preview

Pour activer les outils sous Chrome, vous pouvez passer par le menu "Outils/Outils de développement" ou utiliser le raccourci "Ctrl+Shift+I".

Actu site

La marque de vêtements haut-de-gamme pour homme COUEDRO vient de lancer son site de vente en ligne.

couedro

La marque a fait appel aux services de Quokka Web pour réaliser ce site d'e-commerce. Basé sur l'application Prestashop, Quokka Web a développé ce site qui dispose aussi d'un look adapté aux smartphones.
couedro_smartphone
Dans le cadre de ce projet, de nombreux modules (extensions) ont été créés spécifiquement sous Prestashop. Pourquoi ne pas avoir utiliser des modules existants? Tout simplement pour répondre à des besoins très particuliers auquels les modules existants ne répondaient pas cependant le site se base aussi sur d'autres modules existants.

Le design se veut volontairement sobre soulignant ainsi les aspects pros et "classe" de la marque parisienne.

Je vous invite à découvrir cette nouvelle marque pleine de prestige et d'élégance.

Découvrir Couedro - Select store for men

Actu site

Emma, artiste de contorsion, qu'on a pu apercevoir dans l'émission E=M6 (chercher "Les incroyables bizarreries de la nature humaine" sur le site de M6) a posté une nouvelle vidéo sur son site. Il est toujours impressionnant de voir cet exercice de souplesse. Emma le réussit à la perfection avec grâce et charme.

lilylily2

Voir la vidéo d'Emma la contorsionniste.