Récemment un de mes clients à voulu que je donne un effet de trainée derrière le curseur sur son site web. Pour cet effet de trainée derrière le curseur, on commence par inclure jQuery :

[sourcecode language= »html »]<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
[/sourcecode]

On va ensuite créer un fichier que l’on appellera trainee.js et qu’on inclue dans notre page web :

[sourcecode language= »html »]<script src="js/trainee.js" type="text/javascript"></script>[/sourcecode]

Pour le contenu de notre script de trainée derrière le curseur on va récupérer les coordonnées de la souris et faire apparaitre, au mouvement de la souris, une image puis la faire disparaitre progressivement ce qui donnera un effet de longue traine :

[sourcecode language= »js »]
$(document).ready(function() {
$(document).mousemove(function(e) {
//Notre image
image = $(‘image.png’).attr({‘src’:’trainee.png’});
//on la fait apparaitre
$(document.body).append(image);
//puis on l’affiche à l’évènement & disparition
image.css({ ‘position’:’absolute’,
top: e.pageY +2 ,
left: e.pageX +2
}).fadeOut(700);
});
});
[/sourcecode]

Voici une démo de ce petit script sur le site d’hypernuit désign.

Sachez aussi que vous pouvez très simplement modifier l’apparence de votre curseur avec CSS:

[sourcecode language= »css »]
cursor: url(‘./images/cursor.png’), default;
[/sourcecode]

Très récemment, Apple a mi à disposition un outil permettant aux webmasters/développeurs d’applications iOS de mettre en avant leur travail. En effet, en ajoutant simplement une balise meta dans le header d’une page web, on peut mettre en place ce que l’on appelle une Smart App banner.

Imaginons par exemple, que vous ayez développé une application iOS et qu’une page Internet est destinée à présenter et à promouvoir cette application. Grâce aux Smart App banners, vos visiteurs utilisant Safari (Version iOs 6+ uniquement) auront la possibilité de la télécharger directement (sur l’App Store), un lien et la note de une à cinq étoiles attribuée à l’app.

1. Exemple de Smart App banner sur blog.jardinchic.com

Le blog de jardinChic, par exemple, possède sa propre application native, si vous le visitez avec votre iPhone sous iOS 6 en utilisant Safari voci ce que vous verrez désormais:

Comme vous le voyez, une bannière vient s’ajouter au dessus du site et vous propose d’y accéder afin de promouvoir votre application grâce aux smart app banners.

2. Comment ça marche une Smart App banner ?

C’est très simple, comme je le mentionnais plus haut, il suffit de placer une balise meta spécifique de la forme:

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

où, vous l’aurez compris myAppStoreID correspond à l’id de votre application iOs que vous pouvez trouver en allant sur la page web suivante : https://linkmaker.itunes.apple.com/fr-fr

myAffiliateData (optionnel) lien d’affiliation si vous faites partie du programme.

myUrl (optionnel) une url de référence qui, si l’utilisation possède l’app sur son Device peut l’emmener vers une page spécifique.

3. Exemple de la balise meta pour l’application jardinchic blog

L’url de la page de l’App Store de l’application est de cette forme:

itunes.apple.com/us/app/jardin-chic-actualites-du/id531155985?l=fr&ls=1&mt=8

La balise meta à insérer est donc :

<meta name="apple-itunes-app" content="app-id=531155985">

Pour plus d’informations n’hésitez pas à consulter la page offcielle d’Apple à propos des smart app banner.

J’espère que cela pourra être utile;

See you.

Pour utiliser le système de commentaires de Facebook, vous avez le choix. Vous pouvez utiliser le système d’iFrame que propose Facebook cependant si vous vous intéréssez un peu au référencement naturel vous savez sans doutes que le contenu d’une Frame n’est pas indexé par les moteurs de recherche (ce qui parait logique puisque le contenu n’est pas sur votre site…).

Pour répondre à cette probélmatique, je vous propose d’utiliser Open Graph pour récupérer les commentaires associés à une url (corespondant à l’url de l’un de vos article par exemple).

Open Graph

Pour utiliser Open Graph, il vous faut utiliser cette url :

https://graph.facebook.com/comments/?ids=URL_DE_VOTRE_ARTICLE

par exemple, pour l’un de mes articles:

https://graph.facebook.com/comments/?ids=https://matthieufleitz.fr/site/article/surpasser-la-peur-de-l-echec

Si vous rentrez cette url dans votre navigateur, vous allez vous retrouvez avec une page en json avec la liste des commentaires de l’url de mon article.

Explications:

On récupère le contenu JSON avec file_get_contents(), on le décode avec json_decode(). précision: j’utilise current_url() pour préciser l’url de la page en question qui est une fonction native de Code Igniter. Sachez que si vous n’utilisez pas de Framework PHP vous pouvez utiliser: $_SERVER[‘SERVER_PROTOCOL’];

On utilise ensuite deux foreachs pour afficher chaque commentaire et on affiche le tout en html en faisant un lien vers le profil Facebook de l’auteur.

Conclusion:

On a donc nos commentaires Facebook directement dans la page. Leur contenu sera indexé par Google et votre referencement sera boosté par vos lecteurs. N’oubliez pas d’utiliser un système de cache pour limiter les appels à Open Graph. See you!

Si vous vous intéréssez un peu à l’actualité du Web et plus particulièrement à celle des réseaux sociaux, vous avez du entendre parler de Klout. Si ce n’est pas le cas et bien c’est très simple. Klout est un service qui se propose d’analyser votre influence sur les réseaux sociaux et vous attribue un score allant de 1 à 100 pour mesurer votre notoriété. Je vais donc vous expliquer comment afficher facilement votre score Klout sur votre blog.

Pourquoi ?

Les réseaux sociaux prennent de plus en plus d’importance dans nos vies. Que cela soit pour le business ou pour garder le contact avec vos amis, tout le monde essaye par le biais de ces canaux de communication d’être le plus influant possible.

La mesure de la e-reputation devient alors un enjeu puisqu’elle permet de facilement reconnaitre la qualité d’un intervenant ou non. Cette mesure s’inscrit dans la même lignée que les mesures d’audience à la télévision. Juger de la crédibilité d’une chaîne, de son contenu et de l’influence qu’elle va avoir peut impacter le business de cette dernière. Par exemple, plus celle-ci est influente, plus l’audience est bonne et plus la minute de publicité entre les programmes se vendra chère.

Le principe de Klout est donc simple: mesurer la qualité et non la quantité de vos publications sur Facebook, Twitter etc…

Sachez par exemple qu’aux Etats-Unis, certaines soirées sont reservées aux utilisateurs influents de Klout ayant un score minimum :). On peut légitimement penser que dans l’avenir, de nombreuses utilisations pourraient être faites de ce score au fur et à mesure que sa reconnaissance sera grande et  que l’algorithme de calcul du score, précis.

Je pense notamment à une question de référencement. Dans son Podcast sur le SEO, Laurent Bourrelly introduisait le fait que Google prenait de plus en plus en compte les résultats du nombre de « like », « RT » ou « +1 » pour son référecement. La question qui se pose est donc la suivante: Sur un site web qui parle de Formule 1, mieux vaut-il avoir un like de Michael Schumacher ou 3000 likes d’anonymes voir, 10 000 likes de robots achetés sur des services spécialisés ?

L’introduction d’un système de calcul de l’influence comme Klout pourrait ainsi jouer un rôle intéréssant dans la corrélation Moteurs de recherche/Réseaux sociaux… D’où l’importance de s’intérésser à cet outil d’e-reputation. Sachez par exemple que Microsoft vient d’investir dans le service et intégrera bientôt les résultats d’influence dans son moteur de recherche, Bing.

Un widget pour WordPress

N’ayant pas trouvé de widget pour WordPress permettant d’inclure ce score (hormis un widget utilisant une iframe…), j’ai décidé de développer le mien et je le partage avec vous pour afficher facilement votre score klout sur votre blog wordpress.

Le plugin est donc téléchargeable ici ou sur la repo wordpress.
Il utilise l’API V2 de Klout et est Open Source. Libre à vous de modifier le code source qui est très simple. Pensez seulement à faire référence à mon travail dans votre développement.

Votre score apparaitra ensuite dans votre sidebar de façon élégante et claire. Il sera aussi un lien vers votre profil Klout.

Installation

1. Téléchargement et installation:

Il vous suffit de télécharger l’archive via le lien ci-dessus et de dézipper son contenu (le dossier kscore)  dans votre dossier wordpress/wp-content/plugins/

Rendez-vous ensuite dans votre espace d’administration WordPress, rubrique extension. Le widget devrait maintenant apparaitre et il vous suffit de cliquer sur activer pour activer l’extension:

2. Activation:

Toujours dans votre espace d’administration, cliquez sur Apparence puis Widgets. Glissez/déposez le widget dans la barre des widgets à droite à l’endroit pù vous voulez que ce dernier apparaisse.

3. Configuration du plugin:

Comme vous pouvez le voir la configuration du plugin est minimaliste et très simple.

Widget Title:

Le titre qui apparaitra dans votre sidebar. Par exemple : « Mon score Klout ».

Klout API partner key v2: 

Pour effectuer une requête sur l’API V2 de Klout il vous faut utiliser une clé. Par défaut, vous pouvez laisser la mienne. Sachez que vous pouvez obenir la votre en suivant ce lien.

Klout username:

Le nom d’utilisateur de la personne ou de la marque dont vous voulez afficher le score klout. Pour information, ce nom d’utilisateur se situe dans l’adresse url quand vous vous rendez-sur votre dashboard Klout du style:

http://klout.com/#/VOTRE_USERNAME

http://klout.com/#/claymm pour mon pote claymm par exemple

ou encore http://klout.com/#/MatthieuFleitz moi-même, MatthieuFleitz

ps: je n’ai pas trop de temps pour beta tester le plugin donc si vous avez la moindre remarque, je suis preneur. Bon Klout.

Matthieu

10 applications pour enrichir Google Chrome

1. 365Scores Notifier

Une extension pratique si vous suivez l’actualité du soccer. Il vous suffit de renseigner le nom de votre équipe dans les options et à l’avenir vous serez notifier à chaque évènements de cette dernière. Vous y retrouverez aussi son actualité et les vidéos de ses buts.

à télécharger ici

2. Adblock

Extension très connue et développée par Mickael, elle permet de bloquer les contenus publicitaires sur de très nombreux sites. utilisée par plus de 9 millions d’utilisateurs (source wikipedia) Votre navigation n’en sera que plus fluide. Pour information, sachez qu’elle bloque aussi la pub dans les applications de streaming et les streams du style twitch, justin.tv etc… :).

à télécharger ici

3. Lorem Ipsum Generator

Application utile si vous faites un peu de développement, loream ipsum generator est comme son nom l’indique un générator du fameux texte latin. Utile pour tester les formulaires de vos applications.

à télécharger ici

4. Awesome ScreenShot : Capture & Annotate

Excellente application permettant de faire des screenshots de vos pages web. L’application permet de générer une image d’une partie ou de la totalité de la page. Plus fort encore, elle vous permet d’ajouter des annotations sur l’image avant de l’enregistrer. Bref, une application qui m’est très utile pour les rendu de mes applications web.

à télécharger ici

5. PageSpeed Insight

Si vous êtes développeur web, la vitesse d’affichage de vos sites web est un sujet que vous ne devez pas prendre à la légère. PageSpeed permet d’auditer l’optimisation de vos pages web en prenant compte de très nombreux paramètres et en vous proposant des pistes pour les améliorer.

à télécharger ici

6. Team Liquid Stream

Extension obligatoire pour les fans de starcraft 2. Elle affiche la liste de tous les stream online repertoriés sur Team Liquid. Vous pouvez ajouter en favoris votre joueur préféré et l’extension vous envoie une notification quand ce dernier est en ligne. Sympa !

à télécharger ici

7. goo.gl url Shortener

Comme son nom l’indique, goo.gl url Shortener est un raccourci vers le minimiseur d’url de goo.gl. Il raccourci pour vous l’url de l’onglet courant et l’ajoute à votre presse papier. Très utile si comme moi vous tweeter de temps en temps et que votre nombre de caractères est limité.

à télécharger ici

8. Download on my Freebox

Download on my Freebox permet de gérer la seedbox de votre Freebox révolution V6. Si vous naviguez sur votre tracker de torrents préféré ou si vous souhaitez télécharger un fichier depuis un site web avec la seedbox de votre Freebox un simple clique droit puis « télécharger sur ma freebox » et le fichier/torrent sera ajouté automatiquement. L’application vous notifie aussi lorsqu’un téléchargement est terminé.

à télécharger ici

9. Web Developper

Une extension très pratique pour les développeurs de sites web. Elle permet tout un tas d’options, activer désactiver javascript, les CSS, les cookies, des options concernant les formulaires, les images et bien d’autres…

à télécharger ici

10. SupMark

Pour mes anciens camardes de SUPINFO, SupMark permet de reste au courant de ses notes. Dès qu’une note vous est attribuée sur Campus Booster, vous êtes notifié. Vous pouvez ainsi avoir un aperçu du nombre de crédits ECTS qu’il vous manque pour valider votre année.

à télécharger ici

Comme vous le savez surement, un e-commerçant (comme tout commerçant d’ailleurs) doit garder une copie papier de chaque pièce comptable que génère son store. Magento, le célèbre framework e-commerce propse bien évidemment, une fois qu’une transaction est terminée, d’éditer une facture et de générer un pdf.

Ce document éléctronique reprend les éléments essentiels d’une facture à savoir l’adresse de facturation du client, l’adresse de livraison, le numéro de la facture, la date de facturation et le détail des achats réalisés.

Cependant il manque l’adresse email du client. Bon vous me direz c’est pas très grave, mais l’email étant la première source de contact avec les clients d’un site e-commerce, il est toujours bon que ce dernier soit renseigné! En tout cas, moi, au boulot, ça à l’air de pas mal arranger les filles du market et de l’admin d’avoir l’e-mail.

nb: Ce tuto est réalisé avec la version 1.7 de Magento. Notez aussi que Magento utilise la fonction de génération de pdf de Zend pour générer les factures en pdf.

Bref, pour rajouter l’email du client il vous faut surcharger ce fichier app/code/core/Mage/Sales/Model/Order/Pdf/Abstratct.php (ne modifiez pas, directement le coeur de Magento sous peine de rencontrer des difficultés lors de vos futures migration/évolution du CMS).

Juste après :

[php]

if ($putOrderId) {
$page->drawText(
Mage::helper(‘sales’)->__(‘Order # ‘) . $order->getRealOrderId(), 35, ($top -= 30), ‘UTF-8’
);
}
$page->drawText(
Mage::helper(‘sales’)->__(‘Order Date: ‘) . Mage::helper(‘core’)->formatDate(
$order->getCreatedAtStoreDate(), ‘medium’, false
),
35,
($top -= 15),
‘UTF-8’
);

[/php]

Il nous faut rajouter :

[php]
// Ajout des email client
$page->drawText(
Mage::helper(‘sales’)->__(‘Customer Email’) . ‘: ‘ . $order->getCustomerEmail(), 35, ($top -= 15), ‘UTF-8’
);
[/php]

Il faut ensuite agrandir la taille du header et modifiant un peu plus haut dans le fichier abstract :

[php]

$page->setFillColor(new Zend_Pdf_Color_GrayScale(0.45));
$page->setLineColor(new Zend_Pdf_Color_GrayScale(0.45));
$page->drawRectangle(25, $top, 570, $top – 75);
$page->setFillColor(new Zend_Pdf_Color_GrayScale(1));
$this->setDocHeaderCoordinates(array(25, $top, 570, $top – 75));
$this->_setFontRegular($page, 10);

[/php]

Le header est désormais d’une hauteur plus importante et l’adresse email de votre client apparait.