Actu site

Le blog amène de plus en plus de visiteurs sur le site alors un petit coup de rafraichissement graphique pour le rendre plus agréable me semblait être une bonne idée.
J'espère avoir réussi cette tâche.

Pour ceux qui n'auraient pas connu la précédente version du site, voici un Avant/Après pour donner une idée des changements qui ont eu lieu :

Avant :
tc_old_blog_thumb

Tutoriaux

Récemment, j'ai eu besoin de mettre à jour des champs si ceux-ci existaient ou de les insérer dans le cas contraire. En soi, ce n'est pas compliqué. Il suffit de tester si les entrées existent, si oui, on les met à jour, sinon on les ajoute.

Voici une structure de table pour l'exemple :

Table statsvisit
id page_id visites date_enregistrement
1 55 152 25-10-2012 00:00:00
2 56 189 25-10-2012 00:00:00

Le but est de mettre à jour le champ visites correspondant à une page page_id à une date t. A une date t+1, nous ajouterons des entrées. Dans une même journée, le nombre de visites sera mis à jour.

Actu site

design_sensarom

Pour une fois, il ne s'agit pas de la création d'un site mais de la refonte d'un design. Il s'agit d'une boutique proposant la vente de produits naturels (aromathérapie, maquillage naturel, ...).

La demande était de rafraichir le design en place et de mettre en valeur le côté nature de la boutique. Le vert semblait, naturellement, le bon choix pour répondre à cette demande. La réalisation d'un design de boutique en ligne présente quelques difficultés. D'une part, le design doit être adapté pour de nombreuses pages (Accueil, Produit, Catégorie, Panier, ...) d'autre part, la mise en place de certains détails nécessite une retouche, voire la création de certains plugins pour l'outil de vente en ligne, ici il s'agit de Prestashop.

Cela a notamment nécessité la création d'un plugin pour la gestion de "Mon compte" et "Mon panier" (qui se trouvent en haut) avec les effets dynamiques qui vont avec (Merci Jquery et AJAX pour ce qu'ils permettent de faire de nos jours :-)). Le plugin commentaires a aussi été modifié (ainsi que le coeur de Prestashop. Enfin pas vraiment, certaines fonctions ont été redéfinies grâce à l'override ce qui évite de toucher au coeur même de Prestashop et, par la même, d'éviter des surprises lors des mises à jour du framework) pour permettre d'avoir la notation et les liens "Voir les avis" et "Déposer un avis" juste en-dessous du nom des produits (pages produit).

Découvrir Sens'Arom, la boutique de produits naturels

Actu site

thumb_catherinecruanes

J'ai terminé tout récemment de réaliser le site d'une artiste-peintre, Catherine Cruanes.

Dans un site épuré mettant en avant le travail de cette artiste, vous pourrez découvrir ses oeuvres et ses expositions, qui se déroulent principalement en région parisienne.

La principale difficulté a été de réaliser des galeries indépendantes les unes des autres avec chacune sa propre présentation. Une attention particulière a été apportée à réaliser un design adapté à chaque page tout en respectant un certain équilibre.

Je vous invite à découvrir les peintures de Catherine Cruanes.

Revue web

Voici une petite application que vous avez surement déjà rencontré, Skype click to call. Il s'agit d'une extension du logiciel Skype. Skype est une application permettant de chatter, de téléphoner ou de faire des vidéo-conférences.
Skype, en lui-même, est bien pratique. Je l'utilise principalement pour chatter et il fonctionne bien pour le reste. Rien à redire là-dessus. Par contre, comme tout logiciel actuel qui se respecte, il se met à jour. On bénéficie ainsi des dernières évolutions et corrections du produit ce qui est une très bonne chose cependant si vous n'avez pas fait attention lors de ces fameuses mises à jour, vous vous êtes retrouvé avec "Skype click to call" installé sur votre machine. Quand vous faites des installations, vous avez souvent tendance à cliquer un peu vite sur "Suivant" sans lire les boites qui apparaissent et c'est comme ça qu'on retrouve avec un logiciel en plus installé sur la machine.

Une fois le logiciel installé, on ne se rend pas compte tout de suite de sa présence mais, en utilisant les navigateurs web, on constate que les numéros de téléphone ne s'affichent plus de la même façon. voici ce que ça donne : skype-phone.
C'est plutôt discret et cela rajoute des fonctionnalités comme la possibilité d'appeler directement un numéro présent sur une page web avec Skype.

Alors, pourquoi faire un billet intitulé "l'incrusteur"?

  • Il s'est installé sans qu'on lui demande rien, un peu à l'insu de notre plein gré
  • Il s'est foutu sur tous les navigateurs webs
  • Il ouvre régulièrement une boite demandant de le mettre à jour alors qu'on se demande ce qu'il fout sur notre machine. Ca fait un peu logiciel espion
  • Il y eut une période où il rendait instable les navigateurs web. A priori, cela semble résolu ou, du moins, bien moins fréquent.
  • Il peut dénaturer une page web. Ca c'est le coté webmaster qui ressort. Vous vous évertuez à faire un beau design niquel au pixel près. Et bim! Le style du numéro change et fout en l'air votre design et vous vous retrouvez obligé d'expliquer à votre client pourquoi ça bugue!!! "Mais euh...Ca marche très bien chez moi avec toutes les configurations possibles et imaginables" -> Envoi copie d'écran -> "Hmm Ok, je vois ce que c'est, vous avez Skype Click to call installé sur votre machine" -> Le client : "Euh...quoi? J'ai rien installé moi" -> "Vous avez Skype?" -> Le client : "Euh oui mais j'ai pas installé ce truc" -> "Non il s'est installé à l'insu de votre plein gré".
    Obligé de mettre à jour le design à cause de cette foutu appli!

Comment s'en débarrasser?
Le plus simple est de le désinstaller de votre machine et de faire attention à ne pas le réactiver lors des prochaines mises à jour de Skype.
Il y a aussi la possibilité de désinstaller le plugin correspondant pour chaque navigateur mais c'est plus long.

Revue web

Tout bon webmaster qui se respecte utilise des outils pour tester son site, vérifier que les pages sont conformes aux standards, qu'elles ne comportent pas d'erreurs, qu'elles soient accessibles, ...
Google propose justement des outils bien pratiques pour réaliser ces tâches : Google webmaster tools.

Je l'utilise pour tous mes sites et je dois bien avouer qu'il est d'un grand secours cependant il pêche par un défaut ses anachronismes. Il ne s'agit pas d'un bug mais de son mode de fonctionnement. Il s'appuie sur le crawler de google pour apporter un ensemble de données sur votre site. Ces données sont récoltées à intervalles irréguliers. Le crawler permet de parcourir votre site, récupérer les descriptions, titres et toutes les informations sur vos pages. Un gros problème se pose! Vous ne savez pas quand il passe et vous ne pouvez pas le forcer à analyser votre site.

Google webmaster tools renvoie ces informations. Si des informations indiquent des erreurs sur vos pages, vous les corrigez. Bon réflexe! Avant que google se rende compte que vous avez corrigé ce qui allait pas, il faut patienter et certaines erreurs restent des jours, des semaines et parfois des mois...C'est bof bof mais, au moins, vous êtes quasiment sûrs d'avoir corrigé ce qui allait pas à une certaine date.

Bon, quand google a un peu de retard sur ses analyses, on se dit "OK, c'est pas grave, au prochain tour les erreurs auront disparues" mais on peut se retrouver confronter à de véritables anachronismes de google webmaster tools.
Nous allons analyser un exemple : les URLs introuvables. Voici une liste de quelques pages introuvables. Effectivement, le site vit et certaines pages n'existent plus. Prenons le cinquième lien, la page manquante a été repérée le 20 novembre 2011 (c'est récent).

google-gwt-introuvable

Maintenant, voyons voir quelles autres pages référencent cette page. Il se peut qu'un lien ait été oublié.

google-gwt-introuvable2

Euh...parmi les 3 liens trouvés, les 2 premiers n'existent plus et la 3e est la page d'accueil. Et, plus surprenant, google a trouvé ces pages en 2010 soit plus d'un an!!! Donc comment google peut trouver un lien inexistant en 2011 sur des pages qu'il avait trouvé en 2010??? D'autant plus que la page d'accueil a bien été mise à jour et le nouveau contenu de la page d'accueil a bien été pris en compte par google donc il y a un gros problème d'anachronisme (CQFD).

Malheureusement, on doit travailler avec ce mode de fonctionnement en espérant qu'un jour google nous fournisse ces outils en temps réel.

Revue web

Depuis peu, je suis passé sous le régime de l'auto-entrepreneur et, petit à petit, on découvre un peu plus ce monde. Notamment, on reçoit pas mal de courrier. Certains de ces courriers vous sollicitent pour que vous envoyez de l'argent à certaines sociétés. La présentation de ces courriers est vicieuse puisqu'à premier abord ils semblent refléter un aspect obligatoire surtout que le nom de ces sociétés portent des connaissances administratives assez troublantes (APE, Inforegistre, ...). La meilleure c'était APE et c'était le premier courrier que j'ai reçu. En voyant APE sur la lettre on pense tout de suite au code APE des entreprises or ça n'a rien à voir...Pour inforegistre, c'est pareil, on pense tout de suite à registre du commerce.

Le courrier reçu comporte un formulaire à remplir et à renvoyer accompagner d'un chèque. Voici l'exemple d'Inforegistre:

inforegistre

Le formulaire fait sérieux et l'en-tête indique noir sur blanc "L'information sur les entreprises du registre du commerce et des sociétés". On pense doc tout de suite à une obligation à remplir en tant qu'entrepreneur et on ne vous demande pas moins que 251.28 € de règlement! On voit mieux sur cette copie d'écran :

inforegistre2

A quoi correspond ce règlement? Des frais de dossiers, des frais de traitement, ...Mystère! Si c'est pour apparaitre sur un annuaire, ça fait un peu cher, non? Les pages jaunes sont gratuites. Alors qu'est ce qui pourrait expliquer d'envoyer une telle somme à une société privée?
Il faut bien tout lire, à l'arrière du formulaire, il est indiqué qu'il s'agit d'une société publicitaire et, bien évidemment, ce formulaire n'est pas obligatoire alors surtout ne renvoyez pas ce courrier à moins que vous ayez trop d'argent et que vous ne sachiez pas quoi en faire...

Vouz payez trop d'impôts, vous payez trop de taxes, vous ne faites pas assez de chiffre, vous avez du mal à finir vos fins de mois alors jetez votre argent par les fenêtres et donner des sommes astroniques à ces sociétés.(Evidemment c'est ironique!)

Tutoriaux

Lorsque vous envoyez un mail, il est toujours intéressant d'attacher une signature afin que vous puissize diffuser toutes vos coordonnées (email, téléphone, site web, fax, ...) d'autant plus si vous êtes un professionnel.

Nous allons nous intéresser à la signature d'un mail Hotmail. Premièrement, il faut se rendre dans le menu Options (Sous-menu Autres options).

hotmail-options

Vous tombez sur une liste d'options. Nous allons nous intéresser au bloc "Rédaction de message" et cliquer sur le lien "Signature et police du message". Voici la page qui s'affiche :

hotmail-signaturepage

Nous pouvons modifier la police par défaut utilisée lors de la rédaction d'un message et modifier la signature personnelle, c'est ce qui nous intéresse ici.

Ici, par exemple, nous pouvons voir qu'une image est utilisée en tant que signature. Nous allons voir par la suite comment insérer une image dans la signature.

Par défaut c'est le mode "Texte enrichi" qui est sélectionné par défaut. Cela permet de mettre en forme le texte assez facilement. Vous pouvez mettre votre texte en gras, ajouter une liste, des liens, .. sans vous soucier de l'implémentation.
Si vous dépliez le menu, vous verrez "Mode HTML" et "Texte brut". Le texte brut permet d'insérer du texte sans mise en forme. L'intérêt du texte brut, c'est surtout de passer les anispams et d'être compatible avec toutes les messageries.

Le mode HTML est le plus intéressant car il nous permet de personnaliser la signature comme on le souhaite cependant il vaut mieux l'utiliser avec parcimonie car l'interprétation de la signature ne donnera pas la même chose sur tous les clients de messagerie et webmail.
Ce mode nous permettra surtout d'insérer une image. D'abord, il faut disposer d'une image sur le web et insérer le code suivant:

<Mettre ici un texte alternatif>

Cliquer sur le bouton Enregistrer et le tour est joué!

Revue web

Depuis quelques temps (quelques années), je joue sur Toilokdo, un site de jeux flash en ligne. Le site est très agréable et les jeux très sympas.Il est de la même veine que les Prizee, Madwin & co...Pour jouer, il faut posséder un compte. Pas de souci, l'inscription est gratuite.

min-toilokdo-screenshot

CMS

AllVideos Reloaded est un composant/plugin Joomla très pratique pour afficher des vidéos via des flux externes (youtube,...) ou les vidéos que vous hébergez (flx, mp4, ..).

Malgré le fait qu'il soit pratique, il arrive parfois de tomber sur des erreurs étranges. Notamment, lorsque vous affichez une vidéo et que vous tombez sur l'erreur "Adobe Flash Player non installé ou plus vieux que 9.0.115!". D'autant plus étrange que vous avez surement une version bien plus récente de Flash. Le problème n'est aucunement lié à Flash. Vous pouvez tomber sur cette erreur si vous cernez les balises AllVideos Related par un paragraphe (balise <p>). Remplacez la balise <p> par <div> et le tour est joué!

Voici un exemple de code produisant l'erreur

<p>{ flv popup="true" divid="l-20" autostart="true"}video1{ /flv}{ avrpopup type="lightbox" id="l-20"} Cliquez pour voir la vidéo. { /avrpopup}</p>

A remplacer par le code suivant :

<div>{ flv popup="true" divid="l-20" autostart="true"}video1{ /flv}{ avrpopup type="lightbox" id="l-20"} Cliquez pour voir la vidéo. { /avrpopup}</div>

Certains sites vous proposeront de corriger le problème en allant modifier un fichier avreloaded.php. Je vous déconseille de le faire. La correction proposée consiste à cacher un code qui peut être utile dans d'autres contextes.

NB: J'ai ajouté volontairement des espaces aux balises AllVideos Related pour éviter que le plugin les transforme.

Dans le cadre de développements spécifiques sur Joomla, je peux vous aider à faire ces corrections en toute sécurité.