Le pret a surfer | Le web sous toute ses coutures

Facebook Api : poster en php un message sur une page

2 Déc 2013 Développement Web

Le but de ce tutoriel est de poster un message sur une page, sans que la personne qui exécute le script ne soit obligée d'avoir les accès à Facebook (exemple : tache cron, administrateur non connecté à Facebook). Attention je parle bien de page à ne pas confondre avec un profil Facebook.

Facebook API poster un message sur une page

Je propose deux versions : une écrite et une en vidéo que vous trouverez à la fin de l'article

Explications étape par étape de la solution

[MAJ]Jquery : mSelect ajout d’une scrollbar personnalisable

23 Juin 2011 Développement Web, Jquery

mSelect est un plugin jQuery que j'ai développé en avril 2010 qui permet de personnaliser totalement un select html et de pouvoir avoir des options comprenant du html (formatage ou image). Quelques semaines après la version 1.1 ajoutait la gestion événement. Aujourd'hui je passe mon plugin en version 1.2 pour amener une nouveauté très demandée.

ScrollBar personnalisable avec mSelect

Pour les listes html longues l'utilisation d'une scrollBar devient indispensable, le plugin l'ajoute donc maintenant automatiquement à partir de sept options (se nombre est paramétrable via nbVisible) Pour rester cohérent avec le reste du plugin cette scrollBar est entièrement personnalisable en css via plusieurs class.

Rendre inactif le champ mSelect

Seconde fonctionnalité qu'apporte cette mise à jour, la possibilité d'activer et désactiver le champ à l'aide de deux méthodes.

Optimisation du plugin et documentation complète

J'ai également optimisé l'ensemble du code, corrigé quelques petits bugs et rédigé une feuille css d'exemple. Et pour faciliter la vie des utilisateurs d'mSelect, j'ai rédigé une documentation complète avec beaucoup d'exemples. Voir la documentation complète de mSelect : Plugin jQuery

Mise à jour 1.3 : mCurrent

Suite à vos retour, voici une version 1.3 :

Ajout d'une class mCurrent sur l'option sélectionné
Correction du bug : mSelect plante en l'absence de jQuery-ui 1.8
Correction du bug : variable html de l'événement click manquante
Optimisation : réduction du nombre d'écouteur.

Mise à jour 1.4 : manipulation des données

Mise à jour du 27 juin 2011

Ajout de la méthode add
Ajout de la méthode options
Ajout de la méthode selected

Voir la documentation complète de mSelect : Plugin jQuery

Étiquettes : css, formulaire html, html select, javascript, Jquery, scrollbar

Controler des projecteurs avec l’iphone et sunlite

27 Mai 2011 iPhone, Non classé, Utilitaire

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 !

Étiquettes : sunlite, Utilitaire

Optimiser son blog wordpress pour le référencement

17 Déc 2010 Développement Web

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. Au mois octobre 2013, le blog était à 5 300 visiteurs unique par mois au début 2013 et toujours autant bien placé dans les moteurs de recherche. Suite à heureux événement, l'activité est moins soutenu donc diminution des visites et du placement. Chaque étape est expliqué en vidéo (création encours 5 vidéos sur 14), tout est expliqué et détaillé (installation, configuration et utilisation)

Voir comment on optimise WordPress

Étiquettes : optimisation, référencement, wordpress

mSelect : Plugin Jquery pour réaliser des listes html personnalisées

4 Avr 2010 Jquery

Le plugin est passé en version 1.4.2 Le plugin et la documentation complète est disponible sur : https://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 : [cc lang='html4strict' line_numbers='false'] [/cc] Coté javascript : [cc lang='javascript' line_numbers='false'] $(document).ready(function() { $('select').mSelect(); });[/cc]

Utilisation sur une liste avec bouton radio

Coté html : [cc lang='html4strict' line_numbers='false']

Ok
ok Ok strong
ok Ok Em
Ok Couleur

[/cc] Coté javascript : [cc lang='javascript' line_numbers='false'] $(document).ready(function() { $('#demo').mSelect(); });[/cc]

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.

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 [cc lang='html4strict' line_numbers='false']

ok Ok strong

[/cc] [cc lang='javascript' line_numbers='false'] $(document).ready(function() { $('#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 Ok strong" } }); });[/cc]

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é