Facebook debugger, la solution aux problèmes du bouton J’aime

Le bouton J’aime ne fonctionne pas comme vous voulez ? L’image que vous lui avez passée ne se met pas à jour ? La description n’est pas la bonne ?

La raison est toute simple : Facebook met en cache tous les liens partagés. Dès qu’un internaute aime une page, les informations liées (image, titre, description…) sont gardées en mémoire par Facebook, et les internautes suivants verront les mêmes informations.

Une solution très facile pour parer à ce problème, le Debugger Facebook. Vous entrez l’url de votre page et vous verrez les informations que Facebook récupère sur cette page. Et il en profitera également pour mettre à jour les données.

Créer des coins arrondis sans images et en css

Avec l’arrivée deCSS3, il est devenu très simple de réaliser des coins arrondis sans images, grâce à la propriété border-radius.

La propriété CSS3 border-radius n’est pas reconnue par Internet Explorer jusqu’à sa version 8. Heureusement, il existe des solutions pour parer à ce problème, notamment CSS3pie.com.

Après avoir téléchargé l’archive contenant le fichier PIE.htc (fichier à inclure dans votre squelette html), voici la syntaxe css :

Et voilà !

Attribuer un calque de réglage Photoshop à un seul calque

Par défaut lorsqu’on ajoute un calque de réglage sur Photoshop, ce dernier l’applique à tous les calques situés sous le calque de réglages. Mais pour n’attribuer le réglage qu’à un seul calque, il suffit de maintenir la touche Alt en même temps que vous choisissez votre réglage. Ensuite une fenêtre s’ouvre avec comme informations le nom du réglage et une case à cocher « Créer un masque d’écrêtage d’après le calque précédent ». Cochez cette dernière et votre réglage ne s’appliquera pas partout !

SQL – Récupérer l’auto-incrément

Une différence importante dans une table sql : le dernier id inséré et l’auto-incrément. En effet, lorsqu’on insère un enregistrement suite à une requête INSERT, l’id généré correspond à la valeur de l’auto-incrément. Mais cette dernière n’est pas forcément celle qui suit le dernier id (par exemple, si on a supprimé des enregistrements directement via phpMyAdmin). Donc comment récupérer la valeur de l’auto-incrément ?

Il suffit d’utiliser la requête suivante :

show table status where name='votretable'

Cette requête donne plusieurs informations à propos de votre table, dont l’auto-incrément. Pour récupérer ce dernier, il suffit d’afficher la colonne ‘Auto_increment’ de votre résultat de requête. Ce qui donne avec l’utilisation de PDO :

$req = $dbh->query("show table status where name='votretable'");
$res = $req->fetch(PDO::FETCH_ASSOC);
$dernier_id = $res['Auto_increment'];

Et voilà !

Gallery2 et le fichier bootstrap.inc

Après avoir installé Gallery2 sur votre serveur, et en allant sur la page d’accueil de Gallery2 (http://www.adresse.fr/gallery2/main.php), vous avez peut-être une erreur Deprecated :

Deprecated: Assigning the return value of new by reference is deprecated in /usr/share/gallery2/bootstrap.inc on line 43.

Pas de panique ! Ouvrez le fichier bootstrap.inc situé à la racine de votre projet et allez à la ligne 43 :

$gallery =& new Gallery();

C’est le « & » qui pose problème. Il vous suffit juste de l’enlever, ré-enregistrer votre fichier, et l’erreur a disparu. Votre Gallery2 fonctionne de nouveau.

Appeler une fonction javascript à intervalle régulier

Pour exécuter une fonction javascript à intervalle régulier, voici la démarche à suivre :

1- Créer votre fonction.

2- Via jQuery, appeler votre fonction grâce à setInterval, qui va répéter votre fonction toutes les x millisecondes.

La fonction permettant d’arrêter cette exécution est clearInterval().

Masque avec dégradé de transparence sous Flash

Faire un masque sous Flash, pas de problème. Mais quand il s’agit d’ajouter un effet de dégradé de transparence, alors ça se complique. ! Voici les astuces pour y arriver facilement :

– créer un clip d’une forme quelconque (rectangle, carré…)

– appliquer un effet de flou sur ce clip où vous désirez le dégradé de transparence

– cocher dans le panneau des propriétés « Cache sous forme de bitmap » pour le clip qui sera masqué

– appliquer le masque au clip concerné (soit par actionscript soit directement dans le scénario)

Et voilà !

Flash plein écran dans un site Web

Pour pouvoir mettre une animation flash en plein écran, il existe une commande flash fscommand(« fullscreen », « true »).  Le souci, c’est qu’elle ne fonctionne pas lorsque l’animation est intégrée dans une page Web.

Un contournement existe pour parer à ce problème. Il s’agit d’afficher le flash suivant la hauteur de l’écran. (Nous avons pris la hauteur car le plus souvent les écrans sont plus larges que hauts).  Définissons la hauteur voulue :

hauteur =  screen.availHeight - 60; //compatible Firefox et IE, on enlève 60
qui correspond à la hauteur de la barre navigateur

On ajoute un id aux balises <embed> et <object> pour accéder aux propriétés des éléments. Puis on modifie la hauteur et la largeur du flash :

if(document.getElementById('embed')) {
document.getElementById('embed').height = hauteur;
document.getElementById('embed').width = '100%';
} else {
document.getElementById('object').height = hauteur;
document.getElementById('object').width = '100%';
}

La largeur est à 100% car elle s’adapte automatiquement par rapport à la hauteur.

Et voilà une fonctionnalité plein écran facile à réaliser.

Nouvelles typos sur le Web

Vous en avez assez de Arial, Verdana et Trebuchet sur vos sites web ?  Alors passez à @font-face ! Très simple d’utilisation à l’aide du site www.fontsquirrel.com.

Démonstration :
– Allez sur le site www.fontsquirrel.com/fontface/generator, ajoutez une typo (au format otf) puis générez votre kit .
– Dé-zippez ce dernier et ouvrez le fichier stylesheet.css. Copiez la propriété @font-face dans votre feuille de style habituelle :
@font-face {
font-family: "Typo";
font-style: normal;
font-weight: normal;
src: url("typo.eot?") format("eot"),
url("typo-webfont.woff") format("woff"),
url("typo-webfont.ttf") format("truetype"),
url("typo-webfont.svg#webfontrTwnpuIE") format("svg");
}

– Copiez les fichiers de police fournis dans le zip (formats eot, woff, ttf et svg) dans le même répertoire que votre fichier css.

Et voilà, il n’y a plus qu’à tester !

Afficher de l’html généré en Rails 3

Avec Rails 2, pour afficher une variable contenant de l’html (par exemple généré par TinyMCE), rien de plus simple :

Avec Rails 3, c’est un peu plus compliqué. La ligne de code précédente, affichera le texte de la variable brut, sans le style html mais avec les balises en tant que texte. Pour parer à ce problème, deux solutions existent :

Et voilà !