Modifier l’apparence de vos balises title avec tooltipsy

Aujourd’hui, on change un peu de sujet pour se concentrer sur un élément qui peut sembler être un détail mais qui peut vraiment apporter un plus à votre site : la modification « visuelle » de vos balises title sur vos sites web. Pour cela, nous devrons passer par un petit script jQuery que nous n’écrirons pas. Je vais simplement vous montrer comment l’utiliser, il s’agit de Tooltipsy.

Déjà, pour information, Tooltipsy est disponible sur ce site. Nous allons ensemble voir comment l’installer, l’appeler dans nos balises, et enfin comment y ajouter des options et modifier son style.

Si vous voulez des exemples d’utilisation, vous en avez sur les icônes sociales et RSS en haut à gauche voire même directement en allant sur le site de Tooltipsy.

Prêts ? Alors on y va !

Première chose, télécharger Tooltipsy, ça peut être utile. Si vous ne l’avez pas encore récupéré, il est disponible sur Github à cette adresse.

Ce que nous allons faire tout au long de ce petit tutoriel, c’est utiliser Tooltipsy dans une page html plus que basique : voila le code de base.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Essais tooltipsy</title>
    <link rel="stylesheet" href="style.css" />
    <!-- On importe jQuery depuis les serveurs de google -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!-- On importe notre script -->
    <script src="tooltipsy.min.js"></script>
  </head>
  <body>
    <p>Cliquez sur <a href="#" title="Ho, un lien ;-)">ce lien</a></p>
  </body>
</html>

Actuellement, le résultat de cette page devrait être relativement basique… Je ne pense pas qu’il y ait besoin de faire de capture d’écran cette fois-ci, vous voyez comment s’affiche le title par défaut normalement. Le résultat peut différer légèrement suivant votre navigateur et/ou votre système d’exploitation. Mais bon, on s’en fiche puisque nous allons redéfinir tout ça ! Et croyez-moi, ça sera la même chose partout pour le coup.

Bon, Tooltipsy, comment ça marche ? Première chose, appeler la fonction sur notre lien. Tout ce que nous allons faire, c’est donc ajouter une class à notre élément lien et appeler cette fonction dans un petit script à coté.

<p>Cliquez sur <a href="#" class="hastip" title="Ho, un lien ;-)">ce lien</a></p>
<script>$('.hastip').tooltipsy();</script>

Ouep, c’est tout ! Actualisez et là, vous devriez voir un léger changement (normalement). Votre title devrait apparaitre avec un léger fade-in au passage de la souris et s’afficher… en haut sans aucun style. Autant dire que jusque-là, l’intérêt de Tooltipsy est assez faible. Cela devient intéressant à partir du moment ou l’on peut commencer à styliser un peu cette balise title, chose qui, je le rappelle, est impossible en css puisque c’est le navigateur qui se charge lui même de l’affichage de cet attribut html.

Pour styliser notre élément, nous avons deux possibilités :
La première ? Passer par du css et personnaliser l’attribut .tooltipsy. Faisons le test et mettons y quelques lignes :

.tooltipsy {
    padding: 10px;
    max-width: 600px;
    color: #FFF;
    font-size: 12px;
    background-color: #464B56;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    text-shadow: none;
}

Et hop, le résultat (oui je sais, ça ressemble à ce qu’il y a sur ce site dans les icônes à gauche, j’ai repris le même code visuel.
La deuxième façon de faire, c’est de passer par du code javascript, voyez plutôt :

  $(document).ready(function(){
    $('.hastip').tooltipsy({
      css: {
          'padding': '10px',
          'max-width': '600px',
          'color': '#FFF',
          'font-size': '12px',
          'background-color': '#464B56',
          '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          'text-shadow': 'none'
      }
    });
  });

Et voila ! Actualisez, vous devriez voir le résultat directement, et logiquement il devrait-être identique que précédemment.

Bon, ça serait assez malheureux si j’avais écrit un papier uniquement pour vous présenter ça… Là, nous n’avons vu qu’une petite base qui reste assez sympathique mais qui est assez limitée… Passons donc à la vitesse supérieure avec la possibilité de positionner votre balise title ! Par défaut, comme vous le voyez, elle vient se mettre juste au dessus du texte, un peu gênant non ? Nous allons donc ajouter une petite propriété à notre code Javascript :

  $(document).ready(function(){
    $('.hastip').tooltipsy({
      offset: [0, 10],
      css: {
          'padding': '10px',
          'max-width': '600px',
          'color': '#FFF',
          'font-size': '12px',
          'background-color': '#464B56',
          '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          'text-shadow': 'none'
      }
    });
  });

Ce paramètre (offset) va donc nous permettre de positionner notre champ avec deux valeurs numériques : left et top. Une valeur positive décalera notre bloc vers le bas/à droite, et des valeurs négatives permettront de le remonter/décaler vers la gauche. Enfantin non ? Avec ça, vous avez déjà je pense une bonne base pour faire des choses assez sympathiques.

Bien entendu, si ça s’arrêtait là, ce serait assez limité, sachez que si vous voulez passer des fonctions en paramètres c’est possible ! Notamment si vous voulez ajouter des effets visuels sur l’affichage de votre élément. L’intérêt n’était pas ici de vous montrer toutes les possibilités de l’outil, mais vous avez de quoi faire des choses sympathiques déjà. Ce que je peux vous conseiller si vous souhaitez approfondir, c’est d’aller directement sur le site voir les exemples disponibles. Après, c’est à vous de faire jouer votre imagination pour arriver à faire des choses sympathiques (évitez quand même d’en faire trop, c’est juste un outil).

Voila, j’espère vous avoir convaincu de l’intérêt de cette fonction très sympathique !


Télécharger les sources du tutoriel (4Ko)

Carbon, un client Twitter pour Android

Bonjour tout le monde ! Aujourd’hui, c’est jeudi et histoire d’être plus tranquille, je tenais à faire un petit article plus détendu dans lequel je vais vous parler d’une découverte que je ne regrette pas. Si vous êtes un adepte de Twitter, je pense que cela peut vous intéresser. Son nom est Carbon.

La première chose qui frappe lorsque l’on ouvre l’application, c’est que de client Twitter elle n’a que le nom. L’apparence a été complètement revue est est complètement sombre. Et ce n’est vraiment pas un mal je trouve. Ça lui apporte une touche d’élégance vraiment sympathique, d’ailleurs, il vous suffit de regarder ci-dessous pour voir à quoi ressemble l’application avec votre timeline ouverte. Chose que vous pourrez noter, l’application affichez directement les fichiers médias dans l’application si ceux-ci sont des contenus ajoutés directement depuis Twitter.

Au niveau de l’application, le principal se retrouve divisé en 3 fenêtres que vous pouvez faire défiler de gauche à droite : c’est assez classique sur la plupart des clients Twitter avec une fenêtre réservée à votre timeline, une deuxième à vos mentions et une dernière consacrée à vos messages privés. Lorsque vous vous déplacez d’une fenêtre à l’autre, un petit bandeau en haut de l’écran apparait pour vous permettre de passer sur n’importe lequel des trois onglets (ou fenêtres, juste une question de nomenclature dans cet article). A noter un quatrième panneau qui s’affiche si vous balayez vers la gauche quand vous êtes sur le premier onglet qui vous permet de switcher de compte Twitter. Du coup, cela vous donne un accès complet et rapide à toutes les choses les plus importantes de l’application et de ce que vous devez faire avec un client Twitter. Notez quand même que vous n’avez pas accès à l’onglet découvrir que vous aviez sur le client officiel, mais bon, personnellement je ne lui ai jamais trouvé d’intérêt… A voir en fonction de votre utilisation du coup.

Derrière, comme sur n’importe client (fort heureusement), vous avez bien évidemment la possibilité d’écrire un tweet avec un compteur de caractères. L’interface reste simple et vous permettra de choisir avec quel compte envoyer votre message. Par contre impossible d’envoyer un message depuis plusieurs comptes en même temps comme le proposent d’autres clients.

Il parait quand même utile de noter la présence de pas mal de petites fonctionnalités lorsque vous naviguez sur votre timeline. Vous avez en bas à droite un petit bouton de menu qui va vous permettre pas mal de choses : accès à vos tweets favoris, à vos listes, au trending topics de votre pays et du monde entier (assez rare sur les clients mobiles), un champ de recherche personnalisée avec bien entendu toutes les recherches que vous avez sauvegardées déjà disponibles ainsi qu’un bouton vous permettant l’accès aux paramètres de l’application, paramètres qui malheureusement se retrouvent assez peu nombreux… On aurait par exemple aimé pouvoir choisir l’intervalle de temps entre chaque « rafraichissement » automatique qui est réglé sur 15 minutes. Après rien ne vous empêche de rafraichir vous-même en faisant glisser votre timeline vers le bas pour actualiser mais bon, c’est dommage. Notez également la présence de filtres pour votre timeline. Un outil assez complet qui vous propose trois types de filtrage : par utilisateur, par mots dièses ou encore directement par mot ou expression dans le corps du/des tweet(s). Bref, c’est bien foutu de ce coté-là.

Avant de terminer, il faut quand même noter un accès à votre profil et une simplicité au niveau de l’édition. Vous avez également accès à vos statistiques (nombre de tweets, nombre de followers etc.) ainsi qu’à vos listes que vous pouvez lire directement d’ici. C’est visuellement original et très bien foutu, donc il fallait le mentionner.

Conclusion
Comme vous l’aurez compris, ce client Twitter ne révolutionne rien en terme de contenu, il regroupe les fonctionnalités de base d’un client Twitter ainsi que quelques petits ajouts que vous ne trouverez pas sur le client officiel (bien dommage d’ailleurs), mais n’est pas autant pourvu que certains clients plus poussés comme Plume par exemple. En revanche, là où ce client se démarque plutôt bien, c’est en terme de design. On peut dire que de ce coté là, il remporte le combat entre tous les clients Android haut là main. Vous voulez un autre avantage ? Simple… cette application est disponible gratuitement sur le Play Store et ce sans aucune publicité. La raison est toute simple, aux émirats, il n’est pas possible de proposer des applications payantes. Finalement, nous ça ne nous dérange pas vraiment et l’on peut profiter d’une application d’une excellente qualité.

Après, il reste à faire un choix entre application aux fonctionnalités avancées ou application visuellement très intéressante et qui donne envie. Personnellement j’ai fait le mien puisque je n’ai pas besoin d’avoir de choses vraiment complexes malgré le fait que j’ai à gérer plusieurs comptes et de ce coté-là, aucun souci à relever.

Finalement, pour moi c’est une réussite, mais possible que ça ne convienne pas à tout le monde.

Afficher ses tweets sur son site WordPress (sans plugin)

Un jour, il faudra que je pense à renommer ce blog « utiliser WordPress sans plugin »… Parce que sur 5 articles publiés, 4 sont quand même franchement orientés… Mais bon, le sujet me plait toujours et je sais que ça peut-être sympa à partager si j’ai quelques petits trucs maisons qui tournent bien (très bien) sans avoir à faire ramer un blog et surcharger vos pages.

Bon, du coup, ce soir on va s’intéresser à l’affichage de votre timeline Twitter sans avoir à utiliser aucun plugin, ouep, c’est faisable ! J’ai galéré sur certains points, mais c’est vraiment faisable. Vous voulez une preuve ? C’est en bas de page !

Le plus grand avantage de cette manière de pratiquer, c’est que vous ne vous embêtez pas forcément à devoir utiliser l’api Twitter directe et ne pas pouvoir personnaliser la grosse boite vraiment comme vous le voulez. A noter quand même que la « box » officielle n’est quand même pas dégeu et peut convenir à pas mal de sites. La preuve sur le site de la traversée du Stick (un site d’un copain parlant de jeu vidéo ; un peu de promo ne fait pas de mal).

Ce que nous allons voir du coup, c’est comment reproduire ce que vous voyez actuellement en bas de ce site. Pour ceux qui ne veulent pas descendre, ça ressemble à ça :

Aperçu

(bon, oui, le contenu, on s’en fiche, c’est juste pour l’aperçu…)

Maintenant, la grande question est : « mais comment qu’on fait ça ? ». Et bien comme d’habitude, je vais vous répondre que c’est pas vraiment compliqué. Hop, on démarre ! La première partie va consister à appeler la fonction que nous créerons ensuite. On ne suit pas l’ordre logique des choses mais pour une seule fonction, ce n’est pas un problème. Ouvrez donc le fichier de votre thème WordPress qui vous intéresse et insérez-y la ligne suivante :

<?php echoTwitter('bardylette', 3); ?>

Ensuite, c’est parti, on commence à coder dans le fichier functions.php de notre thème.

function echoTwitter($username, $numb){
  include_once(ABSPATH.WPINC.'/rss.php');
  setlocale(LC_TIME, 'fr', 'fr_FR', 'french', 'fra', 'fra_FRA', 'fr_FR.ISO_8859-1', 'fra_FRA.ISO_8859-1', 'fr_FR.utf8', 'fr_FR.utf-8', 'fra_FRA.utf8', 'fra_FRA.utf-8');
  $tweet = fetch_rss("http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=" . $numb );
  for($i = 0; $i < $numb; $i++){
    $date = html_entity_decode($tweet->items[$i]['published']);
    $date = explode("T", $date);
    $jour = strftime("%A %e %B %Y", strtotime($date[0]));
    echo "<p class='tweet'><i>@<a href='http://twitter.com/bardylette'>Bardylette </a><span>le " . $jour . " :</span></i><br>" . html_entity_decode( $tweet->items[$i]['atom_content'] )  . "</p>";
  }
}

Héé, partez pas ! J’ai dit que c’était simple, et je vous jure que ça l’est… Le plus compliqué, c’est sans doute le tout début. On va analyser ça ligne par ligne, vous allez comprendre.

Déjà, on créé une fonction (appelons là echoTwitter). C’est une fonction à laquelle on passera deux paramètres. Le premier sera l’utilisateur twitter. Celui que vous pouvez afficher si vous tentez d’accéder à l’adresse http://twitter.com/utilisateur. Le deuxième paramètre, c’est le nombre de tweets que vous voudrez récupérer. J’ai tablé ici sur 3 pour refaire ce que j’ai fait sur mon propre site. A vous d’adapter bien entendu. Jusque là vous suivez ?

Les deux lignes suivantes sont les plus complexes quoi que pas véritablement… La première indique que l’on a besoin d’un fichier inclus dans notre dossier WordPress wp-includes. Nous aurons besoin pour la suite du tutoriel (d’ici deux trois lignes) d’une fonction très utile vous allez voir.

La ligne suivante, pour rappel celle-ci :

setlocale(LC_TIME, 'fr', 'fr_FR', 'french', 'fra', 'fra_FRA', 'fr_FR.ISO_8859-1', 'fra_FRA.ISO_8859-1', 'fr_FR.utf8', 'fr_FR.utf-8', 'fra_FRA.utf8', 'fra_FRA.utf-8');

Cette fonction setlocale va être en fait ce qui va nous permettre de faire comprendre que nous voulons afficher la date en français. Par défaut, elle est configurée en anglais. Ici, je donne énormément de « normes » françaises parce que tous les serveurs, distributions linux, unix, mac OS et versions de Windows ne possèdent pas la langue française intitulée de la même façon. Je sais pas si j’arrive à être assez clair (?). Avec cette fonction, vous allez pouvoir jouer avec la date, l’heure, la monnaie, les chaines de caractères et bien d’autres paramètres inutiles à lister ici. Si vous voulez en savoir plus, le mieux est encore de vous donner un lien vers la documentation officielle.

Concernant la ligne suivante, nous allons faire simple. Lorsque vous publiez un tweet, celui-ci est « enregistré » dans un grand arbre xml. Notre objectif à nous va être de parcourir cet arbre pour en récupérer 3 itérations. Nous voulons en effet récupérer nos trois derniers tweets. Le grand avantage, c’est qu’en cherchant (pas longtemps), on finit par très vite trouver ce que l’on veut. Par exemple, si je veux récupérer mes trois derniers tweets, je devrais posséder l’url suivante :
http://search.twitter.com/search.atom?q=from:bardylette&rpp=3
Rien de complexe, si ? L’avantage étant qu’ici, nous rendons tout cela un peu plus dynamique en offrant la possibilité de spécifier directement l’utilisateur et le nombre de tweets à récupérer dans les paramètres de notre fonction.

La suite, c’est une simple boucle qui va parcourir le nombre de tweets souhaités :

  for($i = 0; $i < $numb; $i++){
    $date = html_entity_decode($tweet->items[$i]['published']);
    $date = explode("T", $date);
    $jour = strftime("%A %e %B %Y", strtotime($date[0]));
    echo "<p class='tweet'><i>@<a href='http://twitter.com/bardylette'>Bardylette </a><span>le " . $jour . " :</span></i><br>" . html_entity_decode( $tweet->items[$i]['atom_content'] )  . "</p>";
  }

Avant de comprendre ce code, je pense que vous montrer à quoi ressemble la structure d’un tweet dans notre fichier xml est de mise.

<entry>
    <id>tag:search.twitter.com,2005:321321248745484289</id>
    <published>2013-04-08T17:58:50Z</published>
    <link type="text/html" href="http://twitter.com/Bardylette/statuses/321321248745484289" rel="alternate"/>
    <title>@BlastAndCo Question d&#x2019;habitude aussi je pense mais sans doute un peu oui =)</title>
    <content type="html">@&lt;a class=" " href="https://twitter.com/BlastAndCo"&gt;BlastAndCo&lt;/a&gt; Question d&#x2019;habitude aussi je pense mais sans doute un peu oui =)</content>
    <updated>2013-04-08T17:58:50Z</updated>
    <link type="image/png" href="http://a0.twimg.com/profile_images/1695163054/Piou_piou_web_normal.png" rel="image"/>
    <twitter:geo></twitter:geo>
    <twitter:metadata>
        <twitter:result_type>recent</twitter:result_type>
    </twitter:metadata>
    <twitter:source>&lt;a href="http://tapbots.com/software/tweetbot/mac"&gt;Tweetbot for Mac&lt;/a&gt;</twitter:source>
    <twitter:lang>fr</twitter:lang>
    <author>
        <name>Bardylette (Mathieu Menut)</name>
        <uri>http://twitter.com/Bardylette</uri>
    </author>
</entry>

Ouais, comme vous le constatez, il y a en effet pas mal d’informations vraiment inutiles. Pas la peine de nous attardez dessus. Je préfère vous prévenir de suite, nous, nous ne nous intéresserons qu’à la balise pour récupérer la date de publication du tweet et bien entendu

$date = html_entity_decode($tweet->items[$i]['published']);

Si vous tentez de l’afficher vous devriez vous retrouver avec un affichage bizarre… Essayez un echo sur votre variable $date, vous verrez, c’est assez moche :
2013-04-08T17:58:50Z.
Et bien tant pis, on va quand même partir de ça. Pour rappel à la fin, cette date sera affichée comme ceci :
lundi 8 avril 2013

La première chose à faire, c’est de découper notre variable $date en deux au niveau du caractère T. C’est la fonction de la… fonction explode. Notre variable $date se retrouve donc transformée en un tableau contenant deux membres : $date[0] contient 2013-04-08 et $date[1] contient ce qui ne nous servira plus ici.
Tout de suite, il devient plus intéressant de travailler avec ce format puisqu’il s’agit du format de date « standard » en php que nous allons pouvoir traiter dès à présent !

$jour = strftime("%A %e %B %Y", strtotime($date[0]));

Vous vous souvenez que nous avons voulu utiliser le français pour notre date ? Et bien c’est ici que cela va nous servir. Si nous avions voulu afficher la date traditionnellement avec des mots anglais pour le jour de la semaine et le mois, nous aurions écrit tout bêtement ceci :

$jour = date("l j F Y", strtotime($date[0]));

Notre avantage, c’est que nous pouvons directement afficher cela en français ! Magie ! N’hésitez surtout pas à faire des echo de vos variables pour voir à quoi ça ressemble.

Et une fois que l’on a ça ? Et bien plus qu’à afficher tout ça avec le contenu bien entendu. C’est le rôle de la dernière ligne que je ne pense pas avoir besoin de commenter vu que c’est le même principe que précédemment.

Et du coup voila, vous avez de quoi faire quelque chose d’assez sympathique déjà non ? Ha… vous en voulez encore un peu parce que vous avez vu que j’arrivais à afficher le nombre de followers que j’avais ? Et bien ça sera l’objet du prochaine tutoriel mais qui sera sans doute un chouïa plus complexe. J’en profiterais pour vous montrer pas mal de petites choses et vous verrez que finalement, la box toute faite de Twitter n’a plus vraiment d’intérêt à partir du moment où l’on sait trouver et récupérer ce que l’on cherche.

A la prochaine !