plugin jQuery mLivre : un flipbook javascript
MLivre est un plugin sorti au début de l’été, transformant une suite d’images en un flipbook à la manière d’un magazine. L’utilisation est très simple : afficher une suite d’image de même taille dans un div puis lancer le plugin.
<img src="celestin/illustration2.jpg" alt="" width="650" height="325" />
<img src="celestin/illustration7.jpg" alt="" width="650" height="325" />
<img src="celestin/illustration10.jpg" alt="" width="650" height="325" />
<img src="celestin/illustration13.jpg" alt="" width="650" height="325" />
<img src="celestin/4couverture.jpg" alt="" width="650" height="325" /></div>
<script type="text/javascript">// <![CDATA[
$('#demo1').mLivre({ width:650, height:325 });
// ]]></script>
Des options, méthodes et événements pour personnaliser vos scripts
Les premières options sont obligatoires, width / height et parlent d’elles mêmes. dossier quant à lui permet de définir le chemin du dossier contenant quelques images nécessaires au bon fonctionnement du plugin afin de vous permettre de garder un minimum d’organisation dans votre ftp.
PageDefault permet de choisir la première page (ou image) qui doit être affichée, la première image est la numéro zéro
Loader active (ou désactive) le chargement des images avant l’affichage
Il reste comme dernière option over qui permet d’activer ou non l’animation au survole de la souris.
mLivre comporte également deux événements eventLoad appelés une fois que le livre est prêt à être affiché et eventOpen qui se lance à chaque changement de page !
Afin d’imaginer votre interface, les méthodes suivant et précédent permettent un changement de page et la méthode page vous permet, par exemple, d’ajouter une pagination !
Vous pouvez consulter des exemples dans la documentation sur http://www.le-pret-a-surfer.com/mLivre/
Vous souhaitez de nouvelle fonctionnalité ? n’hésitez pas à les proposer
Controler des projecteurs avec l’iphone et sunlite
Depuis que j’ai acheté une interface et la suite logiciel Sunlite, j’avais bien envie de pouvoir utiliser l’iphone pour prendre le contrôle de Sunlite à distance. Après quelques recherches voici une solution !
Pour réaliser la manipulation suivante, il faut avoir un ordinateur (PC ou MAC) et un Iphone connecté sur le même réseau wifi. Sur l’ordinateur est installé Sunlite version 1 ou 2.
L’application Iphone un « émulateur » de contrôleur MIDI
Les contrôleurs MIDI sont des surfaces de contrôle permettant d’envoyer des ordres en MIDI (protocole de communication) vers un instrument ou un ordinateur. Un contrôleur à une prise MIDI-OUT, mais voila notre Iphone n’en possède pas c’est pour ça que j’emploie le terme d’émulateur.
Mon choix c’est arrêté pour l’instant à l’application RemoteKBLE, un simple piano allant de 0 à 127 qui à l’avantage d’être gratuit et de fonctionner.
Télécharger l’application RemoteKBLE sur itunes
A savoir qu’il existe une version payante appelée RemoteKB à 1.59 €, cette version de l’application donne le droit d’appuyer sur plusieurs touches en même temps.
Mon utilisation étant de faciliter la phase de réglage dans une petite association de théâtre, la version simple de l’application me suffit !
Télécharger l’application RemoeKB sur itunes
Les logiciels pour récupérer les données MIDI via le WIFI
Avant de passer à la configuration de sunlite, il nous faut récupérer deux logiciels.
Le premier permet de recevoir les données de l’iphone, les développeurs de RemoteKB et RemobeKBLE utilisent DSWifiMIDI qui comme son nom l’indique, vous l’avez peut être fait deviner, permet d’envoyer les données MIDI, non seulement de l’iphone mais aussi de la nintendo DS vers l’ordinateur.
Vous trouverez le logiciel sur le site dsmidiwifi.tobw.net que vous pouvez télécharger, on verra après son utilisation.
Le deuxième logiciel permet de transférer ses données MIDI d’un logiciel à un autre c’est le rôle que rempli très bien LoopBe1 que vous pouvez trouver sur Clubic. A télécharger, installer et lancer !
Configuration et utilisation de SUNLITE via l’application Iphone
Après avoir lancé LoopBe1, puis l’application RemoteKBLE vous pouvez lancer SUNLITE et enfin DSWifiMIDI.
Première chose la fenêtre du logiciel DSWifi est composée de deux listes, chez moi je sélectionne dans les deux listes LoopBe Internal MIDI. Pour information si dans la seconde liste c’est microsft Internal MIDI qui est sélectionné et que vous pianotez sur l’application vous allez entendre une douce mélodie (enfin selon votre niveau au piano)
Sur SunLite version 1 : Je vous montre simplement l’exemple simple d’activer/désactiver un bouton switch préalablement crée. Allez dans la fenêtre paramètre du bouton, puis dans « l’onglet » déclenchement, vous cochez « Notes Midi » puis vous choisissez le circuit (appeler « Ch » ou « Channel » sur l’application le 0 correspondant au 1) et note (numéro de la touche sur le piano le 1 correspondant au 1 mais sunlite ne propose pas le 0)
Et sur sunLite 2 me direz-vous ? La fonctionnalité disparait pour laisser place à un mode console, à priori il faut créer une console virtuelle reprenant les boutons dont on a besoin pour l’iphone puis les assigner. Mais voila chez moi impossible de créer une nouvelle console. La solution ouvrir une console proposée par sunlite, clique droit sur un bouton, dans l’onglet live, édition ou général on choisi « l’action » et dans l’onglet midi on clique sur « auto setup MIDI » puis sur une touche du piano de l’iphone.
Bon courage !
Optimiser son blog wordpress pour le référencement
Voici un regroupement d’optimisations que j’ai réalisées sur un blog installé sous wordpress. Le but étant d’améliorer le référencement naturel, la vitesse d’affichage des pages et l’expérience utilisateur des visiteurs. J’ai reparti les optimisations en trois catégories les extensions, les configurations et les ajouts au thème.
Pour information le blog référent que j’ai mal mené est www.laure-illustrations.com le ptit blog d’une illustratrice jeunesse : Laure Phelipon. Avec une moyenne de 20 messages et 2500 visiteurs par mois, il est présent dans les premières places sur google pour la recherche « illustratrice »
Le choix des extensions wordpress (plugin)
J’ai essayé d’en limiter le nombre au maximum, en gardant uniquement celles qui ne pouvaient pas être mises en dure dans le thème, car les plugins c’est bien mais trop c’est trop.
Akismet, protection contre le spam dans les commentaires
(A-kiz-mit) n. Probablement la meilleure façon dans le monde pour vous protéger du spam web.
Voila comment se définit ce service, présent à l’installation de wordpress depuis pas mal de temps, il vous évitera une quantité de spams coté commentaire. Très utile, 300 spams évités en six mois sur mon blog référent, surtout que certains vicieux robots s’amusent à copier coller des commentaires (en rajoutant juste un lien qui va bien) pour tromper votre vigilance.
Facile à configurer, il suffit de demander une clef sur le site d’akismet et de la rentrer dans le menu extensions puis configuration akismet.
All in One SEO Pack : optimiser votre référencement (étape 1)
En terme de référencement parmi les choses qui comptent, il y a le titre de la page (balise title) et la méta description, elles doivent être unique pour chaque page et bien réfléchi.
Le titre doit comporter les principaux termes abordés dans le post et surtout il sera, sur les moteurs de recherche, la phrase d’accroche pour que vos futurs visiteurs viennent vous voir !
La description, de moins en moins apparente dans les moteurs, permet d’en dire un peu plus sur le contenu de l’article.
Dans les grandes lignes voila se que permet de renseigner All in One SEO pack.
Télécharger All in One SEO Pack
Google XML Sitemaps : Plan du site pour les robots et donc le référencement
Je n’ai pas trouvé (encore) de solution sans passer par un plugin pour avoir un sitemap complet de tous les billets et pages du site (catégorie, archive). Google XML sitemaps réalise ça très bien en proposant diverses options comme la possibilité de donner des « notes » d’importance à chaque page ou de rajouter des pages en dur manuellement. La page de configuration est simple mais néanmoins complète. N’hésitez pas à vous inscrire sur Google Webmaster pour voir comment Google digère votre sitemaps.
Télécharger Google XML Sitemaps
Subcribe to comments : Proposer un abonnement au commentaire à vos visiteurs
Un outil qui m’a semblé indispensable est de permettre au visiteur de suivre les commentaires, ça leur permet de suivre une conversation sur le sujet ou de ne pas louper la réponse à leur question. Sucribe to comments c’est donc donner une raison à vos visiteurs de revenir et leur proposer les outils pour le faire facilement. Subcribe to comments permet, en plus, à chaque visiteur de gérer ces abonnements.
Coté configuration, vous devez pour les blogs francophones, traduire les trois phrases utilisées par le plugin
Télécharger Subcribe to comments
WP – PageNavi : Ajouter une pagination avec blog
Le plugin ajoute en bas de la page d’accueil et des pages d’archives une pagination.
Je l’ai vraiment apprécié sur différent site : quand on arrive sur un nouveau blog, offrir la possibilité de pouvoir fouiner dans les précédents posts facilement, incite vos visiteurs à voir votre contenu et facilite la recherche de message récent.
Côté configuration quelques petits réglages bienvenus et une possibilité très bien vue de ne pas charger de CSS complémentaire.
WP Super Cache : Mettre en cache vos pages pour optimiser l’affichage
Un blog comme WordPress demande pas mal de calcul pour le serveur, avoir un bon cache permet un gain de temps au niveau de l’affichage et de faire souffler vos serveur. Grossomodo WP Super Cache sauvegarde une version html de chaque page. Sachant que google a annoncé utiliser le temps d’affichage d’une page dans son algorithme de recherche, le cache fait aussi parti de la démarche d’optimisation pour le référencement.
Yet Another Related Posts Plugin : Lier vos articles
Une règle pour un site web est de ne jamais amener votre visiteur devant un mur (une page qui ne propose pas d’aller voir autre chose) sinon vous perdez vos visiteurs. YARPP permet de palier au problème en vous économisant pas mal de temps. Il sélectionne d’autres articles sur le même sujet et les affiches à la suite de vos articles. Ainsi vos visiteurs qui viennent de lire le billet sur un sujet qui les intéressent pourrons continuer ça visite sur le même thème.
Le plugin est très complet : il permet de gérer les endroits où vous souhaitez afficher les liens, de modifier l’affichage et même de configurer l’algorithme de sélection d’article !
Configuration de wordpress
Des sous domaines pour améliorer la vitesse d’affichage
Une première configuration à apporter est la création de deux sous domaine, l’un hébergera vos médias, l’autre votre fichier css et JavaScript. Les navigateurs limitent le nombre de fichier qu’il télécharge en même temps par sous domaine/domaine. Diffuser vos sources en plusieurs sous domaine permettra au visiteur de charger en parallèle plusieurs contenus et donc un gain de temps (ultra conseillé par google).
La création et configuration d’un sous domaine se fait depuis le site de votre hébergeur.
Pour mon test j’ai fait pointer un sous domaine média vers le dossier wp-content/uploads/ en configurant WordPress pour utiliser cet url pour le fichier upload et un sous domaine source vers le dossier contenant mon css et le js.
Pour l’instant je n’ai pas trouvé la bonne parade pour que WordPress utilise la bonne url pour mes images, j’ai donc remplacé les urls avec une fonction maison dans mon fichier fonction.php (j’en parlerai plus tard)
Regrouper et compresser vos fichiers css et js
Dans les extensions que j’ai détaillées ci dessus, WP PageNavi ajoute son propre CSS mais une option permet de le désactiver, ce que je serai trop vous conseiller et de mettre le contenu de se css dans votre propre fichier.
En effet moins il y aura de fichier css mieux ça sera car le chargement d’un grand css est plus rapide que celui de quatre css.
L’optimisation maximum consiste aussi à compresser votre css, comprendre : utiliser un fichier css sans espace, sans retour à la ligne, en enlevant le dernier point virgule.
Bien sur avoir un fichier CSS comme ça serait complètement contre productif, il existe donc des scripts qui permettent de faire cette manipulation à votre place pour que vous gardiez vos css propre.
Pour cette étape je vous conseille l’article sur le site seebz.net qui vous propose deux très bons fichiers php (un pour le CSS et l’autre pour le JS) avec la possibilité de regrouper plusieurs fichiers directement.
Cela dit cette fonction ne fait pas de miracle, n’hésitez pas à optimiser avant vos css, je ne rentrerai pas dans les détails ici, juste un exemple #sideBar .box est plus lent que juste .boxSideBar
Il va de soit que ce que vient de dire pour le css marche pour le js, je n’ai personnellement pas utilisé l’équivalent pour compresser le JS, j’ai téléchargé les scripts externe en version compressés que j’ai mi bout à bout dans le même fichier en rajoutant mes appels maison à la fin.
Ajouter des fonctionnalités directement dans le thèmes (sans plugin)
Quelque base, je vous conseil d’utiliser un fichier loop.php pour votre thème. Le but est de regrouper tous les affichages d’articles dans un seul fichier php, je vous donne pour exemple mon fichier loop (cliquer pour voir le code).
Avoir une seule page qui affiche le billet en entier
Il y a deux avantages à ne pas afficher le contenu complet de vos billets sur la page d’accueil.
Le premier c’est que cela permet un suivi, vous allez pouvoir connaitre avec précision le nombre de personne qui ont regardé votre article.
Le second c’est le référencement : vous allez éviter de dupliquer votre contenu dans plusieurs pages de votre site ! Une duplication divisera d’autant votre efficacité.
Pour se faire je conseille l’utilisation de la balise more pour séparer l’accroche du contenu.
PS : penser à définir une belle url pour cette page, avec des mots importants pour votre référencement et qui ne soit pas forcement identique avec le titre, profitez-en pour utiliser des synonymes.
Afficher le poste avec un lien meilleur que « voir la suite »
En terme de référencement les liens on aussi une place très importante, le texte qui compose le lien vers votre page est censé la définir. On est alors d’accord que « voir » « suite » ne vas pas définir votre article. Pour se faire j’ai utilisé les informations complémentaire de WordPress, pas vraiment adapté pour cette utilisation elle reste quand même la façon la plus simple au moment de la rédaction.
Coté PHP cliquer pour voir la rustine
Améliorer l’affichage du contenu et les retours à la ligne
Après avoir essayé plein d’extensions dont aucune n’a su me satisfaire, j’ai décidé de faire ma propre version qui va réaliser de jolie balise p et uniquement aux endroits adéquate. Mais surtout qui me permet de contrôler l’affiche finale.
J’ai aussi rajouté la « balise » [BR] qui permet de forcer un retour à la ligne.
RSS avec feedburner pour suivre vos abonnements et en proposer par mail
Je vous conseille pour votre file RSS d’utiliser FeedBurner afin de pouvoir suivre le nombre de personne qui l’utilise. De plus se service de Google propose aussi de gérer un abonnement par mail à vos visiteurs en ajoutant juste un formulaire d’inscription dans le thème.
J’ai aussi choisi de ne pas distribuer mon post en entier dans le file RSS de mon site témoin car je l’ai inscrit sur pas mal de site qui utilise mon flux RSS (Facebook, Wikio …) se qui permet une visibilité accru mais qui à une tendance à dupliquer votre contenu est donc votre site perd en crédibilité par rapport au moteur de recherche et même à vous faire black lister de Google. Du coup j’ai rajouté une fonction au fichier fonction.php afin de mettre dans le fil rss uniquement le résumé de mon article avec deux lien, une vers la suite de l’article et l’autre vers l’accueil du blog.
Voir le code à mettre dans fonction.php
Facebook, Twitter mais avec un affichage temporisé en JavaScript
Élément presque incontournable les réseaux sociaux proposent tous leurs api magiques, permettant à leurs utilisateurs de facilement partager votre page avec leurs amis. Très utiles, mais à vous de bien étudier les réseaux indispensables pour votre blog et ceux qui ne le sont pas. Les quelques apis que j’ai essayées sont facilement intégrable en dur dans le thème mais en partant du principe qu’elles multiplient le nombre de fichier externe au site (js, css, img) j’ai réfléchi une façon de les afficher uniquement quand les utilisateurs les voient. Sur mon blog référent, l’accueil affiche une dizaine d’articles, grâce au code suivant Facebook se charge uniquement quand l’utilisateur arrive à sa hauteur.
Coté HTML dans la page loop, je génère uniquement l’url de Facebook.
Coté JavaScript, je lance l’affichage au moment voulu.
Yoxview pour afficher vos images en grand
Les lightbox sont devenus incontournable pour profiter des images en version « haute définition », parmi l’énorme catalogue d’application disponible mon choix c’est arrêté sur Yoxview avec une jolie finition. L’arrivée se fait avec un zoom qui part de la miniature, la transition entre plusieurs images se fait un jolie recadrage animé.
Coté Javascript, le code de lancement
Google annalytique
Très rapide à faire mais à ne pas oublier, à la fin de votre fichier JavaScript copier le code de google analytique pour avoir accès à vos statistiques détaillées, utile pour voir l’impacte des dizaines d’heures d’optimisations et des centaines d’heures de rédactions.
L’organisation HTML pour optimiser le référencement
La balise H1 dans chaque page est très important, l’erreur fréquente avec l’utilisation de WordPress est d’avoir le nom du blog toujours en h1 sur toutes les pages. Il vaut mieux garder cette mise en page uniquement pour la page d’accueil ! Les pages archives devraient avoir en h1 le nom de la catégorie, de la date, de l’auteur … le résultat des recherches devraient avoir les mots rechercher et la page article « le titre de l’article ».
Éviter en titre de la page d’accueil, « le blog de X » mais plutôt « le blog qui vous parle des derniers lettre de l’alphabé »
mSelect : Plugin Jquery pour réaliser des listes html personnalisées
Le plugin est passé en version 1.4.2
Le plugin et la documentation complète est disponible sur : http://www.le-pret-a-surfer.com/mSelect/
mSelect est un plugin qui permet de personnaliser totalement l’apparence d’une liste de formulaire (select). Se qui permet en css de personnaliser la boite, la flèche et chaque option. Le plugin mSelect permet aussi de faire une boite de sélection enrichie en html.
Utilisation sur un élément html : select
Coté html :
Coté javascript :
$('select').mSelect();
});
Utilisation sur une liste avec bouton radio
Coté html :
<li><input id="ok1" type="radio" name="liRadio" value="ok" /> <label for="ok1">Ok</label></li>
<li><input id="ok2" type="radio" name="liRadio" value="okStr" checked="checked" /> <label for="ok2">ok <strong>Ok strong</strong></label></li>
<li><input id="ok3" type="radio" name="liRadio" value="okEm" /> <label for="ok3">ok <em>Ok Em</em></label></li>
<li><input id="ok4" type="radio" name="liRadio" value="okCoul" /> <label for="ok4">Ok <span style="color: #900;">Couleur</span></label></li>
</ul>
Coté javascript :
$('#demo').mSelect();
});
Caractéristique du plugin
- L’élément select ou ul sera entièrement remplacé par la nouvelle interface
- L’attribut name de l’élément select ou input est conservé
- Les attributs value sont conservés, si ils n’existent pas ils sont crées avec le contenu texte de l’élément option ou label
- L’attribut id de l’élément select ou ul est conservé
- Les attributs class appliqués aux éléments option ou li sont conservés
- Si un élément a un attribut selected ou checked il est conservé
- Si fireBug est activé les erreurs sont affichées dans la console
- Développé avec jQuery 1.42, le plugin utilise des fonctions de la version 1.4
- Le script a été essayé sur quelques navigateurs :
- Navigateur compatible : FireFox 3.6, Internet Explorer 8, Google chrome 3, Safari 4, Safari iPhone …
- Navigateur incompatible : Aucun testé
Si vous avez la possibilité de tester le plugin sur d’autre navigateur ou d’autre version n’hésitez pas à nous faire part de vos résultats.
- Navigateur compatible : FireFox 3.6, Internet Explorer 8, Google chrome 3, Safari 4, Safari iPhone …
Personnalisation en CSS des listes formulaire
Class : mSelect
Le conteneur général de la liste, c’est un élément div en display inline-block.
Class : mSelected
Le conteneur de l’option sélectionne qui s’affiche toujours à l’intérieur de mSelect, c’est un élément div.
Class : mFleche
Element div permettant de personnalisé la flèche qui indique à l’utilisateur la possibilité de déployer la liste.
Class : mOption
Conteneur d’une option, ces éléments sont des div en position absolue avec le curseur main, les informations top et left sont renseignées à chaque ouverture de la liste
Options du plugin
defaut : Message par défaut (String)
Message par défaut quand aucune option n’est sélectionné.
Par défaut vide.
radioHide : Afficher les éléments radio (Boolean)
Si true affiche les éléments radio dans les options, false pour cacher
Par défaut : false
eventClick : événement au click (Function(value,html))
Fonction lancer au clique sur une une option.
This : élément div qui à recu le click
Value : Valeur de l’option sélectionne
Html : Html de l’option séléctionné
Par défaut : null
$('#demo').mSelect({
eventClick:function(value,html) {
alert(value); // retourne la valeur de l'option sur le quel le visiteur à cliqué. Exemple : "okStr"
alert(this); // retourne l'objet div sur le quel l'utilisateur à cliqué
alert(html); // retourne le html (String) de l'option sur la quel le visiteur à cliqué. Exemple : "ok <strong>Ok strong</strong>"
}
});
});
eventOpen : événement à l’ouverture (Function(value,html))
Fonction lancer à l’ouverture de la liste.
- This : élément div principale
- Value : Valeur de l’option sélectionne
- Html : Html de l’option sélectionné
Par défaut : null
eventClose : événement à la fermeture (Function(value,html)
Fonction lancer à la fermeture de la liste, même si il n’y pas de changer de valeur.
- This : élément div principale.
- Value : Valeur de l’option sélectionne
- Html : Html de l’option sélectionné
Par défaut : null
Essayer et télécharger le plugin
Demo
Télécharger : Version de production et version de développement
Change Log
Version 1.1 : 15 avril 2010
- Ajout des options : eventClick, eventOpen, eventClose
- Correction mineur
Version 1.0 : 4 avril 2010
