Comment faire un schéma heuristique sur le web

Schéma heuristique sur le web

Je cherche toujours le moyen de prendre de notes avec un ordinateur.. j’ai encore rien de très pratique. (mais ça commence avec ce système de wiki) Souvent je prends des notes à la main sous forme de schéma heuristique.

Le but est donc de pouvoir refaire quelque chose de semblable avec un ordinateur. Et mieux encore dans une page web!

J’ai la possibilité de faire des bloc pour représenter un diagramme, mais je n’ai encore rien trouvé pour faire un trait de liaison entre les différents bloc. L’HTML n’est pas fait pour ça.

Le mieux est de s’orienter du côté du SVG, c’est un format ouvert. Compris par les navigateurs web (les vrais navigateurs), et vectoriel. Tout ce que l’on demande.

Le but est de pouvoir insérer des schémas heuristiques directement dans la page, dans un document wiki. En attendant de pouvoir vraiment réaliser ceci. Voici déjà quelques pistes à propos des applications de bureau dans le domaine des schémas heuristiques et aussi de la prise de note.

Le meilleur choix que j’ai trouvé est un projet open source et multi-plateforme c’est freemind. Comme il est possible de le voir directement en exemple dans sa documentation, il existe même une applet java qui permet d’afficher les schémas dans une page web.

Le logiciel est également capable d’exporter ses créations dans divers formats, dont l’html, le pdf et surtout le svg. La création du svg est fait avec la bibliothèque Batik de dessin de graph 2d.

aussi http://www.deepamehta.de/docs/download.html permet de faire des graphes.

Il est donc intéressant d’étudier ce fonctionnement pour générer aussi à ma façon un contenu svg pour en mode wiki. Pour ça il faudrait une syntaxe wiki de création de diagramme?

Dans le même genre de réflexion il existe également des logiciels de prise de note. Par exemple, Voodoopad permet de prendre des note et d’ajouter directement un petit dessin fait directement dans une pop up à la main. C’est une bonne idée !

plein d’infos sur des outils pour prendre des notes et gérer de l’info… sur ce blog http://www.opossum.ca/guitef/archives/001347.html

Graphe

J’ai découvert ce magnifique programme qu’est graphviz. C’est un programme qui permet d’afficher les graphes fait dans le format de graphe dot fait par at&t. Graphviz peut également exporter ces document dans de multiple format bitmap ou non. Dans les plus utiles pour moi, png, pdf et svg !

Omnigraffle est capable de lire les documents dot !

C’est une syntaxe assez facile a écrire.. et il semble qu’il existe de multiples programmes qui permettent de convertir ce format dans un autre. Et dans le tas notamment des programme qui peuvent exporter du contenu web! Là on approche du but !

Pour l’instant voici un exemple avec DokuWiki

Il existe aussi une bibliothèque qui est sensée convertir le graphe au format .dot en png ou svg ou pdf pour l’afficher dans une page web. http://www.graphviz.org/webdot/

Omnigraffle -> dot

L’édition graphique d’un schéma c’est quand même plus simple et plus intuitif, cependant, je n’ai trouvé aucun outils de dessin qui soit capable de faire de l’exportation en .dot . Les outils qui font ce genre d’exportation sont souvent des outils qui traitent des donnés et qui les présentent en graphe, mais rarement des outils de dessin de graphe !!

Donc je cherche a utiliser l’excellent omni graffle pour faire des schéma simple au format dot.

Omnigraffle est un logiciel de dessin vectoriel, donc il stock beaucoup d’information sur l’apparence du dessin. Moi j’aimerai juste obtenir des informations de liaison entre objet et les chaîne de caractère qui sont associées.

En décortiquant le format de fichier .graffle on trouve quelques infos. Tout d’abord. Nous avons la chance que le format de fichier est un document xml ! au format .plist d’apple ! Ce qui facilite grandement la compréhension !

Observons le schéma d’un cercle qui est relié par une flèche à un rectangle. Tout d’abord, nous avons:

<key>GraphicsList</key>

qui a pour contenu un tableau des objets qui sont dans le dessin.

Chaque objet est dans une balise <dict> qui elle même contient les infos de l’objet et son id:

<key>ID</key>
<integer>2</integer>

Puis, une flèche, qui est un objet de liaison comporte une tête et une queue.

<key>Head</key>
<dict>
  <key>ID</key>
  <integer>1</integer>
</dict>
<key>Tail</key>
<dict>
  <key>ID</key>
  <integer>2</integer>
</dict>

Cette flèche comporte en elle les informations qui permettent de savoir à quels objets elle est reliée. Ainsi que le sens. Donc, nous avons théoriquement toutes les informations nécessaires pour créer un fichier .dot.

Il faut encore récupérer les chaînes de caractère qui sont en l’occurrence en rtf.

<key>Text</key>
<dict>
   <key>Text</key>
   <string>
      {rtf1macansicpg10000cocoartf824cocoasubrtf410
      {fonttblf0fswissfcharset77 Helvetica;}
      {colortbl;red255green255blue255;}
      pardtx560tx1120tx1680tx2240tx2800tx3360tx3920tx4480tx5040tx5600tx6160tx6720qcpardirnaturalf0fs24 cf0 salade bleue}
   </string>
</dict>

Il faudra voir le comportement du rtf, pour l’instant, ce n’est pas très concluant.. un fichier entièrement fait en texte n’est pas bien interprété par omnigraffle… et dans l’autre sens.. le codage rtf n’est pas terrible comme chaîne de caractère pour le format dot… donc là il va probablement falloir faire une petite conversion de format pour le texte.

Dans sa globalité ce projet n’as pas l’air complètement irréaliste. Donc à suivre…

13 Dec 2006 : 15:21

Termes de sorcellerie en informatique

Termes de sorcellerie

Bon… vu que l’informatique c’est parfois comme la sorcellerie… et bien faisons un petit lexique des termes pour s’y retrouver.

  • charme
  • démon
  • diablerie
  • djinn
  • enchantement
  • ensorcellement
  • envoûtement
  • esprit
  • exorciser
  • grimoire
  • génie
  • incantation
  • maléfice
  • maraboutage
  • mauvais oeil
  • philtre
  • possession
  • prière
  • sort
  • sortilège
  • GrandDémon
  • marabout
  • sorcier
  • exorciste
  • chaman
  • Jeter un sort
  • Lancer une incantation

Il semble que l’on invoque un dieu, mais que l’on évoque un démon ! (…. demande quelques recherches et références..)

Matériel

  • Talisman
  • Amulette
  • grigri

Action bienfaitrice

  • conjurer les démons
  • briser l’enchantement
  • exorciser

Les enchantements du web sont gérés par le W3C, le Witches and Wizards World Council.

10 Oct 2008 : 08:56

Xtrem Programming

Xtrem Programming

Quelques notions..

  • Communication directe de vive voix.
  • feedback avec le client
  • simplicité. (pas focrément prévoir d’extention futur qui ne se feront jamais !!!)

en pratique

  • tout est basé sur l’implémentation des sécénarios utilisateurs du client
  • application fonctionnelle disponible le plus souvent possible pour faire des feed back
  • Tout programmer à 2 sur le même ordinateur !!
  • toute l’équipe doit connaitre l’entier du code
  • le minimum de documentation. L’accent est mis sur l’application fonctionnelle et simple. => commenter le code
  • réagir au changement plutôt que de suivre un plan
  • auto-organisation de l’équipe

Les problèmes à résoudre

En gros le problème de tout développement informatique c’est:

  • faire quelque chose qui correspond aux besoins du client.
  • mais le client ne sais pas exactement ce dont il a besoin
  • la communication entre le client et le programmeur n’est évidemment pas parfaite ce qui induit forcément des décalages de compréhension, entre ce que le client veux et ce que le programmeur comprend.

Donc les possibilités sont:

  • faire une application terriblement souple qui puisse gérer tout les cas possibles. Ce qui fait que même de manière parfois détournée le client arrivera toujours à faire ce qu’il veux.
  • faire une application qui fait juste ce que le client veux mais il faut que ses besoins soient très précis et connu du programmeur.

La première solution est assez idéale, mais terriblement longue à programmer et coûteuse.
La seconde solution est celle qui est la moins longue et coûteuse à développer, mais elle implique que le programmeur ai très bien compris les besoins du client, et que ceux-ci n’évoluent pas ! (ce qui souvent arrive… une idée en amenant une autre…)

La solution

L’ Xtrem programming propose une méthodologie qui prend en compte ces problèmes et qui tente de faire communiquer un maximum les gens de la manière la plus claire possible pour éviter les malentendus. De cette manière les développeurs vont comprendre au mieux les besoins du client et l’application réalisée sera la plus proche de l’application parfaite que l’on pourrait faire.

Les feedback fréquents permettent au client de savoir ce qu’il veut et de vérifier que ce qui se construit correspond à ses besoins.

L’Xtrem programming permet donc de réaliser des applications qui répondent de manière concrète et simple aux besoins actuels d’un client.

Cependant, ce ne sera peut être pas la meilleure des méthodes pour garantir qu’une application puisse correspondre à des besoins futurs !!!
… mais dans ce cas, le client reviendra vers le programmeur pour lui demander de nouvelles fonctionnalités !

Mon point de vue

Tout n’est pas manichéen, noir ou blanc. La solutions que je préconise est donc plutôt un mélange.
En effet, il est très important de communiquer un maximum, c’est ainsi que l’application va coller le plus possible aux besoins du client, mais il est églament possible de prévoir quelques évolutions possible pour ne pas être piégé plus tard en cas d’évolution futur.

Souvent le client ne voit pas tout de suite les évolutions futur qu’il pourrait intégrer, mais le développeur les voit!

26 Feb 2006 : 21:54

Réflexion à propos des unités de temps et de lumière

Réflexion à propos des unités de lumière et de temps

La lumière

Il y a de nombreuses unité de mesure dans le domaine de la lumière et souvent peu de gens sont au courant de ce que cela signifie. Voici quelques infos à ce sujet.. C’est en lisant le catalogue interdiscount que j’ai remarqué qu’il y a plein d’unité que je ne connais pas !

Le contraste

En lisant le catalogue interdiscount, il y a de nombreuses indications à propos des télévisions et projecteurs. Une indication sur le contraste est souvent indiquée, mais que signifie elle ?

Exprimé sous la forme d’un quotient valeur en lux : 1, soit la valeur en lux d’un signal blanc à 100% moins valeur en lux d’un signal blanc à 0%, le tout divisé par la valeur en lux d’un signal blanc à 0% (un signal blanc à 0% correspond à du noir).

2000:1 signifie donc que 2000 est le rapport entre la valeur en lux du signal blanc à 100% – la valeur en lux d’un signal blanc à 0% (la plage maximale en lux du blanc) tout ceci divisé par la la valeur en lux du signal blanc 0%.

En bref, il y a un rapport de 2000 entre la valeur en lux du noir et la valeur maximale en lux du blanc.

Mais qu’est ce qu’un lux ??

Le lux

Le lux est une unité de mesure de l’éclairement lumineux. Il caractérise le flux lumineux reçu par unité de surface.

1lx = 1lm / m^2

Le flux lumineux se mesure en lumen…. mais qu’est ce ??

Le lumen

Le lumen est l’unité dérivée du système international utilisée pour le flux lumineux. En physique, Son symbole est lm.

Par définition, 1 lumen correspond au flux émis dans un angle solide de 1 stéradian par une source ponctuelle uniforme située au sommet de l’angle solide dont l’intensité vaut 1 candela.

1lm = 1cd x sr

C’est donc une unité dérivée de la candela……. encore une unité mais qu’est ce donc ?

La candela

La candela est l’unité de mesure du système international de l’intensité lumineuse, c’est-à-dire de l’éclat perçu par l’œil humain d’une source lumineuse.

La candela est une des 7 unités de base du système international (SI). Sa définition est:

La candela est l’intensité lumineuse, dans une direction donnée, d’une source qui émet un rayonnement monochromatique de fréquence 540×1012 hertz et dont l’intensité énergétique dans cette direction est 1/683 watt par stéradian.

Selon cette définition, l’intensité lumineuse dépend de la puissance énergétique envoyée. Cette puissance est la dérivée d’une Energie…. !

Cette définition n’est qu’une écriture précise de ce que l’on utilisait auparavant comme unité… la chandelle… Candela c’est du latin et ça veut dire chandelle… voilà pourquoi ! Donc là ça devient tout de suite plus concret. 10 candela, c’est l’intensité de 10 chandelles !

Il semble que l’ordre de grandeur de l’intensité lumineuse d’une ampoule que l’on peut trouver pour éclairer une pièce est de l’ordre de 120 candela !

Donc en gros.. le candela fourni une source de lumière avec une intensité. Puis cette intensité va être diffusée dans l’espace avec un flux en lumen selon un angle solide. Puis il est utile de voir l’éclairement que ce flux est capable de faire sur une surface d’un mètre carré.

Pour en revenir au contraste, c’est donc le rapport entre l’éclairement maximal d’une surface en blanc et de la même surface en noir.

quelques infos très intéressantes par ici: http://www.sonelec-musique.com/electronique_theorie_led_et_lumiere.html

Le temps

Le temps est bien la grandeur pour laquelle les unités sont le plus folklorique… il n’est pas facile de s’y retrouver.

Le temps est une grandeur difficile à appréhender. C’est une grandeur absolue pour tout le monde, mais elle est relative depuis qu’Einstein a tenté d’en percer les mystères!

Pour l’humain, le temps est absolu, et se présente sous forme de cycles qui sont en général issus de phénomène astronomique. Puis, pour désigner des intervalles de temps, on utilise des multiples ou des divisions des cycles de base.

Le cycle jour/nuit est le premier qu’un humain remarque et peut compter. Ensuite, il y a le cycle lunaire qui s’observe bien par les multiples phases par lesquelles il passe. Et finalement c’est au travers des saisons que l’humain est capable d’observer le passage des années.

Nous avons donc 3 cycles principaux:

  • le jour
  • le mois
  • l’année

La problématique de la mesure d’intervalles de temps selon ce principe, est que les 3 phénomènes astronomiques de base qui règlent notre vie sont indépendants et que les divisions qui en ont été faites sont toute arbitraire et souvent très différentes.

On tente de faire un nombre de jour entier pour donner un mois et un nombre de mois entier pour tomber sur une année, mais ce n’est pas possible ! Il y a donc des correctifs. Des années bissextiles.

Vu la difficulté, les astronomes on renoncés depuis longtemps à faire corréler tous ces cycles. Ainsi, notre calendrier est un calendrier solaire, il ne se préoccupe en rien des phases de la lune. Par contre le calendrier musulman est un calendrier lunaire. L’année dépend des phases de la lune.

Le mois que nous utilisons dans le calendrier grégorien est donc un mois artificiel qui a une durée qui correspond à un nombre de jour fixe dans la durée ressemble au mois lunaire par simple héritage historique.

Les humains actuels utilisant ce calendrier ne se préoccupent donc plus que de 2 cycles naturels.

  • le jour
  • l’année

Les durées plus longues se calculent en fonction de ces cycles de bases. Pour les longues durées on utilise les multiples d’année. Certains multiple sont très utilisés donc il ont des noms.

  • millénaire = 1000 années
  • siècle = 100 années
  • décénie = 10 années
  • lustre = 5 années
  • année

Pour mesurer des durées plus courte que l’année, on utilise des nombres de jour. Ainsi on a donné des noms aux durée qui sont utilisées fréquemment.

  • mois
  • semaine

Ainsi, on a reconstitué l’équivalent du mois pour le synchroniser sur la durée du jour. Cependant l’utilisation des mois est très compliqué, elle doit toujours être contextualisée pour être précise, car suivant de quel mois on parle il n’a pas la même durée !! Cette durée varie entre 30 et 31 voir 28 ou 29 pour le mois de février !

N’importe quoi !! actuellement l’inventeur d’un système pareil se ferait lyncher tout de suite ! La semaine est une durée de 7 jours. Le pourquoi de l’utilisation de 7 et pas 8 ou 9 jours n’est pas très clair. Il y a certainement la référence biblique du nombre 7 que l’on retrouve partout. Le genèse indique que Dieu à construit le monde en sept jours.

Mais cette durée de 7 jours correspond également au quart du mois lunaire. Le cycle de la lune est divisé en plusieurs phases que l’on nomme parfois quartier. (nouvelle lune, premier quartier, pleine lune, dernier quartier) Chacune de ces phase correspond donc à une semaine. C’est une explication astronomique de la durée de la semaine. Puis cette durée à certainement été normalisée à 7 jours pour simplifier l’utilisation de la semaine.

Le jour et l’année sont deux cycles qui sont contraignant, on est obligé de faire avec. Le cycle de la lune, à moins d’être marin breton et moins contraignant pour les activités courante.

L’agriculture dépend du cycle des saisons, donc l’année est une mesure importante pour un humain. Lorsqu’il fait nuit, l’activité humaine est fortement entravée. Le cycle jour/nuit est donc un cycle dont il est difficile de ne pas tenir compte !

Plus la technologie avance, plus les cycles naturels dirigent de moins en moins les activités humaine. Avec l’invention de la lampe, donc de l’évolution du feu à la lampe à led, le cycle du jour et de la nuit peut être modifié pour un humain en condition spéciale. Cependant, peu d’humain vivent et aiment vivre coupé totalement de la lumière solaire, donc le cycle est toujours présent.

Avec l’agriculture sous serre et la globalisation des transports l’agriculture ne dépend plus du cycles des saisons, et donc l’année n’est plus indispensable comme moyen de mesure du temps.

L’humanité est donc arrivée à un point technologique qui lui permet de se libérer de ces cycles naturel contraignant qui jalonnent le temps. Cependant, par héritage culturel, on utilise toujours ces mêmes unités de mesures car elle sont toujours visible. On peut imaginer que dès le moment où ces cycles ne seront plus visibles la mesure du temps se fera différemment. Avec l’avènement de monde virtuel ou avec le voyage spatial on peut imaginer que la mesure du temps se fasse autrement !

Nous n’avons parlé ici que des durées d’un jour et plus. Au fil du temps, les civilisations humaines ont senti le besoin d’utiliser des intervalles de temps inférieurs au jour.

L’idée a donc été de diviser la journée en intervalle de temps: l’heure. Il semble que ce soit les babyloniens qui sont à l’origine de la décision arbitraire de diviser le jour en 12 parties. En effet, le babyloniens utilisaient un système de numération en base 12.

En comptant la nuit, dans la durée d’un jour complet, on trouve 2 fois 12 heures, soit 24h dans un jour.

Puis au fil du temps, selon les besoins on a encore divisé les heures. Cette dernière à été divisée en 60 parts pour donner naissance à la minute, et pour continuer on a encore divisé la minutes par 60 pour obtenir des secondes.

Ensuite pour plus de précision, on a commencé à différencier les 10ème de seconde et les 100ème de secondes.

Bref, c’est la partie la plus arbitraire et la plus compliquée de la mesure du temps.

Chaque époque de l’histoire ajoute sa mesure de durée et l’utilise selon sa manière de compter.

Ainsi pour des durée de l’ordre de l’année et plus ce sont des multiples d’année qui sont compté et ont parfois des noms. Pour une durée d’une grandeur entre le jour et l’année, on utilise des jours comme base et des constructions à base de jours que sont les semaines et les mois.

Pour différentier les moments d’une journée, on utilise un découpage en heure selon une base 12.
Pour mesurer des durées entre l’heure et la secondes on utilise un double découpage en base 60 !
Pour mesurer des durées inférieurs à la seconde, comme dans les compétitions sportive, on utilise un découpage de la seconde en base décimale !

Il existe donc plusieurs bases de calcul différentes pour mesurer un intervalle de temps!

Ce système est très compliqué. Le système international d’unité est sensé uniformiser les unités de mesures pour tout le monde. Il y a donc pour les grandeurs physique de base une seule unité qui est définie.

Pour le temps, c’est la seconde qui a été choisie. On a créé de toute pièce une définition de la seconde qui corresponde à la durée de celle qui existait déjà. A la grande différence que l’on ne se base plus sur un dérivé astronomique pour définir la seconde. Depuis 1967 c’est l’atome de césium qui défini ce qu’est une seconde. La définition exacte est:

La seconde est la durée de 9 192 631 770 périodes de la radiation correspondant à la transition entre les deux niveaux hyperfins de l’état fondamental de l’atome de césium 133

En 1997 cette définition a été complétée pour préciser les conditions de l’atome: Cette définition se réfère à un atome de césium au repos, à une température de 0 K

Ainsi, en se basant sur une définition hors de l’astronomie, il est possible de totalement s’extraire des cycles astronomiques qui régissent la mesure du temps depuis que l’humain mesure le temps.

Dans l’idéal, il se pourrait que l’on utilise la seconde comme unité de base et ensuite comme pour n’importe quelle unité SI on la décline en puissance de 10 multiple de 3.

Nous avons le mètre et le kilomètre pourquoi ne pas avoir la seconde et la kiloseconde.

Après tout est question d’habitude.

  • 1Ks = 16.666 minutes ~= à notre quart d’heure
  • 10ks = 2h 46 minutes
  • 1Ms = 11jours 12h 46 minutes
  • 1Gs = 31 ans 251 jours 13h34 minutes 53 secondes

Ensuite, pour définir un rendez vous, comme il existe un moyen de donner des coordonnées spatiale pour désigner un lieu. Il faut aussi un moyen d’indiquer un moment précis dans le temps.

C’est la base d’un calendrier, d’indiquer l’heure. A quoi peut ressembler un calendrier basé uniquement sur la seconde et les des multiples SI ???

1 Dec 2008 : 14:22

support du svg

l’idéal

L’idéal est de pouvoir afficher une carte svg en mode natif dans une page xhtml. Avec le support des fonctionnalités de zoom/déplacement. Utiliser css pour appliquer les couleurs au document svg.

Problèmes

  • ie supporte pas de mélange de grammaire xml et le type mime application+xml ou image/svg+xml donc on utilise le plugin.. donc pas de visibilité dans le dom et donc pas de javascript.
  • compression gzip ne semble supportée que si le fichier est externe à la page, qu’il est inclue avec <embed> ou <object> ou <img> …. mais sur les 3 seul <embed> à l’air vraiment supporté dans tous les navigateurs !!! ce qui pose problème vu que <embed> n’est pas de l’xhtml !!!
  • implémentation zoom pas encore faite dans les navigateurs supportants svg nativement.
  • implémentation css parfois hasardeuse. (opéra ne voit rien. Firefox ne fait pas de rafraîchissement, il ne fait que d’appliquer une fois.)

choix à faire

  • utilisation des balises svg ou du css (attribut fill… ou propriété background-color)
  • plugin ou implémentation native (quoi qu’il semble être possible de pouvoir faire les deux si tout les namespaces sont indiqué. en particulier xlink qui est reconnu implicitement par le plugin et qui de par ce fait n’est souvent pas défini par les développeurs ne testant que dans le plugin.)
  • pour l’instant, le choix du plugin ou pas est surtout un choix: zoom ou pas.

questions

  • ajax est ce possible avec un fichier qui est mis dans la page à l’aide d’un fichier externe. <embed> d’un fichier… toto.svg ou.. même svgz. Le fichier est il vu dans le DOM ? Il me semble que c’est ce qui est fait sur carto.net mais je comprend pas bien ?
  • Le roadmap pour firefox prévoit il une implémentation des fonctions de zoom assez rapidement ? (firefox 3 va utiliser gecko 1.9 qui lui supportera svg 1.1)

Implémentations actuelle et pour l’avenir du svg

  • firefox supporte svg nativement. FF2 apporte des amélioration côté du texte.
  • safari supporte svg dans la version de développement qui sortira –probablement en août– au printemps
  • opéra supporte –tiny– svg.. –et la bêta de la version suivante supporte svg–
  • le plugin adobe est le plus complet. Mais il est abandonné depuis qu’adobe à acheté flash !
  • aucun support actuel en natif des fonctions d’animation.

Pour voir où on en est voici le détail des implémentations:

12 Oct 2006 : 14:19
Depuis cet article ça a pas mal changé le svg est assez bien supporté par les navigateurs gentils.. 

Généalogies des navigateurs web

Généalogie des navigateurs web

Cette page est un bloc note pour stocker des informations relative à l’historique des navigateurs web.

Le navigateurs web est vraiment le logiciel incontournable actuellement. Tout ce fait de plus en plus sur le web. Cependant, peu de personne savent vraiment ce qu’est un navigateur web, (sans même entrer dans le côté technique.). En effet, énormément de personne confondent déjà le web et internet.

Pour beaucoup de gens, internet, c’est la petite icone bleue en forme de e, alors quand on leur explique que le web n’est qu’un des nombreux service d’internet, il ne comprennent pas forcément !

Pour utiliser ce service qu’est le web, il faut un navigateur web. Actuellement (en 2006), les navigateurs les plus courants sont Internet Explorer, FireFox, Safari,opera.

Mais il en existe beaucoup d’autres, et il en a existé beaucoup d’autres. Leur histoire est complexe, les enjeux sont énormes, et souvent le grand publique ne sais rien. J’ai donc commencé à faire quelques recherches pour tenter de faire un arbre généalogique des navigateurs web.

Quelques dates:

  • 1990 Tim Berners-Lee lance le 1er navigateur Web appelé World Wide Web qui tourne sur NeXT
  • mars 1993 Lancement de Lynx
  • 1993 Mosaic (navigateur mode texte) tourne sur X-Windows, Unix et Mac
  • décembre 1994 Netscape crée Mozilla qui servira de base au navigateur Netscape 1.0
  • août 1995 Internet Explorer est inclus dans Windows 95
  • septembre 1995 Netscape Navigator 2.0
  • 1996 Internet Explorer 2.0
  • 1996 Première version d’Opera
  • août 1996 Netscape Navigator 3.0
  • août 1996 Internet Explorer 3.0
  • juin 1997 Netscape Navigator 4.0
  • mars 1999 Netscape Navigator 4.5
  • mars 1999 Internet Explorer 5
  • septembre 1999 Netscape Navigator 4.7
  • novembre 2000 Netscape Navigator 6
  • juin 2002 Mozilla 1.0
  • novembre 2006 Internet Explorer 7.0
  • 1983 Editeur SGML Grif (appelé plus tard Thot) GRenoble Interactive Formatter
  • 1990 WorldWideWeb
  • 1992 Erwise, ViolaWWW, pc: Midas, Mac: Samba
  • 1993 NCSA Mosaic (université de l’Illinois) et Lynx. => image(Mosaic 0.10) ; formulaires interactifs (Mosaic 2.0pre5)., Arena de HP
  • 1994 Netscape Navigator 1.0. Cello, IBM WebExplorer, Cyberdog (date pas fiable), Spyglass Mosaic on April 5th (début du travail), Navipress (aussi éditeur)
  • 1995 Microsoft Internet Explorer 1.0 et 2.0. => formatage tabulaire (Netscape Navigator 1.1b1), documents multi-cadres (Netscape Navigator 2.0b1), Java, JavaScript (Netscape Navigator 2.0b3). HotJava, OminWeb (pour next), w3m (texte)
  • 1996 Netscape Navigator 2.0 et 3.0 ; Internet Explorer 3.0 ; Opera
  • 1997 Netscape Navigator 4.0 ; Internet Explorer 4.0. Amaya 1
  • 1998 Netscape Navigator 4.5 ; projet Mozilla. => AOL rachète netscape qui a perdu la guerre !
  • 1999 Internet Explorer 5.0. Grail (mort?)
  • 2000 Netscape 6.0, K-Meleon, OmniWeb (pour osx)
  • 2001 Internet Explorer 6.0. Elinks (texte), Off By One
  • 2002 Mozilla 1.0. Netscape 7.0, Phoenix (en développement)
  • 2003 Safari, Phoenix devient FireBird
  • 2004 Netscape 7.2 (basé sur mozilla 1.7),Mozilla Firefox 1.0 (9 nov 2004 (anciennement phoenix et firebird), mais développement depuis 2002 par david Hyatt !)
  • 2005 Netscape 8.0 (basé sur firefox 1.0), sleipnir
  • 2006 Mozilla Firefox 1.5. et 2. Opéra 9 et IE7 (grande année)

Liens d’héritage

  • NCSA Mosaic => (c’est juste les màªme gens, mais pas le code) Netscape Navigator => Netscape Communicator (avec module composer et mail) => Mozilla Gecko(pas encore sorti il est déjà la base de netscape 6)
  • Mozilla => Netscape 6 (onglets et bloc popup)
  • Mozilla 1.7.12(Gecko) => K-Meleon (utilise une GUI windows et pas XUL.. pour àªtre plus léger !)
  • Mozilla => Beonex ??? (win et osx)
  • Mozilla => Chimera => Camino
  • Mozilla => Galeon => Epiphany (pour gnome)
  • Mozilla => Skipstone
  • Mozilla => Salamander (fin dec 2003)
  • Mozilla => Phoenix => Mozilla Firebird => Mozilla Firefox => Flock
  • Mozilla => SeaMonkey (été 2005 suite de mozilla mais plus par la fondation)
  • Firefox => MadFox (2005 et déjà abandonnée. Le but était d’ajouter des fonctionnalité de IE à firefox !)
  • Firefox 1.0 => Netscape 8.0
  • Grift/Thot (editeur sgml) => Symposia (editeur html) => Amaya
  • Arachne (navigateur pour DOS)
  • Dillo (ne supporte pas javascript. source de 400ko !)
  • HotJava
  • NCSA Mosaic => Spyglass Mosaic (un accord existait pour avoir le code, mais il n’a pas été utilisé !)
  • Spyglass Mosaic => Microsoft Internet Explorer
  • Microsoft Internet Explorer => MyIE (MyIE2) => Maxthon (mais peux aussi utiliser Gecko !)
  • Microsoft Internet Explorer => Avant browser (surcouche IE)
  • IE => kioware
  • GUI Avant Browser + moteur Gecko => Orca Browser
  • Konqueror (khtml) => Safari (webCore) => omniWeb (depuis février 2003)
  • konqueror => Abrowse …. pour AtheOS ? Syllable
  • Safari (webkit) => Shiira
  • Safari (webkit) => Sunrise browser (webcore et le moteur et webkit le moteur + des API)
  • Safari (webkit) => TrailBlazer (2004)
  • Safari (webkit) => KidsBrowser
  • Safari (webkit) => BumperCar
  • Safari (webCore) => Atlantis
  • icab
  • Comppuserve
  • Ie5 mac (tasman)
  • Gecko=> AOL mac

linux

  • SkipStone
  • Konqueror
  • Galeon
  • Epiphany

En 2002: En tout, 115 navigateurs différents, sous plusieurs versions (Evolt).

(OmniWeb est l’inventeur du blocage de popup)

NCSA = National Center for Supercomputing Applications

  • Line Mode Browser un client pour les terminaux fonctionnant en mode ligne (développé au CERN) ;
  • Cello un client pour les PC sous Windows (développé à Cornell Law School);
  • Chimera un client pour l’environnement X-Window, utilisant les Athena’s Widgets ;
  • tkWWW un client pour l’environnement X-Window utilisant la boîte à outils tk.

Nom des principaux moteurs

  • mozilla => Gecko
  • safari => khtml/webcore
  • IEmac => tasman
  • IE => trident
  • Opera => Elektra puis presto

Superbe comparaison sur wikipédia en

Voici l’arbre généalogique des navigateurs web en pdf.

Aperçu du rendu de différents navigateurs web début 2007

Voici un aperçu du rendu de différents navigateur web que j’ai réalisé avec les mêmes pages de référence.

Tout d’abord le site du groupe scout marfaux. Qui est une page moderne faite avec différents style css subtiles, qui peuvent être une difficulté pour les navigateurs anciens ou pas très futés. Il y a du positionnement fixe, de la transparence avec le style opacity, des arrondis de bordure. Ce sont les principales différences sur lesquelles les navigateurs ont des comportement différents.

La seconde page est le page wikipedia qui concerne les navigateur web. C’est une page qui est sensé s’affiche de manière correcte pour une majorité de navigateur.

Dans les navigateurs actuels, il existe des familles de navigateurs qui utilisent le même moteur. Et parfois des navigateur totalement indépendant avec leur propre moteur de rendu.

Sans trop entrer dans les détails subtils d’héritage et affiliation, Les grandes familles sont:

  • Gecko de Mozilla
  • Trident (windows) et Tasman (mac) de Microsoft
  • WebKit d’Apple
  • Presto moteur d’Opera

J’ai réalisé ces captures d’écran sur un mac osx 10.4.9 avec des navigateurs web qui fonctionnent sur cette plateforme. Ce ne sont pas forcément les versions les plus récentes. Mais au moins ils fonctionnent.

Les moteurs indépendants

Amaya

C’est le navigateur officiel du w3c, ce n’est pas vraiment un navigateur utilisable, c’est plutôt un outils expérimental pour tester diffèrentes nouvelles spécifications. Ce navigateur est également un éditeur de page HTML. Ce qui correspond à la philosophie originelle du WorldWideWeb de Tim Berners Lee. Le web est accessible en lecture et écriture. Cette philosophie, n’a jamais vraiment démarrée et le web est plutôt devenu une vitrine de document non éditable. Mais ces dernières années, la philosophie lecture/écriture est revenue avec l’avènement du wiki ! L’internaute devient un acteur. Mais avec le wiki, ce n’est plus le navigateur qui permet l’édition de page, c’est plutôt le document web lui même qui devient une application pour s’auto-éditer.

En effet, le web originel fait de documents statiques devient de plus en plus une plateforme applicative.

Capture d’écran de Amaya 9.2.2 2007_04_12_11_13_amaya_9_2_2_marfaux.png 2007_04_12_11_34_amaya_9_2_2_wikipedia.png


Opera

Opera est un navigateur multiplateforme. Son moteur s’appelle presto. Ce moteur est surtout présent dans des applications embarquées comme certains téléphones portables ou la nintendo DS et la wii. Il est également utilisé par Adobe dans la creative suite.

Capture d’écran de opera 8.54 2007_04_12_11_37_opera_8_54_marfaux.png 2007_04_12_11_37_opera_8_54_wikipedia.png


iCab

iCab est un navigateur web qui est développé pour mac depuis 1999. Il est issu d’un navigateur fonctionnant sous Atari. C’est actuellement le seul navigateur qui est développé pour les macs sur processeur 68k.

Capture d’écran de iCab 3.0.2 2007_04_12_11_42_icab_3_0_2_marfaux.png 2007_04_12_11_43_icab_3_0_2_wikipedia.png


Internet Explorer

Internet explorer pour mac est sorti en début 2000. (pour Mac OSX) C’est le premier navigateur web a implémenter presque complètement css1. (Même si actuellement, ce navigateur parait ne pas bien supporter les css) Le moteur Tasman est utilisé pour cette version d’Internet explorer mac. Donc, ce navigateur n’a rien en commun avec la version d’internet Explorer pour windows qui lui utilise le moteur trident.

Capture d’écran de IE 5.2 pour mac avec le moteur Tasman 2007_04_12_11_44_internet_explorer_5_2_mac_marfaux.png 2007_04_12_11_45_internet_explorer_5_2_mac_wikipedia.png


Gecko

En 1998, sur la fin de la guerre des navigateurs web, la société Netscape à l’agonie, ouvre le code source de son navigateur à la communauté. Le Projet mozilla est créé, il reprendre le travail sur Gecko pour l’améliorer. A l’aide de toute une communauté de développeur, ce moteur devient en quelques années un des plus performant, et il équipe actuellement toute une famille de navigateur web.

Netscape

Netscape est le navigateur phare de la période de grande expansion des débuts du web. (c’est compréhensible ce que je dis ?? en gros.. 1994 1998) Nestcape est le grand perdant de la guerre des navigateurs. Guerre perdue à cause des pratiques commerciales de microsoft pour imposer IE, mais aussi un peu à cause du manque de volonté de la part des dirigeants de netscape de vouloir implémenter des standards comme css.

Toujours est il que Gecko et toute la famille de navigateurs basés dessus doivent tout à Netscape, et paradoxalement le Netscape actuel doit tout à Mozilla et Gecko, vu qu’il utilise maintenant le moteur développé par la communauté. Toutefois, la part de marché est devenue anecdotique, en regarde des autres navigateurs utilisant Gecko.

Capture d’écran de Netscape 7.2 Gecko/20030208 2007_04_12_11_50_Nestscape_7_2_Gecko_20030208_marfaux.png 2007_04_12_11_51_Nestscape_7_2_Gecko_20030208_wikipedia.png


Mozilla

Mozilla est donc plus ou moins le Netscape de 1998 renommé et rendu opensource. Cependant, depuis, il a fait du chemin. Le moteur s’est beaucoup amélioré. Mais le principe de l’application reste le même: un gros tout en un qui fait navigateur web, client e-mail, irc, aim et web composer.

Capture d’écran de Mozilla 1.7.13 Gecko/20060414 2007_04_12_11_52_Mozilla_1_7_13_Gecko_20060414_marfaux.png 2007_04_12_11_56_Mozilla_1_7_13_Gecko_20060414_wikipedia.png


SeaMonkey

SeaMonkey n’est qu’un renommage de Mozilla. (SeaMonkey 1.0 = Mozilla 1.8). En 2005, la fondation mozilla à annoncé qu’elle avait l’intention de cesser le développement de Mozilla et de se concentrer sur Firefox et Thunderbird qui sont équivalents au tout en un Mozilla, mais dans des applications séparées.

Une communauté de développeur ne voulant pas abandonner Mozilla s’est mobilisée pour reprendre la direction du projet sous le nom de SeaMonkey. La version 1.0 est sortie début 2006.

Capture d’écran de Seamonkey 1.5a Gecko/20060822 2007_04_12_11_54_seamonkey_1_5a_Gecko_20060822_marfaux.png 2007_04_12_11_55_seamonkey_1_5a_Gecko_20060822_wikipedia.png


Firebird

Dès le printemps 2002, un projet expérimental tend à simplifier Mozilla et séparant ses différentes composantes. Le projet ne garde que la partie navigateur web et devient le navigateur web Phoenix. Le 14 avril 2003, pour des raisons de droit des marques, Phoenix change de nom et devient Firebird. En fait, le nom est plus précisément Mozilla Firebird pour faire la distinction avec FirbirdSQL qui est un gestionnaire de base de donnée. Finalement suite à un manque de visibilité à cause de ce problème de nom, le 9 février 2004 Mozilla Firebird devient officiellement Mozilla Firefox.

On peut donc actuellement considérer que ce navigateur est une vieille version de Firefox.

Capture d’écran de Firebird 1.4a Gecko/20030728 2007_04_12_13_43_Firebird_marfaux.png 2007_04_12_13_44_firebird_wikipedia.png


Firefox

Firefox est l’illustre descendant de du projet Phoenix/Firebird, lui même descendant de Mozilla et donc de Netscape… (voir ci-dessus pour les détails) Firefox est actuellement le navigateur en vogue. Actuellement (avril 2007), sa part de marché se situe entre 20% et 30% suivant les statistiques.

Firefox est devenu le produit phare de la fondation Mozilla et c’est également un des logiciels Open Source les plus connu. La grande force de ce navigateur par rapport à d’autres est la possibilité de créer des extensions, ce qui permet de combler tous les besoins des utilisateurs dans le domaine de la navigation web.

Capture d’écran de Firefox 2.0.0.3 Gecko/20070309 2007_04_12_13_47_firefox_2_Gecko_20070309_marfaux.png 2007_04_12_13_48_firefox_2_Gecko_20070309_wikipedia.png


Camino

Camino, à l’instar de Firefox est un projet qui tend simplifier Mozilla pour ne garder que la partie navigteur web de l’application. Comme son demi-frère Firefox, camino a changé de nom, au début, il s’appelait chimera. Camino est vraiment le demi-frère de Firefox, c’est même son grand demi-frère ! En effet, chimera comme FireFox a été conçu par David Hyatt (entre autre). David est un développeur très prolixe, en février 2002, il participe à la création de chimera/camino, puis au printemps il participe au début du projet phoenix/firebird/firefox, et en été, il s’en va chez Apple développer Safari !

Camino est donc le demi-frère de Firefox, ils utilisent tous deux le moteur Gecko. Cependant, Camino est exclusivement conçu pour mac avec les API coca. Il s’intègre donc mieux au mac que firefox. (avantage qui tend à s’effacer avec les progrès fulgurant de Firefox)

Capture d’écran de Camino 1.01 Gecko/20060427 2007_04_12_13_50_camino_1_01_Gecko_20060427_marfaux.png 2007_04_12_13_51_camino_1_01_Gecko_20060427_wikipedia.png


Flock

Flock est un navigateur web qui est issu de firefox. Le but est d’intégrer directement des fonctionnalités dites web 2.0. C’est à dire que flock intègre des outils pour gérer des blogs, que les favoris sont directement importés d’un compte del.icio.us … etc..

Capture d’écran de Flock 0.7.6 Gecko/20060929 2007_04_12_13_54_flock_0_7_6_Gecko_20060929_marfaux.png 2007_04_12_13_54_flock_0_7_6_Gecko_20060929_wikipedia.png


Webkit/webcore

Le webkit est carrément encore un demi-frère de FireFox ou camino. C’est également un création dans laquelle David Hyatt a participé…. et participe toujours ! Mais en même temps, le webkit.. ou plutôt le webcore est plutôt un cousin, car il n’est pas du tout basé sur Gecko et l’héritage Netscape/Mozilla. Le webcore est une création basée sur khtml, le moteur de rendu de du navigateur Konqueror qui lui fait partie du projet KDE d’interface utilisateur graphique pour linux.

Le webcore est le moteur de rendu html-css. Le webkit est un framework qui inclu le webCore et javascriptCore. Le webkit permet à toutes les applications sur mac d’utiliser facilement des technologies web.

C’est Apple qui est à l’origine de projet du webcore/webkit. C’est durant l’été 2002 que David Hyatt à rejoint apple pour développer la base du nouveau navigateur web devant équiper tous les macs. (à l’époque Internet explorer était le navigateur phare aussi sur les mac ! … même si chimera et omniweb commençais à apporter une lueur d’espoir, le monde était bien sombre sous la coupe de microsoft)

Le 7 janvier 2003, Apple annonce Safari et le Webcore/webkit, le même jour la communauté a été informée des modifications faites dans khtml pour obtenir le webcore.

Le webcore est actuellement un des meilleurs moteur de rendu html. Il équipe aussi toute une famille de navigateurs et d’application sur les macs et ailleurs. Le webcore est aussi à la base du navigateur S60 de nokia qui équipe des téléphones mobiles, ainsi que de l’environnement de développement d’application Appollo d’adobe.

Le webcore a aussi permit d’améliorer son parent direct: khtml, et donc aussi la navigation web avec konqueror. (Même si la collaboration ne s’est pas toujours fait sans heurts)

Safari

Safari est sorti en janvier 2003, c’est le navigateur maison d’apple. (mais il ne faut pas oublier la communauté qui est aussi impliquée dans le projet webkit) C’est un navigateur qui est destiné aux macs et qui a permis à Apple de ne plus distribuer Internet explorer sur les macs ! C’est actuellement un des meilleurs navigateurs existant. Il est également capable de lire nativement du pdf.

Capture d’écran de safari 2.0.4 AppleWebKit/419.3 2007_04_12_13_58_safari_2_04419_3_marfaux.png 2007_04_12_13_59_safari_2_04419_3_marfaux.png


OmniWeb

OmniWeb est un navigateur méconnu, mais qui a déjà une longue histoire. La première version est apparue en 1995 sur NeXTStep, puis a été porté sur Mac OSX en 2000. Jusqu’à l’arrivée de safari, omniweb était un des navigateurs phare sur mac (surtout pour les gens ne voulant pas IE).

En février 2003, juste après la sortie de Safari, OmniGroup a décidé d’abandonner son moteur html propriétaire et d’adopter le WebCore comme moteur. OmniWeb est le premier navigateur à intégrer une fonction anti-popup !

Capture d’écran de OmniWeb 5.1.3 AppleWebKit/125.4 2007_04_12_14_01_omniweb_563_66125_4marfaux.png 2007_04_12_14_02_omniweb_563_66125_4wikipedia.png


Shiira

Shiira est un navigateur web qui est à Safari ce que Flock est à Firefox ! Ce qui signifie que Shiira est un navigateur très semblable à safari, mais qui dispose de plein de petites fonctions supplémentaires comme le glissé-déposé pour réorganiser les onglets.

Shiira est développé depuis 2005 par des japonnais.

Capture d’écran de shiira 2 AppleWebKit/419 2007_04_12_14_04_shiira419marfaux.png 2007_04_12_14_05_shiira419wikipedia.png


Sunrise Browser

Sunrise browser est un navigateur basé sur le webkit. Il permet de voir que depuis l’avènement du webkit, il n’est plus très difficile de concevoir un navigateur web pour mac!

Sunrise Browser dispose de fonctions spéciales pour régler l’opacité et la taille des fenêtres.

Capture de sunrise breoser AppleWebKit/ 2007_04_12_14_06_sunrise_browser_marfaux.png 2007_04_12_14_07_sunrise_browser_wikipedia.png


Webkit (presque Safari 3)

Le webkit est continuellement en développement, mais il sort une nouvelle version de safari tous les 2 ans ! Donc pour bénéficier d’une version de safari avec un moteur web des plus récent et performant, il suffit de télécharger la dernière version du webkit.

Il est donc possible de changer tous les jours sa version de safari. (en fait, safari ne change pas, c’est juste le webkit à l’intérieur qui change)

Depuis février 2007 cette version du webkit est stabilisée en vue de l’intégrer tout prochainement à la nouvelle mouture de Mac OS 10.5 qui sortir d’ici peu.

Ce nouveau webkit apporte principalement le support natif de SVG ainsi que la personnalisation des boutons et formulaires via du css et une foule d’améliorations dans le support de feuille de style, css2 et css3. (les bordures arrondie, des images comme bordure de boites, l’affichage de texte multi-colonne)

C’est certainement le moteur html le plus abouti. Il est tout a fait conforme au standard w3c (avec de nombreuses fonctionnalités css2 et css3), passe le test acid2, dispose d’objets provenant du WHATWG comme l’objet canevas, il est capable de lire nativement du pdf et du svg, de plus, il est très rapide !

Capture d’écran de Safari 2 AppleWebKit/522 2007_04_12_14_09_webkit_522_marfaux.png 2007_04_12_14_10_webkit_533_wikipedia.png


Internet Explorer

Cette comparaison ne serait pas complète si j’oubliais de montrer le navigateur qui malheureusement (propos pas du tout objectif smile langue bleue) détient encore la première place dans le classement des parts de marché. (en mars 2007: IE6 42% et IE7 24% selon les statistiques de ce site) Il s’agit d’internet Explorer 6 pour windows. (Il ne fonctionne que sur windows)

J’ai donc du rien que pour l’opération dégotter un pc avec windows pour faire une capture d’écran des mêmes pages de tests sur IE6.

A première vue, il n’y a pas une grande différence me direz vous. En fait, la capture d’écran c’est bien mais pas top ! ça permet de voir certaines choses, mais pas tout. Ici on peut quand même voir que la petite étiquette noire collée en haut à droite du site marfaux est vraiment noire sur IE6 et non transparente comme elle le devrait.

Mais une capture d’écran fixe ne permet pas de voir, qu’IE6 ne supporte par le positionnement fixe relatif à la fenêtre. En effet, si l’on descend dans la page avec l’ascenseur, sur tous les navigateurs ci-dessus (même IE5 mac) l’étiquette reste fixe en haut de la fenêtre et donc visible tout le temps.

Avec IE6, ce site utilise une bidouille (un hack en anglais) pour transformer le positionnement fixe en positionnement absolu. Ce qui a pour effet de juste placer l’étiquette en haut de la page, mais si l’ascenseur descend, l’étiquette n’est plus visible.

Ce qui arrive fréquemment c’est que vu la part de marché d’internet explorer, la plupart des développeurs web (dont je fais partie) renoncent à utiliser (en tous cas à grande échelle) certaines fonctionnalités comme le positionnement fixe et la transparence des images (png et css). (et encore d’autres fonctionnalités)

Ce raisonnement est tout à fait malheureux, car les utilisateurs d’internet explorer ne se rendent ainsi pas compte des grandes lacunes de leur navigateur. Mais ceci est en train de changer. Le succès de Firefox à obligé Microsoft à reformer l’équipe de développement d’internet Explorer qui avait été dissoute en 2001 ! (on remaqure bien ici l’intérêt de microsoft pour le web)

Microsoft a donc ainsi sorti sa riposte à Firefox sous forme d’un nouveau navigateur web: Internet Explorer 7. Il corrige les quelques bugs importants décrit ci-dessus. Avec les mises à jour automatiques, IE7 a considérablement réduit la part de marché d’IE6 (~20%-25%). Cette opération a pour effet d’inverser la donne dans les parts de marché de navigateur web supportant la transparence et le positionnement fixe.

Il n’y a plus que ~42% (peut varier entre 20% et 60% suivants les sites !) des gens qui surfent avec un IE6 et donc ne voient pas la transparence, le positionnement fixe et bien d’autres choses. Au vue de cette statistique, et suivant les sites, il est possible pour les développeurs de se risquer à utiliser les fonctionnalités si longtemps délaissées.

Personnellement, j’espère que beaucoup de développeurs s’y risqueront et que l’effet boule de neige va faire son oeuvre. Finalement le reste du parc d’IE6 installé va paraitre encore plus obsolète (dans certain cas IE7 aussi même s’il vient de sortir !) et que la migration vers firefox (ou d’autres excellents navigateurs) se fera encore plus.

Capture d’écran de Internet Explorer 6: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322) 2007_04_13_08_56_IE6_marfaux.png 2007_04_13_08_57_IE6_wikipedia.png

Familles de nombre

Familles de nombres

Il existe plein de famille de nombre. Les plus connues, sont les familles de nombre pair et impair … puis il y a les nombres premiers…

Mais il y a plein de familles inconnues comme…

Comme dans toutes les familles, il est possible d’y avoir des jumeaux.. donc.. voici les nombres premiers jumeaux.

Et comme il y a des jumeaux.. donc des frères.. et bien il y a aussi des cousins. Voici les nombres premiers cousins

Dans la famille des nombres premiers, on trouve également des nombres premiers sexy !

Des nombres premiers jumeaux sont des nombres premiers qui diffèrent de 2 unités. Un nombre premier cousin, lui, diffère de 4 unités et un nombre premier sexy diffère de 6 unités… (6…six… sex…sexy..)

5 et 11, 7 et 13, 13 et 19, 17 et 23 sont des paires de nombres sexy !

  • un nombre oblong est un nombre qui est le produit de 2 entiers naturels consécutifs. (1*2=2, 2*3=6, 3*4=12,4*5=20,5*6=30 …)
  • 2 est le seul nombre premier à être un nombre oblong!
  • on ne connaît que 44 nombres parfait… hop du nerf… cherchez les suivants..
  • un nombre parfait est un entier naturel égal à la somme de ses diviseurs propres. (donc… avec 1 mais sans lui même)

Il semble qu’ il n’existe aucun nombre parfait impair. Mais ceci ne reste qu’un conjecture, donc c’est parti….. maintenant il faut le prouver !

19 Jan 2007 : 11:56

Consommation électrique de quelques appareil

Voici les résultats de quelques mesures de consommation électrique des appareils courants du bureau.

  • machine
  • veille
  • repos
  • travail
  • Ecran
  • Disque dur
  • G5
  • 11
  • 130
  • 260
  • 50% => 31 100% => 51w
  • Mac mini
  • 5
  • 15
  • ?
  • G4 backup
  • éteint= 7w / veille 14w
  • 60w
  • 17
  • ups = 20w
  • ups + serveur allumé = 80w
  • PowerBook
  • 0 => vide accu !
  • 23
  • 43
  • inclu
  • Photocopieuse
  • 12
  • 30
  • 30++

Bouilloire

la bouilloire en pleine action pour chauffer 1l d’eau consomme une puissance instantanée de 1860 watt.

La Machine à café

La machine à café en veille chauffe à fond avec une puissance de 1kw, puis coupe tout. Ensuite elle recommence son cycle.

Sur 30 minutes la machine à consommé une énergie correspondant à 12.8 wh.
Sur 2h30 minutes la machine à consommé une énergie correspondant à 73.8 wh.

Ce qui correspond à une puissance de 30w en continu.

26 Jul 2007 : 15:04
A nouveau une série de mesure à la maison en 2015 pour voir l’évolution.
  • lampe halogène de la cuisine: max 330 W, normal 120W, éteint: 0W.
  • iPhone en charge…. clignote, 0, 1.7W … etc… et puis 0W
  • MacBook pro en charge: au repos ~18W … lancement d’une app 33W. En charge de l’accu: 28-29 W => en marche avec le son et des vidéos youtube..=> 30 – 50 W
  • imprimante: branchée: 20-24W allumée: 25W, en allumage: 27-30 W, en impression: pic à 30-40W… et stable à 16W…. puis se remet en veille à ~24W !
  • machine à pain…. allumée: 0.9W démarrage pique à 75W. Puis alternance entre 25W et 55W dans les alternances entre tourne et pause. Puis 75W quand ça tourne en continu.
  • 0.0126 KWh consommé pendant les premières minutes de malaxage
  • premiers bip bip.. => 0.0315 KWh
  • mi parcours (1h34) => 0.0389 KWh
  • le chauffage se fait par des pointes de 695W.
  • reste 42 minutes: 0.1903 KWh
  • une fabrication de pain à la machine à pain (3h) => 0.3706 KWh
  • frigo => 130W pendant l’activation
  • frigo une journée ~0.6 kwh

comment fonctionne le e-mail ?

Comment fonctionne le e-mail ?

Il y a tellement de gens qui me posent des questions sur ce qu’il est possible de faire ou pas avec le e-mail que je remarque que la plupart des gens n’ont pas compris comment fonctionne le e-mail.

Pourtant, sans acune notion technique, il est déjà possible de comprendre le principe de fonctionnement et ainsi de réfléchir aux implications que ça peut avoir.

Pour bien comprendre, je vais reprendre la métaphore du courrier papier.

Il faut voir le e-mail comme une carte postale.
J’ai une boite postale dans ma poste de quartier.
Mon adresse est construite de la manière suivante:
Monsieur et Madame Tartenpion, case postale 47 à la poste de pétaouchnoque-les-brandes

C’est bien ce que l’on fait avec le e-mail, le nom de la personne sur le nom du serveur. ( )
Pour recevoir du courrier, je vais à la poste régulièrement et je regarde dans ma boite si j’ai reçu quelque chose.
Dans la version e-mail, c’est exactement ce que fait le protocole POP. Il va regarder toutes les 5 minutes (par exemple) le contenu de la boite.

Si je veux envoyer un courrier. J’écris ma lettre, je la timbre. Puis je vais tenter de trouver une boite aux lettres jaune pour y placer mon envoi.
On remarque ainsi que la boite d’envoi n’est pas du tout liée à la boite de réception.

Pour le e-mail, c’est pareil. Le serveur d’envoi et le serveur de réception ne sont pas forcément lié.

Cependant, par commodité, en général, pour le e-mail on utilise le même serveur pour l’envoi et pour la réception, mais ce n’est pas obligatoire.

C’est un peu comme si une personne préférait n’envoyer de lettre que depuis sa poste de quartier où elle a aussi sa boite postale, mais jamais depuis une boite aux lettres jaune.

Ainsi, il est possible d’envoyer des e-mails depuis n’importe quel système qui permet d’envoyer des e-mails.

De plus, ce qui surprend souvent les gens, c’est qu’il est possible d’envoyer un e-mail avec n’importe quelle adresse d’expéditeur.
Il est toujours très rigolo d’envoyer un e-mail à quelqu’un avec sa propre adresse comme expéditeur.
ça surprend souvent la plupart des gens, pourtant, c’est exactement pareil avec une carte postale.

Quand je suis en vacances à l’autre bout du monde, je peux envoyer mes cartes depuis une boite aux lettres dont je n’ai pas l’habitude, et je peux mettre ce que je veux comme adresse d’expéditeur !
ça, ça ne surprend personne !

Pour éviter ce genre d’usurpation d’adresse d’expédition, il existe de moyens de signature électronique. Mais comme ce n’est pas installé par défaut et que c’est une étape de plus à faire pour mettre en place ceci. Pratiquement personne n’utilise de signature électronique !

Quelques plugins utiles pour créer un site wordpress

Quelques plugins utiles pour créer un site wordpress

La philosophie de wordpress veut que le coeur du système fourni en standard soit très simple. Le but est d’émiviter le syndrome usine à gaz.

Ainsi, pour toutes les fonctions qui ne sont pas utilisée par 90% des utilisateurs, il faut généralement installer un plugin qui va ajouter la fonctionnalité.

Cette page liste quelques fonctionnalités possibles et avec quels plugins les réaliser. Cette page se construit au fil de mes expériences utilisateur.

Et de temps en temps, j’essaie de prendre le temps de créer une formation en vidéo sur mes découvertes qui peuvent aider les gens. Tu peux donc retrouver ma première vidéo de formation à propos du référencement (SEO) sur le site de mon entreprise…

Jetpack le plugin à tout faire….

Voici jetpack qui est un plugin développé à la base pour la ferme de blog wordpress.com, il ajoute de nombreuses fonctionnalités en tous genres dans tous les domaines.

Il agit dans la personnalisation du site, l’optimisation pour mobile, les outils pour réseaux sociaux, le CDN pour photo, la sécurité, le correcteur orthographique, les suggestions d’article liée, les galeries de photos infinies, etc…. tellement de choses que je ne la catégorises dans rien.. et vous laisse le découvrir.

https://wordpress.org/plugins/widget-visibility-time-scheduler/

Comment voir des statistiques de fréquentation de son site wordpress ?

Si l’on a juste besoin de savoir le nombre de visiteurs de sont site, les articles les plus visités, mais que l’on a pas besoin d’une usine à gaz très orientée statistiques commerciales et taux de conversion comme google analytics, alors il y a plein de petits plugins pour voir quelques stats à propos de son site.

J’ai personnellement installé wp-statitics. http://wordpress.org/plugins/wp-statistics/

.. et voici une liste avec beaucoup d’autres plugins de statistiques: http://allbloggingtips.com/2012/01/15/10-best-statistics-plugin-for-wordpress/

Comment installer des statistiques google analytics pour wordpress

Pour ajouter le suivi des stats via google analytics, il suffit de créer un compte pour le site, puis d’indiquer son code utilisateur dans le champs adéquat du plugin wordpress: Ultimate Google Analytics.

C’est le plugin le plus simple que j’ai trouvé. Souvent je les trouve compliqués.

http://wordpress.org/extend/plugins/ultimate-google-analytics/

(bon, il ne supporte pas le nouveau mode de google analytics universal.)

Si vous désirez quand même avoir quelque chose de plus compliqué, un plugin qui intègre les statistiques dans l’interface admin de wordpress. vous pouvez utiliser: google-analyticator.

http://wordpress.org/extend/plugins/google-analyticator/

Ce plugin offre les deux options. Ne donner que son uid google analytics, ou donner en plus les identifiants d’un compte google pour pouvoir afficher les graphes.

Il existe aussi des thèmes (comme keilir) qui intègrent le code pour le tracking (google analytics.. ou piwik) directement dans le thème sans plugin. Il suffit de mettre le code de tracking dans un formulaire. Simple et efficace. 🙂

Il est aussi possible de directement mettre le code dans l’entête, soit en éditant le code du thème (ou mieux du childtheme) ou alors en utilisant le plugin https://wordpress.org/plugins/header-footer/ qui permet d’éditer l’entête ou le pied de page de la page html. (très pratique pour mille bidouilles)

.. et un autre plugin qui permet de choisir si les stats doivent être activées suivant le niveau d’utilisateur.

https://wordpress.org/plugins/google-analytics-for-wordpress/

Comment faire une sauvegarde de son site wordpress ?

Il y a des plugins spécialisés dans la sauvegarde, ils archivent la base de données et les fichiers dans une archive zip et parfois permettent de synchroniser cette archive sur des services comme Drop-box.

https://wordpress.org/plugins/backup-with-restore/

https://wordpress.org/plugins/backwpup/

https://wordpress.org/plugins/backupwordpress/

Par défaut, worpdress dispose également d’un format de fichier xml qui permet de faire une sauvegarde d’une grande partie des données. C’est surtout pratique pour des migration d’un hébergeur à un autre. Il s’agit de l’outil> exportation – importation.

Comment installer une galerie de photos sur wordpress

Suivant le nombres de photos, la stratégie va être différente.

Juste quelques photos

Si le nombre de photos est faible. Il est possible d’utiliser d’utiliser la configuration par défaut de la bibliothèque de média de wordpress.

Il suffit de lier les images a une page. L’éditeur de texte riche propose d’ajouter les images liées dans la page sous forme de galerie simple.
C’est ce qui a été utilisé pour cette page:
http://j-a-maire.ch/dossiers-et-archives/

L’ajout du plugin: « Lightbox Gallery » permet de faire apparaitre les photos de la galerie avec un effet lightbox.

Par défaut worpress crée plusieurs tailles. Avec l’outil d’insertion d’image, il est possible d’insérer juste une vignette. Quand on clique sur une vignette dans la page, elle s’ouvre sur l’image en taille originale.
Bien souvent, maintenant, on remplace l’image toute seule dans une page du navigateur, par un effet « light box ». Cet effet permet d’afficher une photo en taille moyenne (souvent 640×480 ou 800×600) sur une couche au dessus de la plage.

Il existe de nombreux plugins qui font cet effet. En voici une liste:

Mon dernier coup de coeur va à ce plugin simple, hyper légé et effiace qui m’a sorti du pétrin quand ligthbox-gallery était  à côté de la plaque….
https://wordpress.org/plugins/wp-featherlight/

De nombreuses photos

Si l’on s’oriente sur un site qui propose de nombreuses photos, l’approche est un peu différente, il est plus convivial d’utiliser un logiciel comme Picasa pour gérer ses photos. Puis de stocker ses photos sur picasaweb.

Le plugin wordpress shashin permet de récupérer les photos stockée sur une galerie (picasaweb) google+ pour les inclures sur wordpress. (le stockage des photos reste sur les serveurs de google.)

http://wordpress.org/extend/plugins/shashin/

J’avais utilisé ce principe du temps de picasaweb et ça marchait bien. Je n’ai pas trop d’expérience avec la version google+ , mais l’auteur précise qu’il a fait les mises à jour nécessaires.

shashin propose en plus un widget « Random pics » qui permet d’afficher des photos aléatoires dans les zones widgetizables du thème wordpress choisi.

Il existe aussi le plugin « picasna » pour afficher ses galeries picasa…. mais le plugin semble ne plus être mis à jour depuis plus de 2 ans.. et au vue des changements autour de picasa et google+ je crains qu’elle ne fonctionne plus.

Avec le support des mots-clé l’IPTC

Pour classer mes photos, je prends la peine de les catégoriser avec des tags dans les métadonnées de chaque fichier. J’y place des mots-clés qui décrivent la photo.

Ces mots-clés sont au format IPTC. Un format standard. Comment faire pour que wordpress comprenne ces mots clés IPTC ?

Le plugin: http://wordpress.org/plugins/media-library-assistant/

Etends la bibliothèque de média de base pour utiliser les mots clés iptc.

Le plugin: http://wordpress.org/plugins/wp-photo-album-plus/ permet de gérer des albums photos sur wordpress. Mais il n’utilise pas la bibliothèque de média.

Comment redimensionner en masse les images de la bibliothèque de média wordpress ?

Il arrive parfois d’avoir une foule d’image trop grande dans sa bilbiothèque de média.

Le plugin https://wordpress.org/plugins/imsanity/ vas nous aider à les redimensionner en masse sans avoir à les re-télécharger.

Comment nettoyer les noms des images sur wordpresse ? (enlever les accents, les espaces dans les noms d’image)

Le plugin https://fr.wordpress.org/plugins/clean-image-filenames/ permet de nettoyer les noms des images pour éviter d’avoir des accents et des espaces, ce qui est parfois mal géré par les navigateurs web.

C’est en 2015 que j’ai remarqué que des images ne s’affichaient plus sur iPhone ? … pourquoi ? Elles avaient des accents dans les noms de fichiers !! … et voilà que le mal s’est propagé à safari aussi sur bureau, alors qu’il gérait très bien ça avant !!! .. (et que chrome et firefox gère bien la chose !) C’est n’importe quoi ? c’est un retour en arrière !!!

C’est traitre surtout quand sur mac on fait des captures d’écran et qu’il y a le mot « écran » dans le fichier….

Donc ce plugin permet de gérer un nettoyage pour revenir en arrière avec des images postée avant que safari ne deviennent débile….
(ils codent avec les pieds chez Apple ?)

Comment afficher une galerie de photos facebook sur un site wrodpress ?

Il arrive de plus en plus souvent que des photos soit partagée sur facebook. Mais comment les afficher sur son site wordpress ?

La solution… le plugin: ram108-fbalbum

http://wordpress.org/plugins/ram108-fbalbum/

Voici une démo assez convainquante d’album facebook sur un site wordpress.

=> étrangement la page de ce plugin sur le site de wordpress a disparue (le 18 mars 2014 en tout cas)… mais le site de l’app existe toujours… Qu’en est-il ??

Sinon voici une alternative pour mettre ses galeries de photo facebook sur un site wordpress.

http://wordpress.org/plugins/facebook-albums/

Comment afficher une galerie de photos instagram sur un site wordpress ?

Instagram est devenu l’outil de partage de photo incontournable sur les smartphones. Du coup il peut être pratique de publier directement sur son site wordpress les photos que l’on fait et partage via instagram.

Encore mieux, il est possible de proposer au grand public de mettre des photos sur son site perso !.. étonnant ? utile ?

Oui, c’est très utile, par exemple pour permettre à la communauté autour d’un site de partager du contenu directement sur le site. Où pour un événement particulier, (manifestation, conférence, etc) il est possible de proposer aux gens d’envoyer leurs photos d’ambiance sur le site web via un #hashtag donné.

C’est ainsi que sur mon site de cuisine amusante, je propose aux gens de partager leur créations de cuisine amusante sur instagram via le hashtag: #cuisineamusante.

Bon.. alors, j’utilise quoi comme plugin wordpress pour afficher mes photo instagram ?

J’utilise le plugin: « Alpine PhotoTile for Instagram »

https://wordpress.org/plugins/alpine-photo-tile-for-instagram/

Il existe des versions de ce plugin également pour picasa, flikr, pinterest et tumblr.

… et pour pinterest…

https://wordpress.org/plugins/alpine-photo-tile-for-pinterest/

Depuis l’été 2016 j’ai eu des soucis.. Ce plugin m’indique que le flux est indisponible. 🙁 … en fouillant, je crois que c’est du au fait que je dois enregistrer ce plugin comme une app instagram et qu’instagram a renforcé sa politique sur les app, il faut donner plein d’infos… je ne sais pas trop..

Bref.. il y a aussi d’autres plugin instagram.. j’ai pas (encore) testé.. mais je crois que certain n’ont pas besoin d’être vu comme une app..

J’ai finalement migré sur : https://wordpress.org/plugins/easy-simple-instagram/

Comment trouver des photos haute résolution gratuite et libre de droits ?

Le plugin https://wordpress.org/plugins/unsplash-stock-photo-library/ permet d’intégrer directement à wordpress une interface qui va chercher des photos sur le site unsplash.com .

Sinon, https://commons.wikimedia.org reste une énorme bibliothèque de photos libre de droits… ou exploitable selon la licence.

Une recherche avancée sur google images avec option de choix de la licence est aussi un bon moyen pour trouver des images libres de droits.

Pour les images vectiorielles, c’est le site : openclipart.org qui est la référence. Il n’y a que des images vectorielles dans le domaine public. Et si vous faites un remix, n’hésitez pas à le republier. C’est ça la culture du remix…

Comment envoyer des fichiers SVG dans la bibliothèque de médias de wordpress ?

Par défaut la bibliothèque de média de wordpress refuse le format SVG. C’est le format web de dessin vectoriel. Il est maintenant passablement bien supporté sur les principaux navigateurs web. Ainsi il est possible de l’utiliser pour remplacer des images de logo.

Mais bon, avant il faut que wordpress veuille bien accepter l’envoi de ce format SVG dans sa bibliothèque de médias.

Il faut donc déclarer un nouveau type de fichier.

On va le déclarer dans une fonction à ajouter dans son fichier functions.php

function cc_mime_types( $mimes ){
$mimes[‘svg’] = ‘image/svg+xml’;
return $mimes;
}

add_filter( ‘upload_mimes’, ‘cc_mime_types’ );

=> mais attention avec cette méthode on risque de contourner les sécurités mise en place par wordpress pour éviter le svg car c’est du xml et le xml peut inclure plein de chose… dont du code malveillant. Donc il faut être certain avec cette méthoe que le SVG envoyé est fiable.

Sinon on peut utiliser le plugin: https://wordpress.org/plugins/scalable-vector-graphics-svg/ qui lui va ausculter et nettoyer le code svg pour le vérifier. Une sorte d’anti-virus pour image svg ! 😛

Quelques références..

Ou encore, la méthode j’installe un plugin qui me permettra directement d’avoir l’usage du svg…

=> https://wordpress.org/plugins/svg-support/

Comment remplacer un fichier dans la bibliothèque de médias de wordpress ?

Que faire quand on difuse un fichier pdf qu’il y a une erreur, qu’il faut changer le fichier du document, mais pas son adresse (url) ?

Le processus normal est tout simple. Il suffit de supprimer le fichier et de la bibliothèque de média et d’en envoyer un nouveau avec le même nom.

Si le 1er fichier n’est pas supprimé, le nouveau ne va pas avoir le bon nom. On va avoir quelques chose du genre: monfichier.pdf et monfichier1.pdf

Si c’est trop compliqué pour vous de cliquer sur « supprimer définitivement » avant d’envoyer le nouveau fichier, il existe un petit plugin qui fait le boulot: https://wordpress.org/plugins/enable-media-replace/

Comment renommer les noms des fichiers et mettre à jour les liens sur wordpress ?

Voici un plugin qui s’occuper de changer automatiquement les noms des fichiers de votre bibliothèque média.

Il s’agit du plugin wordpress Media File Renamer….

Il se trouve que sur safari, autant sur iPhone que sur les dernières versions de safari pour mac, les images qui ont des accents dans leurs nom (url) ne sont pas affichées ! .. .. c’est beau le progrès… par ce que ça marchait sur les anciennes version de safari !!

Comment créer un formulaire de contact sur wordpress

Mettre en place un formulaire de contact simple.
Le plugin: contactform7 est parfait pour ça. Il a déjà été utilisé plusieurs fois.
http://contactform7.com/

Il faut le coupler avec le plugin « Really Simple CAPTCHA » pour éviter le spam.

Un autre plugin pour afficher un formulaire de contact est: Clean and simple contact form

http://wordpress.org/plugins/clean-and-simple-contact-form-by-meg-nicholas/

Ce plugin intègre directement le service Re-captcha.

Ce plugin va aussi de paire avec https://fr.wordpress.org/plugins/contact-form-7-to-database-extension/ qui permet d’enregistrer le contenu d’une soumission de formulaire dans une base de données. Ainsi non seulement le contenu est envoyé par e-mail, mais en plus il est enregistrés.

Une autre manière de faire un formulaire de contact est de le faire directement avec une boite modale, une sorte de pop up dans la page. Voici le plugin: https://wordpress.org/plugins/beauty-contact-popup-form/ qui propose au simple clic d’un lien d’afficher directement un formulaire de contact.

Pour en voir plus voici la démo de ce formulaire de contact.

Voici encore un autre plugin qui est un outil à tout faire pour la création de formulaire.

https://wordpress.org/plugins/visual-form-builder/

Ce plugin est même capable de créer un formulaire d’envoie de fichier, et de mettre en place un anti-spam… pour éviter que votre formulaire ne se retrouve envahi par de la pub…

Pour créer des formulaires en tous genres sur wordpress il y a aussi le plugin http://www.gravityforms.com

Gravity forms est un plugin payant… 39$ …. et il a de nombreux autres plugins de plugins… => http://www.gravityforms.com/add-ons/ c’est ce qui fait ça force. On peut intégré gravity forms avec tellement d’autres services…  Par exemple dropbox pour recevoir des résultat de formulaires sur son disque… ou Trello pour directement ajouter une tâche à réaliser…

Mon soucis, c’est que vu qu’il est payant, on ne le trouve pas sur le dépôt standard… et du coup, je ne peux pas le mettre à jour en ligne de commande avec wp_cli .

Comment faire un plan de site (sitemap) avec wordpress

Autant pour les utilisateurs que pour les moteurs de recherche, il est toujours intéressant de proposer un plan de son site web.

C’est une page qui présente toutes les pages du site. On peut le faire à la main, ou avec un script tout simple. Ou encore utiliser un plugin comme: wp-sitemap-page.

http://wordpress.org/plugins/wp-sitemap-page/

Ce plugin défini le shortcode: wp_sitemap_page (à mettre entre crochet) qui affiche le plan du site sur la page de son choix. Il y a plein de gabarits qui permettent de construire l’affichage du lien vers les pages. ({title}, {day}, {category}, {permalink}, etc…) C’est simple et très très souple.

De plus ce plugin permet d’exclure des pages de l’affichage du plan du site. Il suffit de fourni la liste des ID des page à ne pas afficher.

Comment remettre les infobulles de la balise « title » sur les liens après la mise à jour de wordpress 4.2

En effet… la mise à jour de wordpress 4.2 a vu une profonde modification des liens…. Un lien HTML standard c’est le texte cliquable … et voilà que dans la mise à jour la possibilité de remplir la balise « title » (titre) a disparue…. Il semble qu’après des années d’éducation il y avait encore beaucoup trop de gens qui confondaient les balises. Du coup l’équipe de wordpress a décidé de simplifier.

Si ce comportement ne te convient pas…  tu peux installer le plugin suivant pour revenir à la version antérieure.. https://wordpress.org/plugins/restore-link-title-field/

Comment afficher sa photo dans les résultats de recherche google avec un site wordpress

=> google a changé d’avis… et ne pratique plus ce système…..

C’est ce que l’on appelle le google authorship. Voici comment faire du google authorship pour un site wordpress:

Le plugin wordpress google-author-information-in-search-results-wordpress-plugin permet de remplacer le nom de l’auteur d’un article par un lien vers son compte google + … et surtout de lier son compte google+ à son blog.

Ainsi lorsqu’un un article de votre blog apparait dans les résultat de recherche de google, la photo de votre compte google + apparait à côté.

Ce principe est important pour le SEO (Search Engine Optimization), pour être mieux référencé dans google. Le principe est simple. Google veut que l’on utilise son réseau social google+. Donc il favorise les gens qui ont des sites dont l’auteur est en lien sur un compte google+.

Pour un humain c’est aussi plus tentant de cliquer sur le lien à côté de la photo de l’auteur de l’article plutôt que sur un obscure lien texte… donc voilà.. pour favoriser votre site dans les résultats de google, je vous invite à installer google authorship.

Comment signer une article wordpress avec plusieurs auteurs

Il y a un plugin tout simple qui permet d’ajouter plusieurs auteurs à un article wordpress, voilà, ainsi vous pourrez écrire des articles à 4 mains ou plus….

https://wordpress.org/plugins/co-authors-plus/

Comment créer une boutique très simple sur wordpress pour vendre 2-3 articles

Pour vendre dans le monde entier, de manière simple quelques articles. (un bouquin, un album d’un groupe de musique, etc..)

Il suffit d’utiliser un magasin avec panier d’achat fourni par paypal.

Ceci se fait à l’aide du plugin: wordpress-simple-paypal-shopping-cart

http://wordpress.org/extend/plugins/wordpress-simple-paypal-shopping-cart/

Il y a aussi le service stripe qui est de plus en plus populaire pour gérer des payements par carte de crédit.

Il y a le plugin https://wordpress.org/plugins/direct-stripe/

 

Comment créer un magasin sur wordpress

Si votre site a besoin d’une boutique, mais n’est pas uniquement un magasin. Il peut être utile d’intégrer un plugin wordpress.

Les plugins wooCommerce ou Jigoshop sont capables de faire tout un magasin, avec gestion des commandes, des payements et des stocks.

WooCommerce est un fork de Jigoshop. WooCommerce a débauché les développeurs principaux de Jigoshop et s’est lancé dans une amélioration du design et de la localisation dans de nombreuses langues. Même si l’OPA sur Jigoshop ne semble pas avoir été très amicale, le résultat est très intéressant.

Ces plugins sont gratuits. Mais les modules de payements sont payants. (sauf pour celui de paypal de base.)

Voici un plugin qui permet de livrer des factures avec WooCommerce:

http://wordpress.org/plugins/woocommerce-delivery-notes/ => plus développé… voir https://wordpress.org/plugins/woocommerce-pdf-invoices-packing-slips/ qui permet d’envoyer des facture pdf.

https://wordpress.org/plugins/woocommerce-jetpack/ le fait aussi dans ces nombreuse fonctionnalités additionnelles à woocommerce. (comme le coup de la TVA européenne)

Si vous voulez créer un site qui est essentiellement une boutique en ligne, il est mieux de concevoir le site sur une application comme prestashop.

Woocommerce est vraiment top, mais parfois il manque quelques petites touches de personnalisation. Heureusement on peut toujours modifier le code via des hook.

Voici toute une série de petites améliorations à woocommerce que l’on peut faire en ajoutant des fonctions dans le fichier functions.php qui se trouve dans son thème.

http://www.wpexplorer.com/best-woocommerce-snippets/

On y trouve par exemple, comment changer le tri par défaut de la boutique woocommerce (woocommerce_default_catalog_orderby):

J’ai ajouté cette fonction dans le fichier functions.php de mon thème:

add_filter(‘woocommerce_default_catalog_orderby’, ‘custom_default_catalog_orderby’);

function custom_default_catalog_orderby() {
return ‘popularity’; // aussi: rating, date, menu_order, price, price-desc

}

=> ce code n’est plus nécessaire, la fonction a été intégrée dans woocommerce. Il y a une fonction admin qui permet de choisir l’ordre par défaut de tri des articles dans la boutique.

Il y a d’autres exemples, comme:

  • remplacer le texte « plus en stock » par « vendu ! »
  • lister les catégories de produit
  • changer l’adresse e-mail « de »
  • placer un montant minimum à acheter

Attention, il est mieux d’avoir un thème qui est compatible avec woocommerce !

Il y en a de plus en plus, la plupart des thèmes fonctionnent, mais le top, c’est encore d’avoir un thème responsive compatible avec les smartphone. En voici deux exemples:

Il y a également un plugin stripe pour woocommerce…

Il est également possible de faire  une boutique woocommerce avec des prix différents selon la provenance des gens par pays.. https://fr.wordpress.org/plugins/woocommerce-product-price-based-on-countries/

C’est pratique pour nous autres en suisse romande qui avons un petit marché, mais qui pouvons vendre à toute la francophonie qui est beaucoup plus grande.

Comment calculer les frais de ports avec woocommerce ?

Woocommerce gère beaucoup de chose, il est possible d’entrer pour chaque article ses dimmensions, son poids et une classe de produits (ex: petit, encombrant, etc..) Ce qui est très utile pour calculer des frais de livraison des produits.

Quand j’ai voulu utiliser cette fonction.. je cherche partout.. rien aucune règle de livraison ne tient compte du poids !!

… et voilà… j’ai trouvé comment faire … c’est en fait un plugin de woocommerce qui permet de faire cette tâche ! Et oui.. Woocommerce est gratuit… mais les plugins du plugin sont payant.. et pour 199$, vous pouvez avoir le plugin http://www.woothemes.com/products/table-rate-shipping-2/ qui gère le poids dans les frais de livraison et des particularités de comportements différents selon les pays ou selon des classes de produits définie par l’utilisateur !

Plugin très complet et très puissant.. mais pas donné… Il faut bien que les développeurs woocommerce vive ! C’est normal.

Mais pour les pauvres, (comme moi :P) voici un plugin gratuit qui peut faire l’affaire.

Le plugin: awd-weightcountry-shipping  => http://wordpress.org/plugins/awd-weightcountry-shipping/ permet de gérer la calculation des frais de ports pour la livraison d’une commande.

Dans mon cas typique, j’ai des articles (petits accessoires) que je peux regrouper dans un même paquet et celui-ci est pesé. Suivant son poids les frais de port ne sont pas les mêmes.

< 2 kg => 7.-
< 5 kg => 9.-
< 10 kg => 10.-
< 20 kg => 15.-

Et j’ajoute 3.- à la commande pour les frais d’emballage.

Avec le plugin awd-weightcountry-shipping j’ai réussi à m’en sortir. Comme selon la documentation, j’ai créé des règles avec mes poids, à chaque fois pour un groupe de pays. Et ça marche. L’addition est faite au moment du choix de la règle de facturation et 3.- ajouté au total. Parfait.

2|7|1
5|9|1
10|10|1
20|15|1

Il y a juste un petit soucis que ce plugin gratuit ne résoud pas mais qu’il est possible de résoudre avec le plugin officiel qui gère les classes de produits. C’est le fait que l’on ne peut pas mélanger dans une même commande des petits objets et un gros encombrant dans le même paquet !

Il faut deux paquets (même s’il n’est pas lourd ) ! .. et ceci change tout ! Avec des classes (petit, encombrant) on peut séparer les articles et faire des calculs différents… bref.. de la sacrée cuisine ! .. Il faut aussi savoir où on s’arrête.. et si l’on est pas en train de mettre 80% de ses efforts et ressources sur un problème qui ne représente même pas 20% des cas… à voir selon chaque commerce.

Comment payer la TVA (surtout la nouvelle tva européenne de 2015) avec woocommerce et wordpress

La nouvelle TVA européenne entrée en vigueur le 1er jenvier 2015 change la donne.

Le client doit payer la TVA de son pays… et plus du vendeur.

Ainsi, pour moi (qui suis en suisse).. je dois prévoir un magasin qui s’adapte à la tva du bon pays… via une géolocalisation etc…

Mais surtout.. je dois m’occuper de reverser la tva au pays du client…. gloups !

Il y a un mini guichet unique qui a été mis en place pour reverser la tva aux état de l’UE.…  mais je dois dire que là j’ai pas encore tout compris... c’est hyper compliqué… et c’est la mort des petits commerces… il y a pas une limite à un certain chiffre d’affaire non ?

Bref… il y a un plugin de woocomerce qui est prévu pour gérer le cas de la tva européenne…

Comment créer un magasin sur facebook avec wordpress et wooCommerce

Le plugin suivant vous permettra de publier votre magasin worpress dans une page facebook.. et même de faire la promo de vos produits sur instagram.

https://wordpress.org/plugins/facebook-shop-by-storeyacom/

Comment importer automatiquement en masse des produits dans wooCommercere ?

Il y a le plugin http://www.wpallimport.com/woocommerce-product-import/ qui peut importer des dizaines de milliers de produits…

Comment créer une plateforme d’affiliation avec wordpress

L’affiliation c’est un principe très utilisé dans le commerce. En bref, c’est vendre le produit d’un autre et toucher une comission pour ça.

Les comissions sont souvent entre 30% et 70% du prix…  C’est un partenariat gagnant-gagnant. Si vous avez un produit, vos multipliez ainsi le nombre de vendeur et vous avez une meilleure visibilité et si vous êtes un re-vendeur, vous avez la possibilité de vendre et gagner de l’argent sans même créer de produit. L’affiliation est une terrible arme pour motiver des gens à parler de soi. Amazon utilise largement se principe. Même si les comissions sont ridicules (5%) il y a de nombreux vendeurs qui mettent des liens vers les produits vendu sur Amazon.

Si l’on a un produit à vendre, on peut proposer un programme d’affiliation. Mais c’est tout un monde que de gérer les ventes que font des gens pour soi et de les rémunérer pour se travail… ainsi il faut un programme pour gérer les affiliés. Heureusement il existe même des plugins qui permettent de créer cette tâche.

Il y a par exemple le plugin: https://wordpress.org/plugins/affiliates/ qui est même compatible avec woocommerce.

Il existe d’autres plugins d’affiliation plus spécialisés dans leurs domaines, voici une liste…

En voici un autre.. https://www.tipsandtricks-hq.com/wordpress-affiliate-platform-plugin-simple-affiliate-program-for-wordpress-blogsite-1474

Comment automatiser les liens affiliés amazon ?

Le plugin amazify => https://fr.wordpress.org/plugins/amazify/ permet d’ajouter automatiquement son propre tag d’affiliation amazon à tous les liens vers amazon… ça peut aider les gens tête en l’air qui oublieraient de mettre des liens affiliés…

Comment installer un CRM sur wordpress ?

CRM est l’accronyme de Customer Relationship Management…. bref, c’est la gestion de la relation avec les clients. Ça peut être très simple comme très compliqué. Ça va du carnet d’adresse étendu pour en savoir un peu plus sur ses clients à l’exploitation complexe des données dans des vues de marketing à fin de faire consommer plus vos clients…

Il y a des applications CRM qui ne font que ça.

Donc il y a plusieurs approches. La plus simple, c’est par exemple d’étendre son shop wooCommerce avec son add-on le plugin:

woocommerce-customer-relationship-manager

https://codecanyon.net/item/woocommerce-customer-relationship-manager/5712695

  • Permet de voir les infos de contact d’un client, de voir ses factures, le montant de ses achats, le nombre de ses commandes.
  • On peut l’ajouter dans des catégories.
  • Import export csv
  • Permet d’écrire des mails à des gens individuellement ou en groupe => utile pour l’évaluation
  • gère les appels téléphonique !
  • notes sur les gens

prix: 55$

Un des leader dans le domaine des CRM, c’est salesforces. Il existe plusieurs méthodes pour faire le lien entre les deux. Voici quelques infos à ce sujet… http://www.salesforce.org/integrating-salesforce-crm-and-wordpress-cms/

Il y a notamment le plugin: https://wordpress.org/plugins/salesforce-wordpress-to-lead/

Il existe aussi des plugins de CRM intégrés à worpdress.

ou celui qui a l’air le plug populaire:

https://wordpress.org/plugins/wp-crm/

Avec wp-crm il est possible de remplacer la page de gestion des utilisateurs par celle de wp-crm. Je me dis qu’il doit être possible d’utiliser ceci comme carnet d’adresse.

WP-crm étend la tables des users standard. Ainsi tout autre plugin qui utilise la table standard est compatible (à vérifier au cas par cas.. mais tout traitement générique est compatible.)

Wp-crm permet de créer des formulaires et leur short-code associés. Il permet aussi de gérer des notifications d’y inclure des trigger pour déclencher d’autres actions.

.. En faisant des recherches sur le plugin wp-crm je découvre une entreprise qui avait décidé de l’utiliser… puis d’étendre ses fonctions… et pour finir voyant que l’approche crm d’une application qui veut tout faire avec une structure contrainte par l’interface graphique est vouée à être limitée.. ou être une usine à gaz…..   Cette entreprise a décider de développer un framework pour développer rapidement des plugins et thème wordpress. Il s’agit de https://wordpress.org/plugins/piklist/

C’est un framework qui fourni une structure pour créer des plugins wordpress, ainsi que de nombreux champs de formulaires pour développer rapidement des interfaces utilisateurs. Notamment des champs spéciaux comme les « color picker » pour choisir une couleur. Ou encore la multiplications à l’infini d’un groupe de champs. Par exemple, lorsque l’on veut faire un carnet d’adresses avec une infinité d’adresse par personne.

Ce framework piklist permet d’étendre tout ce que wordpress fait de base. … à creuser 🙂

Il y a aussi un plugin basé sur piklist qui permet de personnaliser graphiquement son wordpress. https://wordpress.org/plugins/wp-helpers/

Comment intégrer un magasin de t-shirt sur wordpress

Si le but est de faire un magasin de t-shirt, il est possible d’utiliser le service de spreashirt.net pour concevoir et faire faire les t-shirts.

Puis, il faut intégrer sa boutique dans son propre site web. Pour ce faire, il est possible d’utiliser le plugin: wp-spreadplugin

http://wordpress.org/extend/plugins/wp-spreadplugin/

… et sinon il faut se monter un woocomerce et faire les t-shirts soi-même !

Comment créer un système pour récolter des dons sur wordpress

Pour faire une page de don sur un site wordpress, il est possible d’utiliser le plugin:

WP_Accept_Paypal_Payment qui facilite l’installation d’un bouton « don » via paypal.

http://www.tipsandtricks-hq.com/wordpress-easy-paypal-payment-or-donation-accept-plugin-120

Il est également possible de mettre un système de don flattr tout est expliqué par ici… https://flattr.com/thing/131184/Wordpress-Flattr-Plugin

Mais le plus simple est souvent de laisser un IBAN, il faut savoir que si c’est juste pour un don, il n’est pas nécessaire d’avoir toute la mécanique qui permet de voir si la personne a bien payer pour lui envoyer un contenu en échange. Donc on peut largement diminuer la complexité de la technique et le coût d’intermédiaire comme paypal qui se sucre bien au passage !

Envisagez aussi un compte bitcoin.. sur le long terme ça vaut peut être la peine. !

Comment crée une redirection sans être un geek

Le plugin Page Links To permet de créer des redirections d’un article de wordpress vers tout autre adresse. C’est pratique pour faire très simplement un lien vers un page de site qui n’est pas gérée par wordpress. Mais aussi pour bidouiller des thèmes du genre magazine qui ont des zones de design réservée au article, (carrousel, onglet, mini fils de news…) mais que malheureusement votre contenu à afficher là est une page !

Ainsi la solution est de créer un article bidon, qui grâce au plugin Page Links To redirige sur une page…

https://wordpress.org/plugins/page-links-to/

et pour corriger les liens cassé (404) avec de belle redirection (301), comme quand on refait un site à neuf…

https://wordpress.org/plugins/redirection/

Pour les redirections qui concerne l’activation de SSL:

https://fr.wordpress.org/plugins/really-simple-ssl/

Comment créer une redirection depuis une adresse courte vers une adresse compliquée de son site wordpress ?

Si j’ai une page de don sur mon site qui a une adresse très très longue…. monsite.com/ma-page-de-don-ne-vous-privez-pas-donnez c’est pas très très facile à diffuser sur une pub papier.. à mémoriser pour les humains.. Une page monsite.com/don c’est plus simple.

Comment mettre en place une telle redirection ?

Parfois avec quelques bidouilles de changement de nom de la page on y arrive… mais si c’est faire un lien vers un pdf.. c’est foutu. Il y a beaucoup plus simple, il est possible d’utiliser le plugin:

https://wordpress.org/plugins/pretty-link/

Il y a à choix deux types de redirection avec les code HTTP 301 ou 307, soit la redirection permanente, ou temporaire… à choix suivant l’usage.. si c’est permanent, google va mémoriser le changement dans son registre.

Ce plugin est très très utilisé par les webmarketeurs qui font de l’affiliation (qui vendent des produits d’un autre magasin en touchant une comission). Un lien affilié à toujours un code d’affiliation qui identifie le « rabatteur » ainsi le magasin peut lui payer sa comission. Mais c’est vrai qu’en tant que visiteur c’est louche de voir un lien avec un énorme code… du coup ce plugin permet de cacher le lien d’affiliation en faisant un lien propre sur son site qui lui redirige vers le lien affilié. Ex:  monsite.com/bouquin-wordpress => amazon.com/bouquin-wordpress?moncode-d-affiliation  Voilà comment amazon fait pour motiver des milliers de personnes à pointer vers son magasin en ne reversant que 5% de ses ventes… vu le prix des livres.. 5% c’est pas grand chose… amazon y gagne plus que les webmarketeurs qui font de lien.. mais certains mettent quand même du beurre dans les épinards 😛

Comment gérer une bibliographie avec un plugin wordpress

Le plugin https://wordpress.org/plugins/teachpress/ permet de gérer une base de données de bibliographie. Très utile pour les sites universitaire qui gèrent un grand nombre de références bibliographiques.

Voici également une liste de plugin wordpress très utiles dans le monde universitaire.

Comment gérer le workflow de publication d’articles sur wordpress ?

Si votre site est un véritable magazine avec plein d’articles, plein d’auteurs. Il vaut la peine d’avoir quelques outils pour s’organiser. Pour gérer le workflow d’édition, pour créer le chemin de fer d’un numéro de magazine.

Le plugin https://wordpress.org/plugins/edit-flow/ permet d’ajouter plein de méta-données à un article pour assurer son suivi. Il permet d’afficher sous forme d’un calendrier les dates de publication des articles. Ce plugin permet aux auteurs et éditeur de commenter la rédaction d’un article dans l ‘inerface d’administration. Il est possible d’ajouter un status avec divers états d’avancement d’un article. Dans le genre… en cours, à relire, à corriger… etc..

Si vous avez juste besoin d’avoir le calendrier des publications pour savoir quand vous allez publier quoi. Il est possible d’utiliser un autre plugin plus simple:  https://wordpress.org/plugins/editorial-calendar/

Comment ajouter une carte google maps ou openstreetmap sur wordpress

Il existe plusieurs plugin pour ajouter des cartes.. voici un aperçu de ce que je trouve. Leaflet est celui qui est le plus populaire et mieux noté:

Comment afficher une carte avec un grand nombre de lieux catégorisé sur wordpress ?

Le plugin : https://wordpress.org/plugins/geodirectory/ est fait pour. Il permet de géolocalisé de nombreux lieux, de leur attribuer des catégories, de rechercher les lieux à l’aide de ses catégories.

Ainsi vous pouvez commencer à géolocaliser de nombreux éléments, des hôtels, des magasins de différentes catégories, vos restaurants préférés, votre réseaux de partenaires, des lieux avec des événements, etc…..

Ce plugin est gratuit en version de base, puis il propose de nombreux addons… des plugins de plugins… et ce pour 150$/ an.

https://wpgeodirectory.com

Il y a également le plugin wpgmp qui a une version gratuite et une version à 39$ qui permet de vraiment faire beaucoup beaucoup de chose avec google maps. Notamment la catégorisation de marker. C’est sympa.

WP Google Maps

Comment faire un site wordpress multilingue

On a déjà mis en place plusieurs fois le plugin: qtranslate qui propose la gestion multilingue des pages.
http://wordpress.org/extend/plugins/qtranslate/

Il faut juste faire une petite adaptation du plugin pour permettre de retomber sur une langue par défaut si le contenu n’existe pas dans la langue demandée.

Le plugin qtranslate modifié est disponible sur github. … lien cassé.. 🙁

Le plugin fontionne très bien avec les langues exotiques 😛 … voici un exemple en coréen.

Attention, pour le format de date avec qtranslate, il faut préciser dans les options avancée du plugin que l’on veut « Utiliser strftime au lieu de date » pour avoir une format de date intelligible ! La fonction de date générée ne fonctionne pas.

Attention tout de même aux mises à jours de wordpress. Il est fréquent qu’à chaque mise à jour de wordpress, il faut un moment pour que qtranslate soit mis à jour…. et un moment de plus pour que le patch qui permet d’avoir la langue qui existe au lieu de rien soit appliqué.

Cette manière de faire des stites multilingues est bien mais pas top.
La seule véritables manière de bien faire un site multilingue est de le faire avec des sites séparés. Comme on le voit sur wikipedia où chaque langue est un projet séparé et relié par des liens pour avoir la page dans une autre langue.

Ce type de lien peut être réalisé dans wordpress avec le plugin « Bilingual linker« . Voici un article à propos de cette manière de réaliser une site multilingue avec wordpress.

Les extensions les plus utilisées pour faire des sites wordpress multilingue, sont qtranslate, mais aussi wpml. Cette extension est payante ! Elle fonctionne selon le principe que chaque langue est un nouvel article, liée en interne.

Qtranslate fonctionne autrement. Il place le contenu dans des balises de commentaire html et introduit le tout dans le même post. Chacun a ses avantages et inconvénient. Dur de trancher ce qui est le mieux.

Sur le long terme, WPML a retenu notre attention.

Encore une alternative intéressante, mais que je n’ai pas eu le temps de tester: polylang

http://wordpress.org/plugins/polylang/

J’ai entendu dire que même si ce n’est pas indiqué dans la documentation, polylang fonctionne avec wooCommerce.

Voici encore quelques pistes dans les plugins wordpress pour faire un site multilingue:

Comment créer un design woordpress de type « OnePage » rien qu’en glisser déposé (drag&drop) ?

Avec l’arrivée des smartPhone, les sites web ont beucoup changés. Ils sont devenus « responsive ». Ils s’adaptent à la petite taille d’écran des smartPhone. Mais avec le temps, c’est bien au delà que l’influence est allée. Pour créer une mise en page « responsve », il est plus facile de faire un site avec des blocs linéaires. C’est plus compliqué d’avoir un style « magasine » avec des blocs partout. Du coup, gentiment tous les desgins se sont mis à être un empilement de couche. Un design que j’appelle « onePage ». En effet, les sites sont souvent sur une seule page qui raconte une histoire.

Ce type de page est vraiment sympa. On peut y mettre tous type de contenu. Des boites, des logos, des images en bannière et même des diaporamas, des vidéos… des cartes google…. mais c’est là que ça devient compliqué à créer.

Comment assembler tout ces types de contenu. L’éditeur visuel de wordpress est vraiment sympa. Il permet de faire beaucoup de chose. Mais pour les design OnePage, il atteint ses limites. C’est quand même à la base juste un éditeur d’article de blog. Ainsi on peut composer la page avec plen de shortCode et de l’html..  mais ça devient complexe et les utilisateurs qui ne sont pas des geeks sont vite perdus. Dommage si il ne peuvent plus mettre à jour leur site eux-mêmes ! Alors que faire ?

Il existe de plus en plus de solution avec des « composer » ou « page builder » qui assemblent des briques par glisser déposer. (drag&drop). Ces briques sont fournies avec le composer ou alors ce sont tout simplement des widget des wordpress ou fourni avec des plugins. (un widget qui affiche les produit du shop, ou un formulaire d’inscription à la lettre de nouvelle…)

C’est de plus en plus la jungle dans ces éditeurs. Voici ceux que j’ai retenu après quelques essais et un sondage auprès de quelques habitués de la création de site web sur wordpress.

Comment créer un questionnaire ou un sondage avec wordpress ?

Le plugin wp-polls est tout à fait indiqué pour créer des sondages et même des questionnaires.

Si c’est trop complexe, il est aussi possible d’utiliser google drive pour créer un formulaire. C’est pas mal non plus. Les réponses arrivent directement dans une feuille de calcul.

Le plugin watu permet aussi de faire des sondages: https://wordpress.org/plugins/watu/

Comment afficher des graphes et des animations avec wordpress ?

L’idée est ici d’utiliser la superbe bibliothèque graphique/données: d3js.org

Voici des exemples de ce que D3.js est capable de faire. C’est très impressionnant !

Cette bibliothèque est très polivalente et basée sur des standards et non sur un code propriétaire. Elle manipule le DOM. Permet de faire toutes sorte d’animations SVG.

Voici l’exemple d’un graphe réalisé avec D3 et intégré dans wordpress.

http://figurebelow.com/d3/santander-shares-2012/

ou un camembert:

http://figurebelow.com/2013/03/13/wp-d3-tutorial-adding-d3-snippet-into-a-wordpress-post/

Pour intégrer la bibliothèque d3.js dans wordpress, il existe un plugin tout fait: wp-d3

http://wordpress.org/plugins/wp-d3/

Ce plugin permet d’ajouter directement le code de l’animation d3 dans des shortcode dans un article wordpress, et le tour est joué.

Voici un exemple du genre d’application tableau de bord de données que d3.js permet de construire.

Etendre la bilbiothèque de base de médias de wordpress pour utiliser des tags

L’idée est d’étendre les fonctionnalités de la bibliothèque de média standard pour lui permettre d’utiliser toutes sortes de tags.

Le plugin: media-tags est fait pour.

http://wordpress.org/extend/plugins/media-tags/

Ce plugin est basé sur la nouvelle api de taxonomie de wordpress. wp 3.0

Comment envoyer des newsletters avec wordpress

Wysija (renommé avec le nom plus simple et parlant de MailPoet):

Une belle découverte que ce plugin Wysija (MailPoet): http://wordpress.org/extend/plugins/wysija-newsletters/

Ce plugin permet de créer des superbes design de lettres de nouvelles avec un outils de glisser-déposer. Ce plugin est d’une simplicité déconcertante pour envoyer des lettres de nouvelles.

Les francophones apprécierons. Il y a une version francophone.

En plus de permettre de faire des campagnes de lettres de nouvelles, ce plugin fait aussi auto-répondeur. Ce qui est assez rare pour être souligné.

(un auto-répondeur permet d’envoyer un mail du genre… 3 jours après inscription… ou 1 semaine après une vente…)

Wysija/Mailpoet est gratuit jusqu’à une liste de 2000 e-mails… après il y a un compte payant. (75€ par an)

Voici également un outil conçu par les mêmes développeurs qui permet de tester la note de spam de sa lettre de nouvelles, et ainsi augmenter sa visibilité.

http://www.mail-tester.com/

Sendpress:

Le plugin sendpress permet aussi d’envoyer des lettres de nouvelles avec wordpress.

https://wordpress.org/plugins/sendpress/

Newsletter:

Pour envoyer des newsletter, le plugin: newsletter est un plugin que j’ai déjà mis en place et qui fonctionne bien.
http://wordpress.org/extend/plugins/newsletter/

La version de base du plugin permet de d’envoyer à une seule liste. Si l’on veut faire plusieurs listes d’envoi, il faut payer 20$ au développeur. (ou bidouiller nous même pour contourner la chose).

Mailchimp

Une autre solution pour réaliser des newsletters jolies et qui passent partout est d’utiliser le service mailchimp.com.

Mailchimp propose un service de newsletter qui est capable de gérer plusieurs listes d’envois. Il est possible de créer ses propres templates. D’utiliser et/ou modifier des templates jolis et qui passent partout !

Le service est gratuit jusqu’à 2000 adresses mail et 12 000 e-mail par mois. Ce qui est largement suffisant pour beaucoup de lettres de nouvelles.

Mailchimp fourni un plugin wordpress pour s’incrire directement depuis son site sur la liste d’adresse gérée par mailchimp.

Si l’on veut envoyer automatiquement du contenu du site dans une newsletter, il est possible d’automatiser l’envoi du contenu de wordpress à mailchimp grâce au plugin wordpress Autochimp.

Autochimp est capable de se greffer sur les utilisateurs d’un réseau social Buddypress et d’envoyer des e-mail à chaque inscription d’utilisateur.

Il est possible d’utiliser des templates personnalisés pour les newsletter envoyées. Pour ce faire, il suffit de créer un template personnalisé sur mailchimp.com. (Il est possible de copier coller des bouts de templates proposés)

Il y a juste une condition à bidouiller, c’est d’avoir le div qui contient le contenu qui s’appelle « main ». Cette bidouille est expliquée en détail sur le site de autochimp.

Chaque fois que l’on désire envoyer un article comme lettre de nouvelle, il suffit de lui attribuer un tag qui est défini dans la configuration de autochimp comme étant un tag déclencheur de lettre. Une fois ce tag attribué à un article. Une nouvelle campagne est créee sur mailchimp.com. Il suffit juste de l’envoyer.

Cette solution est à mon avis la plus souple, la plus efficace, elle passe partout. Une fois en place elle est simple. Un tag et un bouton suffisent pour envoyer une lettre de nouvelles.

Mailchimp propose de nombreuses statistiques ainsi qu’une page web pour revoir la campagne et la diffuser sur les réseaux sociaux.

Newsletter manager

Je n’ai pas encore eu l’occasion de le tester, mais il semble que le plugin newsletter-manager envoie aussi des lettres de nouvelles.

http://wordpress.org/extend/plugins/newsletter-manager/

Comment faire un autorépondeur e-mail gratuit

Les gens qui sont dans le web marketing utilisent beaucoup le e-mail, non seulement pour faire des campagnes à certains moment, mais aussi pour répondrent à des actions précises, comme l’achat d’un produit. L’envoi d’un pdf en échange d’une inscription à une lettre de nouvelles.

Il existe quelques services sur le web qui font ce travail. Mais souvent ils sont payants sur abonnements. Les deux produits phares sont Aweber et Mailchimp (version payante pour autoresponder). Il y a aussi le français SG-autorépondeur qui est très bien et qui propose une offre gratuite jusqu’à 100 utilisateurs dans sa liste et 10 000 mail par mois. http://sg-autorepondeur.com

Voici deux alternatives gratuite à Aweber:

Il y a tout d’abord l’excellent plugin de lettre de nouvelles, Wysija: http://wordpress.org/extend/plugins/wysija-newsletters/

Il est en français, il est simple a utiliser, il est beau. Il permet de faire des design très beaux de manière très simple.

Puis, il y a le plugin: « wp-responder-email-autoresponder-and-newsletter-plugin »

Le site officiel de l’extension wp responder.

Un plan.. (non encore testé) pour virer la pub du plugin:

http://www.businesslegions.com/blog/2012/07/31/how-to-remove-the-email-marketing-by-wp-autoresponder/

Comment améliorer la boite de capture d’adresses e-mails

Le plugin https://wordpress.org/plugins/magic-action-box/ permet de créer des formulaires très jolis pour capturer les adresses e-mail. Ce plugin est compatible avec MailPoet.

Comment installer un carnet d’adresses sur wordpress

Le plugin wordpress: Connections semble correspondre au besoin.
http://wordpress.org/extend/plugins/connections/

Pour avoir l’importeur de contact au format csv, il faut installer le plugin payant csv import. (~15$)

Pour ajouter des images, il faut que les droits d’accès du dossier /htdocs/wp-content/ soit à 755
le plugin va créer dedans un nouveau dossier pour ses images: /htdocs/wp-content/connection_images

Ceci est ennuyant quand on a une version multi-utilisateur de wordpress. C’est un peu la pagaille.

Un plugin de carnet d’adresse basé sur le framework Piklist. Il utilise la table « users » standard pour place les utilisateurs.

https://wordpress.org/plugins/simple-directory/

Comment gérer une liste de membres sur wordpress

On est très proche de ce que fait le plugin « connections » ci-dessus, mais la structure des données est différentes. Dans connections on a des tables dédiée.

Mais on peut aussi utiliser la table wp_users standard. Il y a de nombreux plugins qui étendent les champs de cette tables pour y stocker des infos supplémentaires.

Le plugin amr-users http://wordpress.org/extend/plugins/amr-users/ améliore l’interface de gestion des membres. Il est capable de fournir une interface affichant les informations ajoutée par d’autres plugin dans la table wp_users.

amr-users permet d’afficher des listes d’utilisateurs affichées selon différentes critères.

Voici quelques éloges de plus pour ce plugin très utile de gestion de membre.

Comment faire signer une pétition sur wordpress

Le plugin SpeakUp! est là pour ça.

http://wordpress.org/plugins/speakup-email-petitions/

Pour le tester en vrai, venez signer le manifeste des convivialistes. ou la pétition pour sauver le lieu de formation au jardinage bio à Bex..

Comment gérer des questions réponses avec wordpress ?

Ou comment faire un clone de stackoverflow ? Quels sont les programmes qui permettent de faire un stackoverflow like avec wordpress ?

Un tel système peut être très utile pour faire un système de support client.

En voici un gratuit qui a l’ai intéressant: dw-question-answer

Il semble que le meilleur plugin pour faire des questions & réponses (Question & Answers) sur wordpress est le plugin Q&A:

https://premium.wpmudev.org/project/qa-wordpress-questions-and-answers-plugin/

Ce plugin est devenu payant. Mais pas cher…

Voici également des démo de plugin de question réponse et vote pour favoriser des réponses. (sorte de like facebook ou dislike)

Au lieu d’utiliser un plugin, on peut également utiliser un thème wordpress dédié aux questions réponses. Au support pour utilisateur. C’est un vrai thème wordpress stackoverflow. J’ai découvert le thème « Ask-it » de elegantheme.

Ce n’est pas fait avec wordpress, mais l’application semble très bien faite. Il suffit de la mettre en sous domaine comme c’est le cas sur nuitdebout.Il s’agit de la plateforme http://www.question2answer.org/

Comment gérer des réservation de ressources sur wordpress

Pour réserver des ressources (locaux, véhicules, livres… ) à l’aide d’un calendrier.

Attention la version gratuite ne permet de gérer qu’une seule ressource.

http://wordpress.org/extend/plugins/booking/

C’est pourquoi je me suis rabattu sur un « simple » calendrier..

Pour créer une véritable application de gestion de ressources (réservation de locaux), je recommande d’utiliser directement une application dédiée. Il y a tellement de cas possible.

Une des applications que je connais qui est le mieux capable de créer un système de réservation et gestion de ressource est PhpScheduleIt.

…. mais peut être que events-manager présenté ci-dessous peut aussi convenir.. il permet d’envoyer des « propositions d’événement » qui peuvent tout simplement être la réservation d’une ressource. (local, voiture, etc…)

Le plugin de shop wooCommerce a une extension qui permet de gérer des produits « réservables ». Il est ainsi possible de louer des ressources sur le shop. Comme louer des appartements…..  c’est 249$ par site… par an si on veut les mises à jours et le support !

https://woocommerce.com/products/woocommerce-bookings/

Comment créer un calendrier sur wordpress

Maintenant j’utilise le plugin events-manager….  couplé au plugin wp-fullcalendar il permet de présenter un calendrier genre ical.. avec les vues mois, semaine, jour. (seulement en vue publique, en admin, on ajoute les événements avec un formulaire semblable à celui d’ajout d’article).

La description complète de ce plugin très complet (même sans la version pro) est juste ici en dessous dans la rubrique « comment gérer un événement, une manifestation, des cours, un concert avec wordpress »…. car c’est avant tout ce qu’il fait. Mais vu qu’afficher un calendrier pour cette tâche de réservation de ressources est nécessaire… et bien voilà… il est aussi capable de bien gérer un calendrier ! 🙂

Avant.. J’utilisais le plugin My Calendar

Comme je n’ai pas trouvé de traduction en français, je l’ai faites. Voici les fichiers de langues en français pour My Calendar si ça intéresse quelqu’un:

Depuis la version 1.8.9 le plugin My Calendar intègre la traduction en français que j’ai faites. 😀

Pour avoir un calendrier interne, une solution assez pratique qui permet de s’interface presque partout, c’est le calendrier google.
Le plugin google-calendar-plugin permet d’intégrer le code html d’un google agenda dans l’interface d’admin de wordpress. Il est possible de gérer les rôles qui ont accès au calendrier.
Dans les commentaires ci-dessous, Sylvain nous signale aussi son utilisation du plugin wordpress-ics-importer pour afficher un calendrier qui provient d’un flux ics existant. Ainsi il est possible de gérer en groupe un calendrier (comme google calendar) puis d’afficher sur le site celui-ci.
Alla in one event calendar a l’air puissant.. mais aussi uniquement avec des formats de date anglophone… (à vérifier)
———
Voici encore un autre plugin de calendrier, mais que je ne connais pas … il a l’air bien.. mais à tester.. (upr)
—————
Voici encore un autre plugin d’agenda calendrier…

—————– Un plugin de calendrier / agenda Payant.. mais complet ———-

Comment faire un calendrier sur wordpress…. Je n’ai toujours pas trouvé de plugin gratuit qui soit bien efficace et pratique et qui supporte les formats de dates que l’on veut… J’ai commencé à m’en bidouillé un à l’aide des Custom Fields via le plugin ACF… mais c’est long !

… et là je découvre le plugin « calendarize it »… Je ne l’ai pas encore testé.. mais il semble avoir tout ce que j’ai besoin… une piste à suivre.

http://codecanyon.net/item/calendarize-it-for-wordpress/full_screen_preview/2568439

———– un autre plugin de calendrier

Le plugin eventon https://codecanyon.net/item/eventon-wordpress-event-calendar-plugin/1211017 a un design vraiment sympa, modern et qui fonctionne sur les mobiles.

Ceci pour seulement 25$

Pour en savoir plus le site du plugin: http://www.myeventon.com

Comment gérer un événement, une manifestation, un concert, des cours sur wordpress

Si l’on organise un cours et que l’on veut gérer les inscriptions depuis son site, on peut faire appel à un plugin de calendrier. Mais il y a mieux. Avec le plugin wordpress events-manager il est possible de gérer des événements.

Pour se faire une bonne idée des capacités de events-manager allez voir directement le site de démo.

La version pro (et payante 75$) du plugin permet de faire une intégration paypal. Il est ainsi possible de faire payer une inscription à un concert, une conférence, des cours.

Il est même possible d’exporter la liste des inscrits à un évènement au format csv.

Ce plugin hautement personalisable.

Voici le manuel d’installation pour bien débuter avec events manager.

Voici un tutoriel en français pour bien comprendre le fonctionnement de events-manager.

Complément pour afficher un calendrier genre ical avec vue mois, semaine, jours, il suffit de coupler wp-fullcallendar à events-manager. Dans ce dernier il faut activer l’option qui demande à events-manager de prendre le dessus sur la configuration pour pouvoir afficher les catégories avec leur sélecteurs dans la vue. http://wordpress.org/plugins/wp-fullcalendar/

Le plugin events manager est également capable de servir des flux au format vcalendar ce qui permet de s’abonner à un calendrier via iCal, outlook ou google calendar, et ainsi voir les événements directement dans son agenda habituel sans à avoir à se connecter sur un site web.

La documentation des flux vcalendar de events manager est par ici….

Bug de events-manager avec php 7.1

En mars 2017, on me signale une erreur http 500 sur l’admin d’un site wordpress. La page wp-admin ne charge plus, et ceci à cause de la mise à jour de php à la version 7.1 et du plugin events-manager qui n’est pas compatible.

PHP Fatal error:  Uncaught Error: [] operator not supported for strings in sites/monsite.com/htdocs/wp-content/plugins/events-manager/classes/em-events.php:63

En effet, php 7.1 est beaucoup plus typé que précédemment. Ainsi une chaine de caractère (string) n’est pas un tableau ! Ce qui casse certaine astuces qui étaient utilisée jusqu’ici.

Pour corriger ceci, il suffit de faire cette petite modification à la ligne 36 du fichier: events-manager/classes/em-events.php

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; -webkit-text-stroke: #000000} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; -webkit-text-stroke: #000000; min-height: 14.0px} span.s1 {font-kerning: none}

mettre: $groupby_sql = [];  à la place de $groupby_sql =  »;

———–

Le plugin event-espresso-free permet lui aussi de gérer un événement et tout ce qui va autour, cours, workshop, concert, conférence…

La version gratuite du plugin permet de gérer aussi le payement paypal.. la version payante est beaucoup plus complète. Elle gère des newsletter, un controle manuel des inscriptions.

Voici encore un article à propos de comparaison entre de multiples plugins de réservation, (booking).

Comment gérer l’inscription de bénévoles avec wordpress ?

Il existe un plugin wordpress qui permet de gérer l’inscription de bénévoles à des plages horaires. Il s’agit de : https://fr.wordpress.org/plugins/pta-volunteer-sign-up-sheets/

Sinon il existe aussi des services en ligne très pratique comme: https://volunteo.com/fr/ qui permet à bas coût de gérer des bénévoles. Gratuit pour les 10 premiers bénévoles puis 0.5€ par bénévole.

Comment afficher un calendrier sous forme de Timeline js

Pour voir de quoi je parle, voici un bon exemple, avec le programme du centre agroécologique des amanins. C’est une ligne temporelle qui affiche des bulles avec des événements et si l’on clique sur la bulle, la page affiche un article qui correspond à l’événement en question.

Le code peut être téléchargé sur le projet githum timelineJS de NUKnightLab.

.. mais pour faire plus simple, il est aussi possible d’héberger son code sur le service de http://timeline.knightlab.com/ et fournir la source du contenu via une google spreadsheet.

… ce qui revient à intégrer un iframe.

Mieux encore, pour intégrer ce iframe, via un shortcode… voici un plugin wordpress qui le fait…. https://wordpress.org/plugins/wp-veriteco-timeline/

… et voilà !

Comment sécuriser son installation wordpress contre les (méchants) hackers

Worpdress est une plateforme géniale, elle permet d’installer de nombreux plugin, elle est populaire… mais ceci a aussi un revers en terme de sécurité. Vu que le système est très populaire, trouver une faille permet de l’exploiter sur un grand nombre de site… ainsi il est important de faire des mises à jour fréquente de wordpress pour être certain qu’aucune faille n’est laissée ouverte.

Il est également important de faire les mises à jour des plugins. C’est là qu’il y a le plus de risque. Les plugins sont développé par des gens très divers. Certains font attention à la sécurité et d’autres moins !

Un plugin peut avoir accès à tout le site. Donc il faut avoir confiance en ce que l’on installe et faire les mise à jour régulièrement.

J’en ai fais les frais dernièrement, le 18 juillet 2014, je me suis fait hacker ce site via une faille dans l’extension de lettre de nouvelles wysija. Une mise à jour de sécurité avait été proposée le 4 juillet, mais je ne l’avais pas encore mise à jour… seulement 15 jours… ça va…

De nombreux sites wordpress ont subit des attaques, je ne suis pas le seul. Ça rassure un peu…  mais ça fait perdre beaucoup de temps.

voici la requête incriminée…

  • POST /wp/wp-content/uploads/wysija/themes/mailp/index.php?cookie=1

Le code derrière permet d’exécuter du code arbitraire… de permettre au hacker d’utiliser mon serveur comme il veut…  sympa !

J’ai remarqué cette attaque, car le script pollue tous les fichiers .php de l’arborescence du serveur pour s’y reproduire.. et du coup.. mon site a kraché… plus rien ne s’affichait…

Heureusement.. sinon une faille ouverte aurait pu rester silencieusement sans que personne ne la remarque !

Il est fini le temps où les méchants hackers faisaient des virus qui mangaient l’écran et détruisaient les données…. actuellement, on est à l’époque des méchants hackers engagés pour faire du piratage de site, y mettre des backdoor pour ajouter des machines zombies à un botnet. Puis ce réseau de centaines de milliers de zombie est prêt à être utilisé pour toutes sorte de choses. (En général envoyer du spam.. et surcharger les serveur d’opposant politique..)

Bref.. comment s’en protéger ?

Ici le code qui m’a eu a fait passer des fonctions php particulières comme « eval » ou « base64_decode »…. typiquement des fonctions utilisées ensembles pour envoyer une grosse chaine de caractère toute à fait anodine qui une foi décodée et évaluée comme du code php devient un programme….

Du coup en repérant les requêtes un peu louche qui voudraient utiliser ces fonctions, on peut déceler les attaques potentielles.. et surtout les bloquer.

C’est ce que fait le plugin: « Block Bad queries ». (même sans .htaccess)

https://wordpress.org/plugins/block-bad-queries/

Le plugin « bulletproof-security »

https://wordpress.org/plugins/bulletproof-security/

Permet de gérer mille aspects différents de la sécurité contre les attaques de site wordpress également la base de données.

Voici aussi le site https://wordpress.org/plugins/wordfence/ qui permet de se protéger contre certaines attaques.

Ce plugin scanne les fichiers sur le serveur à la recherche de code malicieux. Une bonne manière d’être protégé. Il semble qu’il est également capable de protéger contre les attaques DDOS.. mais j’ai pas encore compris comment…

Il y a aussi le plugin: https://wordpress.org/plugins/all-in-one-wp-security-and-firewall/ qui est assez similiaire. Il permet aussi de changer l’adresse standard /wp-admin qui est tellement connue que toujours attaquée en permanence…. ça limite bien si on change cette adresse standard.

Comment organiser les pages par drag&drop sur wordpress

http://wordpress.org/extend/plugins/pagemash/

=> plus nécessaire. C’est intégré dans la version de base de wordpress. (depuis la 3.?)

Comment proposer des articles similaires en bas d’un article wordpress

Si l’on veut augmenter le temps passer sur son propre site, il ne faut pas hésiter à proposer la lecture d’autre articles une fois que le lecteur en a fini un. En tout cas, je me fais souvent avoir par les titres accrocheurs… « Le pape: ça mystérieuse transfusion sanguine… » Je me sens obligé de cliquer et de lire un nouvel article.

Pour proposer des articles liés ou des articles similaire en bas d’un article wordpress, il existe le plugin: related-posts.

Comment créer un dossier composé de plusieurs articles sur le même sujet et les reliers automatiquement entre eux ?

Voici un tuto qui vous permettra de créer un plugin qui permet d’ajouter un shortcode à placer dans chaque articles qui est liée à d’autres.

https://code.tutsplus.com/tutorials/adding-post-series-functionality-to-wordpress-with-taxonomies–wp-25414

Comment ajouter des boutons de partage d’articles wordpress

Pour faire la promotion de ses articles, il est utile d’utiliser les réseaux sociaux. Pour faciliter le partage si l’utilisateur n’a qu’un clic à faire, ce sera plus facile. Donc il est possible d’ajouter des boutons en bas de l’article.

Il y a deux plugins concurrents pour ajouter ces boutons:

Comment ajouter un bouton de partage d’article sur whatsapp depuis un smartphone ?

La proportion de visiteurs de site web depuis des smartphones est grandissantes. Sur les sites que j’observe en 2014, c’est pratiquement le tiers des visiteurs de sites généralistes. C’est un peu plus pour les sites loisirs, ou pour les réseaux sociaux, et c’est moins pour les sites professionnels.

Bref… quand vous faites un site rébarbatif destinés exclusivement à un public professionnel de niche… pas besoin de trop se préoccuper du mobile. Si vous faites un site qui dont le public est les gens qui s’ennuient dans les transports publics.. là il faut mettre à fond l’accent sur le mobile.

Donc il vaut la peine de rendre le site un peu plus viral en utilisant les moyens de partages mis à disposition sur les appareils mobile. Whatsapp est une messagerie très très utilisées sur les mobiles. Donc il est possible d’ajouter un bouton: « partager sur whatsapp » à l’aide du plugin:

https://wordpress.org/plugins/mobile-sharebar/

Ce plugin ajoute des boutons de partage en bas de l’écran. Il ajoute aussi le bouton de partage facebook pour mobile !

Comment ajouter un bouton « pin it » de pinterest sur les images de son site wordress

Le plugin wordpress pinterest-pin-it-button permet d’afficher le bouton partager sur pinterest sur chaque article. Il y a une option avec la version pro du plugin qui permet d’afficher un bouton pin-it au survol de l’image. J’ai testé plusieurs plugin sensé faire ceci.. mais ils ne marchaient pas.. celui-ci semble marcher !

http://wordpress.org/plugins/pinterest-pin-it-button/

Voici un exemple avec des recettes de cuisine qui s’échangent facilement sur pinterest (cet exemple en plus comporte le plugin easyrecipe qui permet de formater les recettes pour que pinterest les comprennent et google aussi)

Comment ajouter une boite fan facebook sur wordpress

http://wordpress.org/plugins/simple-facebook-plugin/

Attention ne fonctionne qu’avec une page de fan. Les gens qui ont un compte personnel pour une entité qui n’est pas une personne feraient mieux de changer de manière de faire et de suivre les recommandations facebook.

Pour une intégration complète avec tous les services proposés par facebook il existe le plugin facebook ! Mais celui-ci demande de créer une clé d’application facebook, qui demande d’avoir un compte facebook identifié avec au moins un numéro de mobile ou de carte de crédit.

Au moins simple facebook s’installe sans toute ces démarches. (surtout si l’on doit faire ces démarche pour un client avec son propre compte facebook)

Le thème wordpress keilir (payant) comporte aussi un widget qui affiche directement une page de fan facebook quand on lui donne l’adresse de la page.

Comment forcer les gens à aimer sa page facebook avant de voir le site

Ou comment ajouter un popup facebook par dessus le site. Popup n’est pas le bon nom, c’était l’ancienne manière d’afficher une nouvelle page plus petite. Techniquement, dans le jargon des interface utilisateur, on appelle ça une fenêtre modale. C’est une fenêtre qui s’affiche par dessus tout le reste, et il n’est pas possible de faire autre choses sans l’avoir lue.

Certains disent que l’on augmente de 40% le nombre de j’aime sur une page facebook avec cette technique.

Certains parlent de squeeze box ou de lightbox du nom des pages de capture de e-mail ou de la galerie de photo lightbox qui a popularité la technique ou encore de splash screen.

Bref.. comment ajouter cette petite fenêtre qui demande à l’utilisateur d’aimer sa page facebook, ou google+ avant de voir le site ?

Il est possible d’utiliser les plugins:

Il est possible de donner une limite d’affichage. Par exemple 1fois tous les 4 à 7 jours histoire de ne pas ennuyer trop le lecteur !

Comment obliger les gens à aimer sa page facebook ou son compte twitter pour voir des bouts de page

Le plugin social-locker-for-wordpress permet de masquer un bout de page par un bouton j’aime…  et tant que le bouton n’est pas cliqué.. le contenu ne se voit pas….  il semble que 15% des visiteurs cliquent sur j’aime..

https://wordpress.org/plugins/social-locker/

Il existe une version premium payante….24$ aux dernières nouvelles.

http://codecanyon.net/item/social-locker-for-wordpress/3667715

Comment s’identifier sur wordpress avec un compte utilisateur d’un réseau social

Il est toujours ennuyant de devoir se recréer un compte sur chaque site web. Il est pratique de pouvoir s’identifier, ou s’inscrire avec un compte utilisateur déjà existant.

Le plugin oa-social-login, permet de se connecter sur un site wordpress avec les identifiants d’une vingtaine de réseaux sociaux différents. De facebook à twitter en passant par google, last.fm, yahoo, linkedin, paypal ou n’importe quel service OpenID.

Comment gérer des recettes de cuisine sur wordpress

Une recette de cuisine, c’est un document assez particulier. On peut le faire tout simplement comme un article de texte et image. Mais il y a des éléments que l’on retrouve dans toute recette et qui peuvent être utile pour classer la recette. A savoir le temps pour réaliser la recette, la liste des ingrédients, le déroulement de la recette.

Il existe des formats qui permettent de mettre en évidence ces différentes partie de la recette afin que les ordinateurs puisse aussi comprendre la recette. Il y a par exemple le microformat: hrecipe.

A quoi ça sert qu’un ordinateur puisse lire ma recette ? Tout simplement, google peut reconnaitre que c’est une recette de cuisine et la présenter comme telle dans ses résultats de recherche. Ce qui est très intéressant pour augmenter sa visibilité. Un autre exemple, le réseau social pinterest.com utilise ces formatages pour indiquer la recette en dessous de l’image que l’on épingle. C’est une manière intéressante de se démarquer et de favoriser la diffusion de ses recettes.

Pour aider à formater ses recettes de cuisine dans worpdress, il existe le plugin: EasyRecipe.

http://wordpress.org/plugins/easyrecipe/

… pour d’autres formats de microdata. Le plugin microdata for SEO by otimum peut le faire… voir plus loin sur cette page..

Comment intégrer toutes sorte de microformats sur wordpress ?

Le plugin : https://fr.wordpress.org/plugins/wpsso-schema-json-ld/ permet de gérer un grand nombre de microformats sur wordpress

Comment lire des sons de soundcloud sur wordpress

C’est parfois perturbant les solutions les plus simples sont les plus dures à connaitres…

En effet, il est très simple d’afficher un son provenant de soundcloud dans une page wordpress, mais comme il n’y a pas de bouton pour le faire, il est dur de le savoir…

En fait, pour ajouter une musique se trouvant sur soundcloud dans une page wordpress, il suffit de mettre le lien qui est fourni par soundcloud lorsque l’on clique sur le bouton « partager » (share) en dessous de la piste. WordPress va reconnaitre que ce lien est un son et il va automatiquement remplacer ce lien par la piste de musique.

Voilà… facile.

Pour avoir quelques images, d’explication et en savoir plus sur la personnalisation du player, voici la page de soundcloud à ce propos.

En fait wordpress reconnait beaucoup de services en lignes qui hébergent du contenu. Ainsi cette méthode de placer le lien marche aussi pour d’autres contenus, comme les vidéos youtube, vimeo, dailymotion, les images flickr ou instagram, les présentations scribd, etc…

Voici la liste complète des services embed que wordpress comprend.

Pour lire des sons de soundcloud.com directement en indiquant leur code, ou pour plus de personnalisation du player soudncloud il y a le plugin:

http://wordpress.org/extend/plugins/soundcloud-shortcode/

C’est le plugin que j’utilisais avant que wordpress ne reconnaisse soundcloud, mais c’est vrai que maintenant il a perdu du son intérêt.

Mais il permet toujours de créer des widgets avec de la musiques dans une colonne de droite.

Voici encore un autre plugin d’affichage de musiques issues de soundcloud sur son site wordpress. Ce plugin est surtout pratique pour vendre sa musique.

Comment vendre sa musique sur wordpress depuis soundcloud

Comme expliqué ci-dessus, il y a de nombreuses manières d’intégrer de la musiques de soundcloud dans un site wordpress. Voici encore un plugin qui lui peut afficher une playlist depuis soundcloud. C’est pratique pour présenter la musique que l’on peut vendre.

https://wordpress.org/plugins/soundcloud-master/

Comment ajouter un lecteur de musique dans une colonne de wordpress

Pour lire en continu des morceaux de musique pendant la visite du site.

Flash MP3 Player JW2.3 => http://sexywp.com/fmp

Comment lire des vidéo flash sur wordpress

On utilise le plugin: Flash Video Player pour avoir quelques facilités à mettre en place un player vidéo.

Comment ajouter une vidéo youtube dans une page wordpress

C’est tout à fait perturbant, beaucoup de gens cherchent longtemps pour trouver comment ajouter une vidéo youtube dans une page de leur site wordpress… pourtant c’est tout simple. Mais il faut le savoir.

pas besoin de plugin pour afficher une vidéo youtube sur wordpress. Il suffit de mettre le lien fournir par youtube « partager cette vidéo » sous forme de texte dans la page ou l’article, et automatiquement wordpress va convertir ce lien en vidéo inclue dans la page !

Ex: bla bla bla… regarde ma vidéo: http://youtu.be/idlCElCe-2U  voilà.. elle est bien….   ce lien youtube se transforme en vidéo.

WordPress ne supporte pas que youtube, mais également beaucoup d’autres services comme vimeo, dailymotion, scribd, pollDaddy, instagram, flickr, soundcloud… etc..

Voici la liste complète des services embed que wordpress comprend.

Pour aller plus loin et mieux gérer l’intégration de vidéos youtube. Il existe le plugin: https://wordpress.org/plugins/youtube-channel/

Comment protéger des adresses e-mail contre les robots collecteurs d’adresses pour le spam sur wordpress

Le plugin anti-email-spam est simple et remplace tout ce qui ressemble à une adresse email par un mailto sur cette adresse construit en javascript pour éviter que les robots ne trouve l’adresse.

Le seul soucis du plugin ci dessus est de ne pas se trouver sur le site de wordpres.org… du coup c’est plus dur de l’installer via mes scripts automatiques. (qui utilisent wp_cli wordpress en ligne de commande)

Mais il existe de nombreux autre « offuscateur » de e-mail:

https://wordpress.org/plugins/email-address-encoder/

Voir aussi la liste disponible: https://wordpress.org/plugins/tags/obfuscation

Mais est-ce que ça marche vraiment de masquer les e-mails ?
Il y a plein de techniques, voici une comparaison. A vous de choisir le plugin qui vous semble utiliser la bonne version, une technique qui est pratique pour vos utilisateurs.. mais qui gène les robots…

Comment afficher un extrait ou le texte complet des articles sur le blog wordpress

Si le thème le supporte, il n’y a pas besoin de plugin pour cette fonction. Il suffit de placer la séparation read more à l’endroit voulu du texte. Le bout read more à droite des boutons liens est là pour ajouter cette limite.

Le plugin https://fr.wordpress.org/plugins/advanced-excerpt/ permet de mieux personnaliser l’affichage du texte, notamment de garder les balises html et pas juste le texte brut, et de ne compter que le contenu et pas les balises.

Comment afficher des polices de caractère orginiales sur wordpress ?

Il est possible d’utiliser les fontes google. Voici le plugin:  https://wordpress.org/plugins/free-google-fonts/ qui permet d’afficher facilement des fontes google.

Si vous connaissez un peu le CSS, le principe de web fontes css peut aussi être la solution. Il y a une grande bibliothèque de fontes à disposition sur des sites comme: http://www.dafont.com mais attention, il n’est pas autorisé de tout faire avec toutes les fontes. Certaines sont limitées par leur licence. Attention de bien lire si on peut l’utiliser pour un site web.

Comment remplacer le logo de la page de login admin d’un site wordpress ?

Sur la plupart des sites wordpress, la page de « login », d’identification, pour l’interface d’administration il y a le logo de wordpress. Comment faire pour remplacer le logo de wordpress par le votre, ou celui de votre client ?

Il y a un petit plugin très simple pour faire cette opération:

https://wordpress.org/plugins/wp-custom-login-page-logo/

Comment créer un forum avec wordpress ?

C’est sur le site du support de organictheme que j’ai utilisé un forum qui m’a ssemblé bien fait. J’ai regardé avec quoi il était fait et j’ai découvert: https://wordpress.org/plugins/bbpress/

BBpress est une référence. https://bbpress.org il est conçu par le principal développeur de wordpress. Ce qui en fait un gage de bonne compatibilité et bonne itégration.

Comment créer un réseau social sur la base de wordpress

Une des manières les plus simples de mettre en place un réseau social est l’extension Buddypress qui transforme un wordpress en réseau social. Vous voici ainsi parti pour concurrencer facebook !

Ce que Buddypress peut fournir:

  • un profil d’utilisateur pour chaque personne
  • une notion de groupe de discussion. (3 types: ouvert, sur demande, invisible)
  • des connexions entre « amis »
  • des messages privés
  • des blogs
  • un flux global d’activités avec notifications par e-mail et flus rss

Si le but est uniquement de créer un vrai réseau social, il existe quelques applications libres et/ou opensource pour se créer son propre réseau social.

Pour plus de détail, je vous recommnande mon état des lieux des réseaux sociaux. (fin 2012)

Il y a par exemple:

  • Status.net
  • Movim
  • Buddycloud
  • Diaspora
  • Friendica
  • Tent.io
  • Ostatus
  • Jappix
  • App.net

Plugin pour buddypress

Buddypress, ne correspond pas à tous les besoins, ou les manières de faire. Ainsi il existe encore de nombreux plugin pour modifier le comportement de base de buddypress.

Voici une liste de 7 plugins qui résolvent une partie des demandes les plus populaires concernant des modification de buddypress.

Comment sécuriser sa communauté (dans les anciennes version de buddypress, tout est public sauf les groupes privé… donc on voit les infos des membres)

Voici des plugins pour sécuriser sa communauté buddypress, pour cacher le profile des utilisateurs aux personnes non identifiées.

http://wordpress.org/plugins/private-community-for-bp-lite/ => ferme tout et on peu ouvrir 20 pages.. mais trop restrictif
http://wordpress.org/plugins/buddypress-private-community/ => beaucoup plus d’option, mais config compliquée dans un fichier texte.

Mais il reste à sécuriser les pages, de membres ce qui est fait via l’ajout d’un bout de code qui exclu les visiteurs non loggué de certains fichiers sensibles.

J’ai opté pour un bidouillage simple. J’ai fait un child-thème du thème standard et j’ai ajouté ce code au début de chaque fichier sensible.

if (!is_user_logged_in() ){
exit();
}

J’ai ajouté ce code dans les fichiers de mon child-theme.
members/index.php => listing des membres
members/single/activity.php
members/single/home.php
members/single/profile.php

Design de buddypress

Buddypress a un fonctionnement un peu plus complexe que wordpress. Il lui faut ainsi un thème de base qui est compatible. Il existe moins d’une vingtaine de thème buddypress gratuit qui fonctionnent.

Avec la version 1.7 de Buddypress qui est sortie en avril 2013… il est déshormais possible d’utiliser la plupart des thèmes wordpress standard.

Welcome pack pour buddypress

Le plugin buddypress welcome pack permet d’accueillir correctement un nouvel abonné. Il est possible de le rediriger sur des pages d’aide au login. Il est possbile de modifier le contenu des différents e-mails envoyés par buddypress. Ainsi il est possible de personnaliser le e-mail d’activation d’un compte buddypress.

Grâce à ce plugin, j’ai pu construire un réseau social pour lequel l’activation ne se fait pas par la personne elle même, mais par un administrateur du site. J’ai modifié le mail d’activiation du compte pour enlever le lien d’activation et indiquer au nouvel utilisateur que son compte sera confirmé plus tard par un admin. (par exemple si l’utilisateur paye l’accès…). Puis avec le plugin « unconfirmed » http://wordpress.org/extend/plugins/unconfirmed/ Je peux voir la liste des utilisateurs en attente d’activation de leur compte et je peux les activers.

Gérer les notifications par e-mail des événements et du contenu d’un groupe Buddypress

Quand on est membre d’un groupe Buddypress, on aimerait parfois être au courant des différents événements qui arrivent dans le groupe.

Il y a deux moyens mis en avant:

  • les flux rss
  • le email

En ce qui concerne le e-mail, par défaut, un utilisateur est notifié uniquement si on le mentionne, ou s’il a réagit à une discussion. Si l’on veut recevoir un email pour chaque contenu publié. Ce n’est pas possible.

Le plugin « Buddypress-group-email-subscription » http://wordpress.org/extend/plugins/buddypress-group-email-subscription/ permet de choisir de s’abonner par e-mail à des notifications de tout contenu. Les options sont: comportement par défaut, tout, chaque semaine, chaque jour, seulement le thème du groupe.

Comment éviter les inscriptions indésirable de robots (splog) sur buddypress

Le plugin wanaguard est l’akismet du splog….

http://wordpress.org/plugins/wangguard/

http://wordpress.org/extend/plugins/anti-splog/ existe aussi, mais uniquement pour la version MU, multi-users de wordpress.

Comment afficher une carte de localisation des membres de votre site wordpress (ou buddypress)

Le plugin usermap ajoute des champs dans la fiche des utilisateurs wordpress. Ainsi, ceux ci peuvent indiquer où ils habitent. Puis le plugin permet d’afficher une carte avec le lieu où se trouve chaque utilisateur.

https://wordpress.org/plugins/usermap/

Comment installer un sondage de type doodle pour trouver une date de rendez vous ?

Voici un « doodle like », une alternative au service phare doodle ou a framadate pour wordpress. Où plutôt pour Buddypress.

Voici: https://wordpress.org/plugins/rendez-vous/

Ça peut être une bonne alternative à outlook, ou microsoft exchange pour créer un intranet dans une entreprise. Et hop.. on met en place buddypress… et on utilise rendez-vous pour se mettre d’accord sur les dates…

Sinon il y a toujours la solution externe de sondage framadate dont le code peut être repris là: https://git.framasoft.org/framasoft/framadate

Comment installer un système de petites annonces

Le plugin awcp permet de créer des petites annonces.

https://wordpress.org/plugins/another-wordpress-classifieds-plugin/

Une démo est disponible sur le site de awcp.

Il est aussi possible d’utiliser un système complétement dédié aux petites annonce, comme : https://osclass.org C’est avec ce système qu’un copain a créé son propre site de petites annonces pour la suisse romande: http://greglist.net

Comment installer une recherche vocal sur wordpress ?

Alors qu’il est possible de faire de la recherche vocale sur google, que siri débarque sur mac après avoir été sur iPhone. Il est aussi possible de faire des reccherches sur un site wordpress en mode vocal. Ceci peut se faire via le plugin: https://wordpress.org/plugins/voice-search/

C’est encore expérimental, c’est une fonction offerte par les navigateurs web chrome et safari…  On verra comment ça évolue.

Il semble aussi qu’il est possible de faire de la reconnaissance vocale pour écrire les articles wordpress !! à voir.. j’ai pas testé… http://www.crack-net.com/2012/05/un-plugin-wordpress-de-reconnaissance.html

Comment installer sur wordpress un système de commentaires évolués intégrés avec des plateformes de réseaux sociaux

L’idée est d’utiliser la plateforme de commentaires disqus qui propose de s’identifier au moyen de nombreuses plateformes.

http://wordpress.org/extend/plugins/disqus-comment-system/

Pour intégrer des commentaires uniquement facebook, le plugin facebook est ce qu’il faut. Toute la documentation des commentaires facebook est ici… https://developers.facebook.com/docs/plugins/comments/

Il y a aussi http://peadig.com/wordpress-plugins/facebook-comments/

Il y a aussi le plugin https://wordpress.org/plugins/gplus-comments/ qui propose des onglets différents… de commentaire g+, facebook , disqus et wordpress.

Comment inverser le sens des commentaire sur wordpress

Par défaut les nouveaux commentaires se placent tout en bas de la page, comment faire apparaitre les nouveaux commentaires sur le dessus de la pile de commentaires ?

En fait, c’est tout simple. C’est une fonction de base des options de wordpress.

On peut inverser le sens des commentaires. Dans les options de wordpress, sous réglages => discussion => Autres réglages des commentaires il y a le menu déroulant à sélectionner: Les commentaire doivent être affiché avec le plus: récent / ancien en premier

Comment ajouter des champs aux formulaires du système de commentaire par défaut de wordpress ?

Parfois il peut être pratique d’obtenir une petite information simple de la part de visiteurs d’un blog. Mais pour éviter de devoir se lancer dans une grande campagne de création d’un questionnaire complexe, il est possible de tout simplement ajouter des champs au formulaire des commentaires et ainsi d’utiliser tout simplement le système de commentaire par défaut pour réaliser la petite enquête que l’on veut…

Le plugin: https://wordpress.org/plugins/wp-comment-fields/ permet d’ajouter des champs de formulaire supplémentaires, des champs texte, des check box, des boutons radio… mais malheureusement pas des images… 🙁  mais il semble qu’une version pro payante de ce plugin est en cours de création pour réaliser cette fonction.

Comment afficher son flux twitter sur son site wordpress

Je vois deux plugin intéressants:

Comment ajouter un bouton twitter sur son site wordpress ?

Voici un article qui décrit plusieurs manière d’installer un boutton twitter sur son site wordpress.

C’est ce que l’on appelle en anglais… « twitter button follow » avec ou sans compteur de followers. (ça peut être utile pour marquer la preuve sociales que l’on est très lu… même si les visiteurs qui passent ne s’abonnet pas !)

Voici la documentation de twitter à ce propos.

https://dev.twitter.com/docs/follow-button

Sur wordpress.com … il suffit d’utiliser des shortcodes particulier pour affiche un bouton twitter, c’est déjà intégré. Mais pas sur votre propre installation !

http://en.support.wordpress.com/twitter/twitter-follow-button/

Voici un plugin wordpress qui propose un widget avec un bouton twitter:

http://wordpress.org/plugins/twitter-follow-button-shortcode/

Pas très personnalisable, mais simple et efficace.

Sinon, il y a aussi des thèmes qui intègrent directement twitter ou facebook… à voir.. Par exemple keilir affiche le stream de twitter et facebook.

Comment tweeter automatiquement ses anciens articles

Le plugin tweet old post permet de republier automatiquement des anciens articles de son blog. C’est pratique. Il arrive souvent que les nouveaux articles soit publiés…. puis on les oublie alors qu’ils sont très intéressant. Avec tweet old post, il est possible de définir une fenêtre de temps penant laquelles le plugin va rechercher des articles, puis on défini une fréquence à laquelle le plugin les publie. Une bonne mise en valeur de son vieux contenu.

http://wordpress.org/plugins/tweet-old-post/

Voici un autre plugin qui fonctionne aussi pour publier sur facebook ses anciens articles.

https://wordpress.org/plugins/wp-share-old-post-lite/

Comment diffuser des podcasts avec WordPress

Pour transformer un flux standard de blog en un flux de podcast. Utilisez Powerpress.

Comment personnaliser l’éditeur de texte de wordpress (TinyMCE)

Le plugin advanced-tinymce-configuration permet de personnaliser la barre de menu de l’éditeur tinyMce ainsi que de réactiver quelques fonctions désactivées mais présentes.

Pour les plugins TinyMce qui ont été enlevé de la version standard de tinyMce pour en faire la version courante de WordPress, il faut réinstaller le tout. Il est possible de réinstaller l’éditeur avec les plugins wordpress suivants:

Une forme originale d’édition des articles est d’utiliser un éditeur « front-end » directement dans la page sans passer par l’interface d’admin.

Un plugin wordpress existe qui reprend l’éditeur ajax aloha. Ce plugin s’appelle… front-end-editor

Le plugin https://wordpress.org/plugins/frontier-post/ permet aussi une édition front-end du site wordpress.

Pour placer du contenu personnalisé en html css directement dans la page, il est possible d’utiliser le plugin raw html.

http://wordpress.org/plugins/raw-html/

Une autre technique est de remplacer tinymce par ckeditor. Il est ainsi possible d’avoir un éditeur html riche qui ré-introduit les tableaux html par exemple.

http://wordpress.org/plugins/ckeditor-for-wordpress/

Comment créer un tableau avec wordpress

Par défaut, l’éditeur visuel de wordpress (tinymce) est livré avec une version simplifiée de Tinymce qui ne gère pas les tableaux !

… il faut croire que 90% des gens ne font jamais de tableau.. et donc que la fonction a été supprimée pour alléger le code…

Mais si vous avez vraiment besoin de faire des tableaux, il existe plusieurs possiblités:

  • remettre cette fonction native de tinymce en installant un plugin comme tinymce-advanced.. voir ci-dessus
  • installer un plugin qui gère des tableaux et insérer le tableau dans la page. Ceci peut se faire avec un plugin comme TablePress

Ce plugin propose des outils intéressants comme le tri du tableau ou l’importation de donnée d’un fichier csv.

Un tel outil peut être pratique pour afficher des résultats sportifs, ou un liste de membre, ou encore créer un agenda simplifié sous forme de liste.

Comment ajouter une photo d’utilisateur personnalisée sur wordpress ?

Par défaut, c’est le système gravatar qui est utilisé pour associer une photo, un avatar à un utilisateur. Gravatar est un service (créé par la même entreprise que wordpress) qui associe une image à une adresse e-mail.

Mais si vous avez des gens qui n’ont pas de compte gravatar, le plugin suivant permet d’ajouter une fonction à wordpress pour envoyer une photo personnalisée.

https://wordpress.org/plugins/user-photo/

Comment éditer les rôles et modifier les droits d’accès des utilisateurs wordpress

C’est ici que l’on voit clairement que la philosophie de wordpress est de ne fournir de base que ce qui est utile à 99% des utilisateurs.

Si l’on veut utiliser wordpress comme CMS, il est parfois utilie de pouvoir règler plus finement les droits des utilisateurs.

Dans wordpress il existe une notion de rôle. Chaque rôle a un certain nombre d’actions qui lui sont associées.

Le plugin user-role-editor permet d’avoir une interface qui permet de règler le détail de chacun des rôles.

Le plugin https://wordpress.org/plugins/capability-manager-enhanced/ fait quelque chose de très similiaire.

Si on veut aller plus loin dans la gestion fine des droits d’accès à des ressources sur wordpress, des pages, des medias, etc…   Il y avait le plugin https://wordpress.org/plugins/role-scoper/ qui est maintenant remplacé par le plugin https://wordpress.org/plugins/press-permit-core/ .

Il est possible de créer des groupes d’utilisateurs et de leur donner des accès précis, comme dans beaucoup d’autres CMS. Ceci fonctionne aussi pour la gestion des médias, mais seulement dans la version pro payante.

Le plugin https://wordpress.org/plugins/advanced-access-manager/ est aussi un plugin de gestion des droits d’accès fins dans wordpress. Il a une interface très plainsante. Il est très complet. Il permet de gérer les menus visibles pour le backend et pour le frontend. Les rôles, les capacités, les pages, et les posts.. les catégories.

Il est juste limité dans la version gratuite à 10 pages, posts, et custom post types….  après il faut acheter des packs pour débloquer la chose.  30$ pour un nombre illimité.

https://vasyltech.com/advanced-access-manager

Voici encore un autre plugin de gestion des rôles et capacités des utilisateurs d’un site wordpress.

https://wordpress.org/plugins/members/

=> top !

Très très bien intégré dans wp… simple… efficace.. Gratuit (le support est payant). Plus de 100 000 installations actives ! (le max que j’ai vu pour ce type de plugins)

Il est possible de définir des rôles et de donner des accès à certaines pages et posts uniquement pour ces rôles.

Un utilisateur peut avoir plusieurs rôles => ça permet de créer des groupes.

Il y a des widgets pour créer un login et pour afficher la liste des utilisateurs avec de nombreux filtres.

Possibilité de créer un site wordpress privés juste avec une case à cocher.

Possibilité de restreindre du contenu dans la même page avec des shortcodes.

ex:
[members_access role= »administrator,editor »]Hide this content from everyone but administrators and editors.[/members_access]
[members_logged_in]This content is only shown to logged-in users.[/members_logged_in]

pour mettre un formulaire de login dans une page: [members_login_form /]

Il existe des traductions dans de nombreuses langues.  https://translate.wordpress.org/projects/wp-plugins/members
J’ai juste du télécharger le fichier .po et générer un members-fr_FR.mo dans le dossier languages du plugin.

La documentation est ici: https://github.com/justintadlock/members/blob/master/readme.md

Bref… je crois que c’est mon préféré (pour le moment)… juste la personnalisation des e-mail envoyé qui manque. theme-my-login le fait. Il y a moyen de faire fonctionner les 2 plugins ensemble ? (pas testé à fond… mais je pense que oui.)

Le plugin (framework très complet) s2member permet de faire une gestion fine des utilisateurs. Il est ainsi possible de créer un site qui a une partie payante. Les utilisateurs passent par paypal pour s’inscrire et avoir accès aux parties protégées du site. s2members permet de gérer tout ça.

Ce plugin est aussi capable de gérer des téléchargement protégés de fichiers.

Il existe une traduction en français de s2member. (sauf pour l’admin) … et une complète ici.. http://ninjamarketing.fr/ressources/.

Voir aussi une bonne explication en français de ce que fait ce plugin s2members.

s2members est surtout orienté vers les développeurs. Il est donc un framework utile pour construire des applications. C’est aussi un plugin qui est très orienté vers la monétisation de contenu. Ainsi il y a de nombreux systèmes de payements et de système d’envoi de newsletter qui sont intégrés.

Comment créer une partie payante sur un site

Le plugin s2member décrit ci-dessus permet de créer ce genre de chose.

Voici aussi le plugin: http://leakypw.com/

Le plugin wishlist....  permet aussi de gérer une partie payante de son site avec une gestion complète des abonnés et même sur plusieurs niveaux.

Le plugin theme-my-login https://wordpress.org/plugins/theme-my-login/ permet de personnaliser le fonctionnement de base du login de wordpress. Notamment il permet de rediriger sur des pages précise et pas juste sur l’interface d’admin. Il permet aussi d’envoyer des e-mails personnalisé à l’inscription d’utilisateur, etc…

Le plugin wp-members https://wordpress.org/plugins/wp-members/ est un framework de gestion de droits d’accès. Il a un peu le même usage que s2member.

wp-members est un framework pour gérer du contenu premium ou gérer les accès des membres.

  • Gratuit.
  • affichage des posts et pages.
  • intégration du login dans un widget ou dans les pages.
  • Validation des nouveaux membres par un admin possible
  • plus de 100 hooks pour étendre les fonctions !
  • 70 000 actives install… le 2ème meilleur que j’ai vu.  et on voit qu’à chaque mise à jour il y a 4500 personnes.
  • Principe inverse à wp… tout est bloqué.. et indique qui a le droit de voir.

Choix des champs du formulaire d’inscription. (par drag drop pour réordonner les champs) Possibilité d’ajouter les champs. Les infos sur les utilisateurs sont stockés dans la table « users ». On les voit dans l’interface de la liste des users.

Si l’on veut faire un site payant, c’est top. Mais il faut aussi acheter la partie qui permet de gérer les paiements via paypal. wp-members a un plugin de plugin qui permet de gérer des inscriptions pour une période déterminée avec date d’expiration.

Pour obtenir les addons wp-members http://rocketgeek.com/plugins/wp-members/extensions/ il faut être membre du site rocketgeek… ce qui coûte 59$ / an. C’est justement wp-members qui est utilisé pour gérer le login ! 😛

Détail de la doc de l’add on paypal de wp-members: http://rocketgeek.com/plugins/wp-members/extensions/wp-members-subscription-module-with-paypal-integration/

WooCommerce a aussi un plugin qui permet de gérer des payements réccurent. De vendre l’accès à un produit pendant une période données, aussi avec des niveaux différents.. basic, premium etc.. et de laisser les utilisateurs choisirs leur plan de tarification.

C’est $199 pour ce plugin https://woocommerce.com/products/woocommerce-subscriptions/

Il y a aussi pour $149 le plugin https://woocommerce.com/products/woocommerce-memberships/ qui permet de créer un club d’utilisateurs qui a des avantages sur les prix du shop..

… et si finalement aucun plugin ne convient, si vous trouvez que ce sont des usines à gaz pour faire 3 fois rien…. voici un tutoriel pour créer un espace membre sur wordpress…

Comment changer le formulaire de login de wordpress

Le plugin https://wordpress.org/plugins/theme-my-login/ fourni un widget avec un formulaire de login mis du côté front end.

On peut gérer l’apparence des mails envoyés par wp lors de la création de comptes.

On peut gérer les champs du formulaire de login, user, e-mail, et aussi le mot de passe au formulaire d’inscription.

On peut choisir où arrive l’utilisateur quand il se connecte. (ainsi on peut aller ailleurs que sur le tableau de bord) et on eut même personnaliser la redirection en fonction des rôles.

Compatible Recaptcha

Widget à disposition pour le login avec personnalisation des infos (inscription, perte de mp, gravatar..)

On a ainsi les bases pour créer un espace membre sur wordpress. Les utilisateurs peuvent se créer un compte et s’identifier sans jamais passer par l’interface admin. Ils sont juste identifiés.

Le plugin https://wordpress.org/plugins/profile-builder/ permet de gérer un profile par utilisateur, mais aussi la gestion du formulaire d’identification.

Ce plugin permet aussi des subtilités comme le choix de l’affichage ou non de la barre d’admin pour les utilisateurs front-end. Il permet également de choisir si un e-mail de confirmation est envoyé ou non lors de l’inscription d’un utilisateur.

Ce plugin a aussi plusieurs add-ons (payants) qui permettent notamment de faire des synchros avec de nombreux autres services, comme mailPoet, mailChimp ou wooCommerce. => https://www.cozmoslabs.com/profile-builder-add-ons/

Comment créer portail pour chacun de ses clients sur son site wordpress ?

Le plugin https://wordpress.org/plugins/client-portal/ est fait pour. Il permet de créer une page privée pour chaque utilisateur du site wordpress. Cette page n’est accessible que par l’utilisateur lui même et les admins du site.

C’est typiquement une fonction utile pour créer un portail sur son site pour chacun de ses clients. Ils ont ainsi leur page, leur espace attitré sur votre site.

Ce plugin est tout simple, il recommande le plugin https://wordpress.org/plugins/profile-builder/ pour créer la logique qui permet de créer des pages de profile beaucoup plus poussée, et pour gérer la page d’identification (login) qui permet d’arriver sur la page du portail.

Mais il est aussi possible d’utiliser les plugins « members » ou « theme-my-login » (voir ci-dessus pour plus d’infos)

Voici un tuto qui explique comment réaliser une telle page de portail client sur wordpress…

Comment transformer wordpress en véritable CMS avec champ personnalisés puissants et facile à faire

En standard, wordpress permet pour chaque article d’ajouter des « champs personnalisés ». C’est une liste de « clés = valeurs » qui peuvent servir à stocker tout types d’information.

Mais l’interface utilisateur est un peu limitée et on ne peut entrer que du texte. Donc ajouter une image ou une date est possible, mais n’est pas forcément simple.

Le plugin advanced-custom-fields: http://wordpress.org/plugins/advanced-custom-fields/ offre une interface simple, puissante et conviviale pour gérer des champs personnalisés.

Cette interface utilise le principe des groupes champs pour faire des « packs » de champs personnalisés. Puis pour chaque groupe de champs il faut préciser, à l’aide de règles, sur quels contenu il est pertinent de l’afficher.

Par exemple, si je veux que certains articles soit des articles représentant des événements. Je peux créer un groupe de champs personnalisés qui contient des infos comme la date et le lieu.

Puis je dis que je veux afficher ces champs personnalisés uniquement sur les articles qui sont dans une catégorie que j’aurai créé qui s’appelle « événement ».

Voilà en quelques clics, j’ai créé une structure facile à utiliser et intuitive pour gérer un type de contenu particulier. Dans cet exemple de l’événement, le champs date est particulièrement intéressant. Il est créer grâce au champ de type « date picker ». (qui permet plusieurs formats de stockage et/ou d’affichage, ce qui n’est pas toujours simple à trouver dans les plugin de calendrier/agenda.)

L’étape suivante consiste à afficher les données que l’on a stockée grâce aux champs personnalisés. Pour ce faire il faut éditer les « template » php d’affichage des pages et article pour ajouter l’affichage des champs personnalisés.

Voici un exemple pour afficher le contenu du champ personnalisé ‘date_picker’ de la page courante.

 

Posted on: the_field(‘date_picker’); ?>

Le site du plugin Advanced Custom Fields (ACF) propose une abondante documentation et exemple de code.

Mais ACF fait encore plein de choses…

Il existe encore des add-ons (payants 25$) pour ce plugin: http://www.advancedcustomfields.com/add-ons/

Il y en a particulièrement 2 d’intéressants:

  • repeater-field => permet de proposer à l’infini un groupe de champs. Utile pour faire une fiche de description d’une personne et entrer sur la même page les données pour plusieurs personnes.
  • flexible-content-field => permet de créer des plusieurs blocs de contenu sur la même page. (plusieurs éditeur wysiwyg par exemple)

Je relève particulièrement l’add-on, flexible-content-field: http://www.advancedcustomfields.com/add-ons/flexible-content-field/ qui permet de créer à l’infini des sous-layout. Donc des flexibles content (un peu comme dans typo3).

Un peu difficile à expliquer en mots.. mais juste génial pour faire de wordpress un vrai cms capable d’afficher tout type de contenu dans une même page.

Donc un plugin gratuit et deux add-ons… et wordpress devient un CMS.

C’est payant, mais vu tout ce que ça fait, ce modeste payement est tout à fait mérité.

Si vous n’avez pas compris mes explications,  voici une autre explication plus complète des avantages de advanced custom fields.

Encore un avantage de ACF dont je n’ai pas parlé, c’est le fait que l’on peut exporter dans des fichiers (php ou xml) les structures que l’on créées.

En effet, les interfaces graphiques c’est sympatiques, mais dès qu’il faut changer de serveur, déménager le site ou faire des sauvegardes, c’est moins pratique. Les fichiers sont toujours plus pratique à gérer dans ce genre de cas que de cliquer sur 234 formulaires à la suite.

Ainsi ACF permet d’exporter les données et structures. Le plus pratique est le format xml. Il sort quelque chose qui est compatible avec l’importeur xml standard de wordpress. (dans Outils > importer).

Comment gérer des types d’objets personnalisés avec wordpress

Comment gérer des fiches de films, faire sa base de données de recettes de cuisine, gérer sa bibliothèque de livres, son stock d’habits, le matériel d’un club de sport…. ou mille autres types d’objets qui ne sont pas des articles ou des pages, mais que l’on voudrait gérer avec wordpress.

A la base, wordpress est un blog, rappellons le ! Il est capable de gérer des articles de blog. Mais finalement, les outils proposé de recherche, de mise en page, de catégorisation (taxonomie), d’affichage, etc peuvent tout aussi bien être utilisé pour gérer des informations tout autres que les article d’un blog.

Par défaut worpdress fourni deux types d’objets: les articles et les pages. Ces objets peuvent contenir des « attachements » (tous les fichiers que l’on ajoute, comme des images, des documents pdf, etc…)

Si l’on est programeur (et oui, ça se complique) wordpress nous propose une API qui permet de créer ses propres types d’objets. On parle alors de Custom Post Type (CPT) dans le jargon wordpress.

Voici une excellente documentation (en français !) à propos de la création de type d’objets personnalisés:

http://wordpress.bbxdesign.com/custom-post-type-custom-taxonomy

Pour nous aider dans la laborieuse rédaction de la définition php d’un objet personnalisé, voici un générateur. Il suffit de répondre aux questions et il pond le code:

http://themergency.com/generators/wordpress-custom-post-types/

Comment afficher un widget wordpress uniquement sur la page d’accueil

Ce titre aurait aussi pu s’intituler: « Comment associer des conditions à l’affichage des widgets wordpress dans les pages ».

Le plugin Widget Logic, permet d’associer des conditions (en php) à des widgets. Il est ainsi possible d’afficher des widgets sur des pages préciser pas sur d’autres.

Petit exemple, si je veux afficher un widget uniquement sur la page d’accueil d’un site, je peux associer la condition is_home(). C’est ce qui est fait sur le site: dickens6.ch pour n’afficher la vidéo que sur la page d’accueil.

Comment afficher un widget wordpress uniquement pendant une période de temps donnée ?

Il peut être utile parfois d’afficher un widget seulement certains jours, seulement pendant une période donnée, pendant un semaine spéciale de promo…   puis pouf.. le widget ne s’affiche plus.

Le plugin widget visibility time scheduler permet de choisir la période pendant laquelle un widget va s’afficher.

https://wordpress.org/plugins/widget-visibility-time-scheduler/

Comment créer une plateforme de cours vidéos en ligne avec wordpress ?

Je vois de plus en plus de cours online qui se font. Il y a plein de webmarketeurs qui vendent des cours de formation online. J’observent que très souvent ils utilisent la plateforme:

http://www.optimizepress.com

C’est un thème wordpress qui permet de gérer un espace membre privé accessible via payement. Dans cet espace il y a plein de vidéos de cours.

Ce thème n’est évidemment pas gratuit… il est fait pour faire de l’argent.. donc il vous en coûtera… au minimum une centaine de dollars.

Pour avoir une plateforme gratuite permettant de faire des cours de formation.. il faut plutôt s’orienter sur la plateforme moodle.. et ce n’est plus du wordpress. (l’ergonomie n’est pas top à mon avis..)

Il existe néanmoins des plugin gratuits qui font le même boulot de cours online que optimizepress.

Il y a : http://wordpress.org/plugins/membership-simplified-for-oap-members-only/

et.. http://wordpress.org/plugins/fv-wordpress-flowplayer/ pour lire des vidéos.. mais après il faut en gérer l’accès… un plugin comme s2Member doit en être capable. … à tester.

Voici encore un thème wordpress qui mélangé avec les plugin de forum bbpress, de réseau social buddypress et de commerce woocommerce et encore d’autres plugin.. permet de construire une véritable plateforme de cours en ligne.

La démo c’est par ici:

http://vibethemes.com/demo/wplms/

La documentation c’est par là: http://themeforest.net/item/wplms-learning-management-system/6780226

Pour créer une platerforme de cours de type LMS… Learning Management Systèm, il y a le plugin:

https://flyplugins.com/wp-courseware/

C’est un plugin payant.. mais très complet.

Il existe même un plugin pour faire l’interface entre wp-coursware et wishlist.... (un plugin de gestion de membre)

https://wordpress.org/plugins/wishlist-member-addon-for-wp-courseware/

Comment faire du crowdfunding, du financement par la foule avec wordpress ?

Le crowdfunding est un bon moyen pour financer un projet. Il permet de tester lors de la campagne si le projet est assez bon pour qu’il marche.

Cette technique limitée au début au financement de projets culturels comme des films par exemple est en train de se répandre dans tous les domaines. Notamment le monde de la création d’objet. Pour en savoir plus voici un article que j’ai écrit à propos de l’artisanat industriel.

La plupart du temps, le crowdfunding se fait avec une plateforme dédiée. C’est aussi pratique pour avoir la visibilité de la plateforme.

Mais pour de petits projets ou pour de multiples projets, ou pour se libérer du coût de la plateforme qui prend sa commission (~ 5% kikstarter)

Le plugin (payant) ignitiondeck peut faire l’affaire:  http://ignitiondeck.com/id/ignitiondeck-pricing/

J’ai également vu quelque chose chez http://traceparent.com qui fait le widget: https://github.com/mammique/tp-wp-crowdfunding-widget

Sinon, il existe de nombreux thème pour faire du crowdfunding avec wordpress, voici le top 10…

Comment déménager son site wordpress ou importer un blog vers wordpress

Comment déménager son site, son blog… vers wordpress… ou depuis un wordpress existant à un endroit vers un autre wordpress.

(pour changer d’hébergeur par exemple.)

WordPress est équipé en standard d’un outil d’exportation. (Outils > exporter) Cet outil crée un fichier xml avec (presque) tout le contenu du site. On perd la configuration et le thème doit être remis.

Voici donc comment on peut simplement sauvegarder un site wordpress.

L’outil d’importation est également un plugin qu’il faut ajouter: http://wordpress.org/plugins/wordpress-importer/

Il existe d’autres outils d’importations, pour importer sur wordpress un site blogger ou un flux rss, un site tumblr ou livejournal….

De mon expérience, je ne connais que l’importation wordpress à wordpress qui marche très bien. Les images ne sont pas directement dans l’archives, mais elles sont représentées par leur url. Ainsi il faut que le site source soit online pour faire le déménagement.

Comment gérer un grand nombre de blogs wordpress

Lorsque l’on gère un grand nombre de site wordpress il est pratique de pouvoir faire une installation centralisée. WordPress est capable de ceci. Il est possible d’activer le mode multisite.

Voici la marche à suivre pour activer wordpress en multisite et avoir une ferme d’instances wordpress à disposition.

Tous les sites tournent sur la même instance du core de wordpress, des plugins, et des thèmes. Ainsi les mises à jour ne se font qu’une seule fois. Ce qui peut être un avantage, mais aussi un inconvénient. En effet, parfois les différents plugin ne sont pas compatibles avec la nouvelle version du core de wordpress. Ainsi, on ne peut pas bénéficier d’une nouvelle fonctionnalité pour un site tant qu’un plugin utilisé sur un autre site n’a pas été mis à jour.

Donc bien faire attention de savoir si l’on a vraiment besoin du mode multi-site ou non.

Si l’on veut proposer à de nombreux utilisateurs un blog ou un site simple avec un nombre limité de thèmes et plugins. Le mode mutlisite est une bonne idée.

Si vous voulez utiliser wordpress plutôt comme CMS et constuire de nombreux sites très différents les uns des autres avec des themes ou child-themes différents et de nombreux plugins, ce n’est peut être pas la bonne solution. Comme je l’ai dit, la compatibilité des mises à jour des plugins peut nous jouer des tours.

(typiquement, le plugin qtranslate qui permet de faire ds sites multilingues a toujours un moment de retard sur la dernière mise à jour de wordpress. Ainsi même les sites qui ne sont pas multilingues doivent attendre que qtranslate ait été mis à jour pour pouvoir profiter de la dernière version de wordpress.)

De plus, dans une installation multi-site. Il y a une hiérarchie des utilisateurs. Il y a des admin de site et des super-admin de tous les sites.

Un admin de site n’as pas le droit d’installer des plugins et des thèmes. C’est le super-admin qui peut le faire et choisir quels thèmes et plugins sont à disposition pour l’admin. Ce derniers peut uniquement choisir des les utilisers ou non.

Depuis quelques temps, j’observe un comportement étrange quand j’ajoute des balises html ou des classes à des div. L’éditeur de texte me garde mes personnalisation lorsque j’utilise un utilisateurs super-admin, alors qu’il me supprime mes personnalisation quand j’ai un utilisateur qui n’est que admin de site. Etrange !?

Je serai intéressé de savoir si d’autres personnes ont observé le même comportement. (avec wp 3.3…)

Comment gérer simplement un grand nombre de blogs wordpress sans WP MU, wordpress multi-utilisateurs

WP-mu, est vraiment utile pour gérer un grand nombres de blogs simple. (comme ce qui est proposé sur wordpress.com, vu que ce site tourne sur cette version de wordpress)

Mais dès ces blogs ont des plugins et des thèmes qui sont très différents et avec des spécialités, ça devient dur à gérer les mises à jours.

C’est surtout le cas, si l’on utilise wordpress comme CMS plus que comme blog.

Dans ce cas, il est plus simple de faire de nombreuses versions autonomes de wordpress. Mais alors, il devient dur de gérer les mises à jours. Il faut aller cliquer sur le boutons mise à jours de tous les sites….

Comment centraliser la mises à jours de plusieurs site wordpress ? ..

J’ai découvert https://managewp.com qui propose un service pour gérer plusieurs site… le service est payant, mais les prix sont très abordables… ça commence à ~ 10$ / an pour 5 sites..

Les backups sont gérés via drop box.

Le services  https://wpremote.com propose une solution similaire pour 5$ / site par mois.

Pour gérer wordpress via des lignes de commandes, il est possible d’utiliser l’outil wp-cli. Ainsi il est possible de mettre à jour des plugins ou le core de wordpress sans passer par l’interface web, en utilisant des scripts uniquement.

Sur cette base de scripts, il est possible de se construire toute une série d’outils scriptés n’importe quel admin serveur le fait. On peut imaginer d’avoir une commande qui installer un wordpress complet et qui lui installer et mets à jour une série de plugin. Une méthode simple pour créer et maintenir un grand nombre de sites.

Sinon, voici un article de Smashing magazine qui propos d’utiliser composer pour gérer les différentes dépendances de wordpress.

Comment accélérer le chargement de vos pages wordpress ?

Mettre les pages en mémoire cache

Il y a plusieurs techniques. Vu que la plupart du temps les pages ne changent pas. On peut les mettre en mémoire cache et les resortir déjà toutes cuites sans à devoir refaire la manipulation de construire la page.

C’est ce que fait le plugin wp-sper-cache: http://wordpress.org/plugins/wp-super-cache/. Mais attention il peut y avoir des effets de bords indésirables à vouloir mettre ses pages en caches. Voici un exemple:

Quand on utiliser un player sur une web-radio, il est parfois utile d’afficher le nom du titre qui passe sur le moment. (voir neuchvox comme exemple) Mais une fois la page en cache, c’est le titre du moment où la page a été mise dans le cache qui s’affiche pas le titre actuel. L’admin ne le voit pas forcément, car lui il est souvent identifié sur le site et ainsi, il n’a pas le cache. (pour pouvoir faire du développement en direct).

Le remède est d’utiliser de l’ajax. Des scripts qui s’exécutent côté client. La page n’affiche que le contenu qui est fixe. Puis, c’est le code javascript qui va régulièrement chercher l’information diffusée côté serveur.

Pour en savoir plus, voici un tutoriel sur le paramètrage de wp-super-cache.

Compresser et « minifier » les javascript et css

Pour économiser de la bande passante, on peut également compresser les feuilles de style css et les fichiers javascript pour qu’ils prennent moins de place !

C’est ce que fait le plugin bwp-minify: http://wordpress.org/plugins/bwp-minify/

Comment optimiser la taille des images

Le plugin suivant se chargera pour vous de diminuer la tailler des images, des votre et de votre thème…

https://wordpress.org/plugins/ewww-image-optimizer/

Comment optimiser son site worpdress pour les moteurs de recherche (SEO Search Engine Optimization) ?

Partout j’entend que le plugin http://wordpress.org/plugins/wordpress-seo/ par yoast est le meilleur.. ça doit être vrai. Il faut que je teste encore !

Mais c’est vrai que la liste des choses qu’il gère est impressionnante !

Voici un petit extrait des critères qu’il observe sur chaque article pour donner une note de chance d’un bon référencement:

  • il faut choisir un mot clé (ou phrase.. bref ce que va chercher le visiteurs sur google) pour lequel on a envie que l’article soit au top des résultat
  • il faut que son mot-clé apparaisse, dans le titre de la page (title), dans le titre du contenu (h1), dans l’url, dans le contenu, dans la description meta
  • le nombre de mot de l’article doit être au moins de 300
  • le mot clé doit être présent en bonne densité dans le contenu de la page
  • la page doit contenir des images et l’attribut alt des images doit contenir le mot clé !
  • il faut que cette page contienne un lien externe
  • il faut une bonne structure de titre h1, h2 etc.. et qui contiennent aussi le mot clé !
  • etc….

Puis, il faut du neuf.. un mot clé neuf est mieux. D’ailleurs google favorise beaucoup les sites dont le contenu bouge et n’est pas figé depuis longtemps.

Avec google analytics il voit aussi  des choses.. mais quoi ?

Un point important en SEO est aussi d’utiliser google+ … c’est le réseau social de google.. ils cherchent à le favoriser… donc si on joue le jeu, on est aussi favorisé, les liens sont en Dofollow… donc suivi par les moteurs de recherches.

google authorship (le fait de d’associer un contenu et un compte google ) est également un point important pour bien resortir dans les résultats du moteur de recherche.. mais aussi être visible par l’humain quand il choisi de cliquer sur une liste de résultats affichés par google. L’humain aura tendance à cliquer sur le lien à côté de la photo de l’auteur.. plutôt que sur un obscure lien texte.

Donc il est important de lier un compte google+ à son contenu avec google authorship … pour savoir comment installer google authorship sur wordpress voir mon explication sur ci-desssus sur cette même page « comment afficher sa photo à côté de son résultat google »

Un aspect du boulot de SEO est l’utilisation de microdata. Ainsi le plugin microdata-for-seo-by-optimum7com, peut faire l’affaire… à voir ci-dessous..

Comment gérer les microdata sur wordpress ?

Le plugin http://wordpress.org/plugins/microdata-for-seo-by-optimum7com/ permet de gérer directement dans l’éditeur visuel l’ajout de microdata. Pour rappel, les microdata sont un moyen pour une machine de voir ce qui saute aux yeux pour les humains.

Par exemple, si je fait une page de contact pour une personne. Je vais lui mettre son nom, son adresse, quelques moyen de contacter cette personne. Moi en tant qu’humain je saurai bien que c’est une personne. Mais un moteur de recherche qui passe ne le saura peut être pas. Les microdata sont un formatage invisible pour l’humain, mais qui donne de précieuses infos à un robot pour mieux comprendre les données qu’il enregistre. Ainsi c’est un bon moyen de les faire ressortir.

Google présente certains résultats de recherche dans ces formats. Il aiment bien, alors il les mets en avant. C’est une technique pour être mieux référencé. Faire un peu de SEO comme on dit dans le jargon. Search Engine Optimization.

Voici les formats que ce plugin de microdata pour wordpress comprends:

Ainsi quand vous parlez, d’un produit, d’un lieu, d’une personne, d’un événement ou d’une organisation, n’oubliez pas de formater ces données en microdata….

Pour les recettes de cuisines, il y a directement le plugin http://wordpress.org/plugins/easyrecipe/ qui gère la recette et qui crée automatiquement un format microdata.

Encore pleins d’autres plugins wordpress jugés indispensables suivant vos intérêts…

http://www.tipsandtricks-hq.com/list-of-the-best-and-must-use-wordpress-plugins-535

Pour booster un blog..

http://www.des-livres-pour-changer-de-vie.fr/meilleurs-plugins-wordpress/

=>

Comment mettre son site wordpress en doFollow

La base du web, c’est les liens. Un visiteur va se balader sur le vaste web en cliquant sur des liens.

Si je trouve un site intéressant, et que j’en parle sur mon site. Je fais un lien vers celui-ci. (D’ailleurs cette page est remplie de liens !)

Ainsi un contenu qui est très intéresse est pointé par beaucoup de liens. C’est ce principe qui a fait la popularité de google. C’est la base de son algorithme de « page rank ». Plus un site a de lien qui pointe sur lui, plus il google se dit qu’il doit être intéressant et donc plus il est mis en avant dans les résultats de recherche.

Ainsi, il y a rapidement des petits malins qui ont trouvé la combine. Si je mets des liens partout sur le web qui pointe sur mon site… il sera mieux référencé sur google…

Et voilà, c’est sur ce constat que le spam de commentaire de blog a été inventé ! Des robots se balade pour mettre des commentaires bidons sur les sites « nice blog ! » et placent discrètement un lien vers leur propre site. (soit dans le message, ou plus discrètement dans le champs « site web de l’auteur du commentaire »).

Du coup la riposte a été de mettre un attribut « noFollow » sur les liens des commentaires. Ainsi google sait qu’il ne doit pas tenir compte de ces liens.

Bien.. mais pas top…  Si l’on veut vraiment booster un site web, il faut favoriser l’interraction avec les visiteurs. Ainsi, il faut leur donner un petit bonus, un su-sucre pour les faire venir. Le fait d’offir un espace pour mettre un lien vers leurs site est un bon moyen de motivation.

Ainsi, on va modifier le comportement de base de wordpress pour supprimer l’attribut noFollow. C’est ça qu’on appelle mettre un site en DoFollow.

Ceci peut se faire simplement en ajoutant le plugin: sem-dofollow.

http://wordpress.org/plugins/sem-dofollow/

Comment ajouter « quelque chose » à la fin ou au début de chaque article de son blog wordpress

Pour être plus précis sur le « quelque chose ». Comment ajouter uen pub adsense à la fin de chaque article, ou comment ajouter un formulaire d’inscription à une newsletter à la fin de chaque article.

Voilà pour les utilisations les plus courantes. Le plugin, post-layout permet d’ajouter « quelque chose » en bas ou en haut de chaque article.

http://wordpress.org/plugins/post-layout/

Comment fonctionne le cron (planificateur de tâche) de wordpress ?

WordPress dispose d’une fonction native wp_cron qui permet de planifier des tâches réccurentes. (dans le monde unix on parle souvent de cron) On utilise souvent ce genre de planificateur pour réaliser des tâches de maintenance ou pour envoyer des lettres de nouvelles. ex: « chaque mardi vide le dossier temporaire », « toutes les 3h envoie les lettres de nouvelles en attente d’envoi ».  Or wordpress n’a pas d’horloge interne qui lui permet de savoir où il en est et de déclencher des actions au besoin. Alors comment fait-il ?

Et bien c’est vous cher visiteur qui déclenchez wp_cron quand vous visitez la page ! En effet, un appel à la fonction wp_cron est fait quand on charge une page. Ainsi pour les sites qui sont très visités (et ceux où au moins le robot de google passe) le cron est déclenché régulièrement. Mais ce n’est pas toujours le cas, surtout si le site n’est pas très connu, ou si comme sur ce site, j’ai un wordpress pour envoyer le lettre de nouvelle mais pas pour afficher les pages ! Mes lettres de nouvelles ne sont pas envoyées régulièrement.

Ainsi, il est possible de manuellement visiter la page wp-cron.php qui va déclencher le planificateur:

https://martouf.ch/wp/wp-cron.php

(ici j’espère que google bot ou vous suffira pour déclencher mes planification ! 🙂 )

Mais comme ce n’est pas très pratique d’aller visiter la page régulièrement, il est possible d’automatiser la visite de cette page à en ajoutant cette tâche au vrai cron de votre système sur votre serveur.

Voici un article qui explique comment ajouter un cron sur votre serveur pour déclencher le wp_cron de wordpress toute les 15 minutes.

Il ne faut pas oublier de désactiver le lancement de wp_cron à chaque chargement de page. Ce qui économise un peu de temps de chargement de page.

Il suffit d’ajouter la ligne suivant dans votre fichier de configuration wp-config.php:

  • define(‘DISABLE_WP_CRON’, true);

Pour bien visualiser les tâches programmée dans le planificateur de wordpress, wp_cron. Il exsite un plugin qui offre une interface graphique. Il s’agit du plugin: WP Control: http://wordpress.org/plugins/wp-crontrol/.

Voici un article qui explique le fonctionnement de wp control.

En ce qui concerne l’envoi de lettre de nouvelles avec wysija, ce plugin utilise aussi wp_cron, mais si l’on achète la version premium, on nous offre un cron qui assure que les lettres de nouvelles soit envoyées. http://support.mailpoet.com/knowledgebase/cron-options/

Mais il est également possible de configurer son propre cron système sur l’adresse directe de la fonction d’envoie de lettre de nouvelles de wysija ce qui évite les problèmes liés à wp_cron.

A l’exemple de ceci: https://martouf.ch/wp/wp-cron.php?4d3398ec46a554f0d6da49c0525d0663&action=wysija_cron&process=all

Toute la documentation à propos de la création d’un cron pour envoyer les e-mails de wysija est par ici.

Voici encore un autre site pour lequel j’ai besoin d’un cron… et j’utilise le boot de google comme cron… il passe tellement souvent que ça suffira !
... cliquez ici pour envoyer la lettre de nouvelles de musiquecdf… merci 🙂

Une autre solution pour remplacer un cron si l’on a pas accès au serveur, c’est d’utiliser le service https://ifttt.com. Il faut lui demander à interval régulier de télécharger un fichier dans sa drop box.. il chargera l’url qui active l’envoi de la lettre de nouvelle 🙂

Comment afficher du code php ou autre proprement sur wordpress ?

Voici un plugin qui permt d’afficher du code dans le contenu de sa page de blog. C’est pratique pour les blogs de geeks qui veulent parler de programmation.

https://wordpress.org/plugins/pastacode/

Une liste de thème qui ont un jour retenu mon attention

Plusieurs thème responsive et gratuit:

http://www.wprazzi.com/2013/free-wordpress-themes/

Un thème payant, de qualité, très polyvalent et qui offre des fonctions d’affichages supplémentaires intéressantes (afficher des onglets, des boutons, des boites modales, accordéons… etc.. )

http://organicthemes.com/demo/seed/

Comme je n’ai pas trouvé de traduction en français, je l’ai faite moi-même. Vive l’open source ! Je vous incite à également partager votre travail avec la communauté ! Tout le monde y est gagnant !

Donc voici la traduction en français du thème wordpress seed: fr_FR.mo
Il suffit de mettre ce fichier dans le dossier « languages » du thèmes seed.

Pour avoir plus d’information sur la localisation du thème seed, voir la documentation donnée par OrganicTheme.

Un autre thème payant (mais pas cher pour ce qu’il offre 40$), qui nous viens d’Islande.

http://bluth.is/landing/keilir/

Un superbe thème flat design, responsive, polyvalent, très personnalisable, avec des widgets pour faire des trucs standards comme la page facebook, twitter, flickr, etc…. ainsi que des shorts codes pour faire des boutons, des alertes, des accordéons, des badges, des colonnes, des citations des tooltips… etc…

Voici une démo du wp thème Keillir…

Quand j’ai vu ce thème, je me suis dit.. « ah.. c’est vraiment ce que je cherche depuis un moment ! »

Aussi un thème sympa que j’ai utilisé, c’est The Muse. Pour voir la Demo c’est par ici. Ce thème présente le blog un peu dans le genre d’une timeline de page facebook. C’est assez sympa.

Themefuse a aussi plein de thème sympa dans plein de domaine, du dentiste, à l’agent immobilier en passant par le jardin d’enfant et le site pour un mariage…. pour voir toute la galerie des thèmes, c’est par ici…

… et encore des sites OnePage…

Comment faire une site wordpress avec un thème « OnePage » sur une seule page par panneau à la suite

Il devient de plus à la mode de faire des sites avec un design que l’on appelle « One page »….c’est à dire que le site entier tient sur une seule page wordpress. Le design est fait par panneau à la suite, comme une sorte de présentation. C’est aussi souvent utilisé pour les « landing pages ».

Voici un bon exemple de site onPage.. bien que pas fait avec wordpress !! 😛  http://www.pfadi.ch/fr

Le site commence souvent par une belle photo plein écran sur la page d’accueil, puis des liens nous guident au traveers d’une histoire jusque tout en bas de la page.

L’avantage de ce genre de design (autre qu’esthétique), c’est de pouvoir proposer au nouveau visiteur un cheminement logique, une histoire qui raconte son site et comment le visiter.

Le visiteurs régulier, lui pourra directement cliquer sur le bon menu (pour autant qu’il apparaisse, ce qui n’est pas le cas de tous les site onepage). Ainsi on arrive à concillier de manière élégante les chemin de navigation pour les nouveaux visteurs et pour les visiteurs réguliers. Ce qui n’est pas toujours simple ! 🙂

L’autre avantage technique de du design OnePage est qu’il est facilement « responsive », adaptable aux mobiles. A l’ère où le smartphone devient un outil très très utilisé pour visiter les sites, c’est important.

(mes tests me montrent que c’est entre 1/3 et la moitité des visiteurs depuis des smartphones sur des sites à vocations tout publics et beaucoup beaucoup moins sur des sites dédié à des professionnels….  J’en déduis que les employeurs fournissent des ordinateurs et non des smartphones à leur employés !)

Voici un thème du plus pur style « OnePage »: http://themetrust.com/themes/baylie

J’ai aussi eu une bonne expérience avec le thème Avada, qui est vraiment le couteau suisse du thème wordpress, qui fait vraiment de tout…

Avada propose plein de shortcode qui permettent de construire un design One page sur une seule page wordpress. Voici leur exemple de site one page avec effet parallax… Le slider que l’on voit dessus qui permet de faire des effets de titres s’appelle, « Revolution Slider« . Il est très puissant. (mais un peu gourmand en ressources.)

Voici la liste impressionnantes des caractéristiques d’Avada… (responsive, compatible woocommerce, forum, localisé, etc…)

http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226

Voici une excellente manière polyvalente de rendre n’importe quel thème wordpress compatible avec un affichage « one page ».

Il s’agit d’utiliser le plugin: https://wordpress.org/plugins/siteorigin-panels/

Le principe est simple et efficace:

  • définir une grille où mettre du contenu. (un peu comme on le faisait avec des tableaux html)
  • Largeur des blocs réglable (et responsive)
  • possibilité d’attribuer des id et classes css aux blocs
  • Il existe des exemples de page déjà tout fait pour nous aider. (prebuild template)
  • Puis remplir les blocs avec du contenu provenant des widgets de wordpress ou de widget fourni par le plugin
  • Il est possible d’obtenir des widgets supplémentaires. (aussi en premium)
  • Le pack gratuit est fait pour SiteOrigin Widgets Bundle => https://wordpress.org/plugins/so-widgets-bundle/
  • Le code est également un exemple pour coder son propre widget.
  • Il y a :
  • => google maps
  • => joli bouton
  • => image
  • => call to action
  • => slider d’images et html5 videos
  • => tableau de prix
  • => carrousel de posts (articles et autre ?)
  • => vidéo
  • => Features widget. (pour mettre en avant des services via une bulle et un logo)
  • => headline to get you noticed ?
  • => réseau sociaux

Il y a aussi des developpeurs tiers qui ont réalisé des plugins contenant des widgets compatibles site-origins:

Pour woocommerce..

Comment copier la structure d’une page faite avec le pagebuilder de siteOrigin ?

C’est une question qui revient souvent. La réponse officielle, c’est d’utilise le plugin: https://wordpress.org/plugins/duplicator/ pour copier une page d’un site à un autre..   En gros, c’est un plugin de sauvegarde. Donc en effet, copier la base de données, ça marche. Mais c’est un peu lourd pour juste copier une page. Et de mon côté j’ai déjà un système de sauvegarde.

Donc il y a une autre méthode beaucoup mieux et plus simple…

En local, il y aussi l’interface pour utiliser les gabarit de page déjà fait tout prêt… https://siteorigin.com/page-builder/documentation/prebuilt-layouts/

Parmis ces gabarits, il y a aussi les pages qui sont sur le même site que l’on peut cloner. Et dans les mêmes menus, il y a un outils d’exportatio/importation. Ainsi il est possible d’exporter une page au format .json, puis il est possible de réimporter ce même fichier json via la même interface sur une autre page ou un autre site qui utilise le même plugin siteOrigin panels.

C’est mieux que de sauvegarder la base de données.

Pour les gens qui veulent en masse cloner des pages, il y a aussi e plugin: https://wordpress.org/plugins/duplicate-post/
(on peut choisir les méta données à cloner, ainsi on peut avoir un titre et une date différente !)

(et voici mille autres thèmes…  je ne sais pas si la liste est à jour !!)

Child thème wordpress, le thème dérivé d’un autre

Le plus souvent je crée un child thème à partir du thème de base twentyeleven, twentytwelve et bientôt twentythirteen. C’est un moyen de s’assurer d’avoir les dernières fonctionnalités et de ne pas passer trop de temps à recréer un thème de base.

Le child thème est un thème qui hérite d’un thème parent.

Attention en téléchargeant des thèmes gratuits. Parfois ils sont gratuits uniquement pour y inclure du code malicieux, de la publicité ou créer des liens qui vont augmenter le page rank d’un mot clé voulu par l’auteur.

La gratuité est souvent déguisée !

Voici un article qui explique pourquoi il ne faut jamais rechercher un thème wordpress gratuit sur google…

Ce même article recommande quand même quelques….

….. Bons sites de thèmes WordPress gratuits

Quelques endroits où aller trouver des thèmes que je trouve jolis et bons (tout à fait subjectifs)

Il y a principalement des thèmes payants.. mais parfois des gratuits. Mais surtout ils sont généralement bons.

Un article qui liste les 15 meilleurs sites qui vendent des thèmes wordpress.

Encore une liste de thèmes en tous genres qui sont assez originaux pour certains…

Un thème magazine que je trouve très coloré et moderne si on a plein d’image: surfarama.

La traduction en français de surfarama.

Comment proposer un mockup de thème à un client et en discuter via le web ?

Le plugiin: https://wordpress.org/plugins/mockup/ permet d’effectuer à distance la difficile tâche d’ajustement d’un thème. Ce plugin propose un processus pour discuter directement sur la page du thème des ajustements à faire.

Liste de thème wordpress en français

Le site www.wptrads.com propose des traductions de plugin et thème wordpress en français. Si la traduction est proposée, c’est que le thème est bon, donc il est aussi intéressant d’aller faire son marché de thème sur ce site. Car on trouve majoritairement des thèmes biens et utilisés !
Voici une liste de thème wordpress gratuit… avec dans la liste le fameux Japibas que l’on voit sur wmj pour ceux qui connaissent 😛 … http://wp-themes-pro.com/theme-wordpress-gratuit-pour-votre-blog/

Comment traduire un thème wordpress

La plupart des thèmes que l’on trouve sont en anglais… comment les avoir en français ?

Certains thème sont bien fait, (comme tous les thèmes de Organic Themes) ils sont « internationnalisé », ils ont un système de traduction qui est mis en place. Il suffit d’ajouter des langues pour réussire à traduire le thème dans la langue locale. On parle de « localisation ».

Dans le dossier « languages » on trouve des étranges fichiers avec des extensions, .mo, .po ou .pot

Ce sont les fichiers de langues (sytème gettext). Si le thème est internationnalisé, il suffit de trouver le bon fichier de langue, peut être que quelqu’un l’a déjà fait et le publie quelque part sur le vaste web.

Ou si ce n’est pas fait, et que vous avez des talents de traduction, alors il faut reprendre les fichiers de langues et traduires les nombreuses chaines de caractère. (Ce n’est pas compliqué, mais parfois hors du contexte, on ne sais pas trop ce que la chaine de caractère veut dire..)

Cette traduction se fait  l’aide du logiciel Poedit.

Si le thème est mal fait. (ou pas encore bien fait) Les chaines de caractère des messages et de l’interface utilisateurs sont directement mis en dur dans le code.

Pour les traduire, il faut donc faire un long travail de recherche dans tous les fichiers .php pour retrouver les chaines de caractère et les traduires.

Pour en savoir plus, voici un article qui parle de la traduction de thème wordpress.

Comment traduire un thème wordpress avec l’extension codestyling-localization

Pour les gens qui ont peur de jouer avec des fichiers et/ou d’installer poedit (voir ci-dessus) il existe une alternative.

Il y a l’extension codestyling-localization qui est une application web qui fait le même boulot que poedit. Cette extension s’installe sur le site et permet de créer les fichiers .po sans avoir à savoir qu’ils existent !

De plus, il y a une petite aide à la traduction qui est faite avec une proposition de traduction par un moteur de traduction automatique.

Voici un article qui explique ceci dans le détail: http://wpformation.com/traduire-theme-wordpress-codestyling-poedit/

Repository git pour plugins et thèmes wordpress

Afin de pouvoir utiliser git comme système de « versioning » tout en ayant une version à jour des plugins wordpress, les plugins et thèmes ci-dessus ont été placé sur un repository git sur github et synchronisé chaque jour avec le repository svn officiel de wordpress. (grâce à git-svn)….. ne marche pas bien !

Un plugin pour afficher les infos sur les plugins…

https://wordpress.org/plugins/baw-papii-plugins-api-infos/

Comment désactiver la pleine hauteur sur le nouvel éditeur de wordpress 4.0

Après avoir installé wordpress 4, en éditant mes articles, je me suis dit que c’était bizarre… je dois beaucoup beaucoup descendre pour arriver aux champs qui sont en dessous de l’éditeur texte…. j’écris souvent des longs longs longs articles….. et il faut « scroller » beaucoup pour juste aller remplir mes infos SEO en dessous…..

Et là j’ai réalisé que WordPress 4 introduit une nouvelle fonction qui influence sur ce comportement. ça à voir avec le mode plein écran et sans distraction.

Pour le désactiver, et retrouver l’ascenseur que l’on avait auparavant, il suffit d’aller dans les options d’écran (tout en haut.. en scrollant bien longtemps après avoir été tout en bas de la page…)  et là dans le panneau des options il suffit de décocher l’option: Activer l’éditeur plein-écran et la fonctionnalité d’écriture sans distraction.

Voilà.

wordpress désactiver les ascenseurs du mode sans distraction wp 4.png

Bonne journée… 🙂

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px} li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} ul.ul1 {list-style-type: disc}

 

Formations en vidéo

Et de temps en temps, j’essaie de prendre le temps de créer une formation en vidéo sur mes découvertes qui peuvent aider les gens. Tu peux donc retrouver ma première vidéo de formation à propos du référencement (SEO) sur le site de mon entreprise…

Posts navigation

1 2 3 4 5 6 7
Scroll to top