500px : découvrez les plus belles photos du monde entier

Standard

500px
Si vous êtes un amateur de photographie, 500px est fait pour vous. 500px.com est un site internet avec comme objectif premier de diffuser uniquement les photos les plus extraordinaires de votre photothèque. Tout le monde peut naviguer à travers le site et découvrir les plus belles photos des photographes du monde entier. Faites un tri selon la popularité ou les choix de l’éditeur, vous ne serez pas déçus des clichés qui vous attendent.

Si vous souhaitez participer à la communauté, il vous suffira de créer un compte, gratuitement et rapidement. Les autres membres seront ensuite en mesure de voter et de commenter vos photos et le service met régulièrement en avant les clichés les plus appréciés par la communauté.

Un petit exemple de photos pour vous donner un aperçu :

Photo exemple

Photo exemple

Jetez un coup d’oeil aux photos populaires : 500px.com/popular.
500px, à découvrir rapidement ! 500px.com.

[CODE] Créer de beaux diagrammes avec l’API Google

Standard

Pie chartL’API de Google permet de générer de beaux graphiques dynamiques afin de présenter de manière agréable et facilement lisible vos données. Vous pouvez réaliser des “camemberts”, des diagrammes en bâtons, des diagrammes à bandes, des diagrammes à lignes brisées, des boites à moustaches… Mais vous pouvez également utiliser un fond de carte du monde pour réaliser des statistiques sur des pays (visiteurs de votre site par pays par exemple).

Exemple : diagramme en camembert

Je vais m’attacher à vous expliquer comme réaliser un diagramme en camembert montrant le top 5 du nombre de messages par auteur, sur un forum par exemple. La génération de ce diagramme se fera à partir de données enregistrées en bases de données, il est donc totalement dynamique puisqu’il s’adapte aux données présentes dans les tables. On veut voir l’importance du top 5 des auteurs de messages dans notre forum, on doit représenter en une seule “portion” le nombre de messages des autres utilisateurs. Voici le code complet de la page, détaillé à l’aide de commentaires :

Voici le résultat que l’on obtient avec des données prisent arbitrairement :

A vous d’adapter le code précédent à votre besoin ! La documentation complète de l’API Google Charts est disponible juste ici, je vous invite à la consulter.

Les nouvelles technologies de l’information et de la communication accentuent-elles notre stress ?

Standard

Nouvelles à chute
Les nouvelles avancées technologiques ont bien fait évoluer nos manières de communiquer et nos rapports humains. Ces nouvelles technologies de l’information et de la communication (NTIC) ont permis de garder le contact avec des personnes éloignées, nous ont permis de pouvoir nous informer sur n’importe quel sujet en quelques secondes si l’on a accès à Internet et a diminué nos délais de correspondances. Qui pense encore envoyer une vingtaine de lettres à ses amis pour les convier à un anniversaire ? Un événement Facebook ou un email groupé et les choses seront réglées en quelques secondes, sans soucis de la localisation de chacun et sans cout supplémentaire pour l’émetteur. Si les avantages des NTIC sont nombreux et sont certains, il existe néanmoins d’importants défauts.

J’ai choisi de traiter dans mon sujet d’actualité pour l’INSA de Rouen le phénomène du technostress. Ce terme est utilisé pour les personnes souffrant de crises d’angoisse et de dépressions dans un environnement technologique déshumanisé.

Quelles en sont les causes ?

La technologie met à notre disposition toujours plus d’informations et nous habitue à des comportements caractérisés par toujours moins de communication. Il y a là les conditions d’une perte de relation, d’une perte de sens. On ne sait plus faire quelques pas, monter quelques marches, aller frapper à la porte d’un collègue.

De nombreuses activités sont maintenant contrôlées par des ordinateurs telles que : frappe dactylographique par minute, vitesse de réponse téléphonique lors des demandes d’informations, fréquence des pauses, longueur des temps de repos, etc. Les statistiques qui sont tirées de ces résultats ont pour but de mettre en évidence la présence de temps morts et d’établir un classement entre les différents salariés. La recherche de performance est partout et est régie par une surveillance technologique toujours plus accrue.

Les effets du technostress

Les personnes baignant dans un environnement technologique important sont de plus en plus habituées à l’instantanéité de l’information, à effectuer plusieurs tâches en même temps et vivent dans l’urgence de la réponse aux emails ou aux appels, l’addiction aux nouvelles technologies (ordinateurs, smartphones, tablettes…). Incapable de décrocher de leur travail car habitués à être connectés en permanence, ils attendent de leur entourage une réactivité éclair.

La technologie augmente la charge psychique ce qui se traduit par une probabilité accrue de risques psychosociaux et psychosomatiques. En effet, l’utilisation de la technologie exige une très grande activité mentale et cérébrale : haut degré de mémorisation, attention, vigilance, compréhension rapide de l’information, anticipation, acuité perceptive, représentation mentale d’abstractions logiques ou complexes etc. Par ailleurs, plus la charge psychique augmente, plus les comportements du sujet au travail deviennent asociaux (rejet, repli, fuite, suicide, agressivité, rétention d’information, violence).

Les différents intêrets

Le technostress est un problème complexe et les intérêts de chacun divergent. Les personnes atteintes de technostress ont un problème psychosomatique qui relève de l’addiction ou du stress. Les NTIC peuvent mener l’individu dans une situation extrême de surcharge (« burn-out ») ou l’isoler. Ces maladies psychosomatiques peuvent être les raisons d’arrêts maladies ou de suicides.

Le technostress est considéré comme une des formes de stress au travail. Le stress au travail est un important enjeu économique : il coûte chaque année entre 3 et 5 % du PIB.

Pour les dirigeants, les NTIC sont vitales au travail : elles permettent de diriger leurs équipes, de communiquer avec tout le monde en gagnant du temps et de surveiller le travail de chacun. Bien que les capacités d’organisation et de communication des NTIC soient importantes, il faut arriver pour chaque entreprise à trouver un équilibre afin que les employés ne souffrent pas de technostress.

Les NTIC posent enfin des questions d’ordre moral : où se situent les barrières entre vie professionnelle et vie privée ? Suis-je capable de me déconnecter totalement ?

[Maths] Connexion avec une “image mot de passe”

Standard

Windows
“Picture password” est une nouvelle manière de se connecter à son ordinateur dans Windows 8, actuellement disponible en version de développement. Plus facile que de taper un mot de passe alphanumérique (Windows 8 laisse une place importante au tactile), la méthode est surtout bien plus sécurisée.

La connexion a un ordinateur avec un clavier virtuel peut être un véritable calvaire entre les minuscules, les majuscules et les chiffres qui imposent de “changer de clavier”. Taper un mot de passe complexe peut prendre jusqu’à 30 secondes. Les ingénieurs s’occupant de Windows 8 ont alors essayé de trouver une manière de s’authentifier rapide, fluide et sécurisée.

Les premières méthodes d’authentification sont encore pour le moment les codes PIN (les combinaisons numériques). Quasiment tout le monde en a déjà utilisé et c’est extrêment facile et rapide de taper un code de 4 chiffres avec un clavier. Mais les combinaisons numériques présentent néanmoins des soucis car les séquences les plus faciles à retenir sont aussi les moins sécurisées : 0000, 1111, 1234 ou des dates de naissances (ces informations peuvent facilement être trouvées et ce sont les premières combinaisons qui seront testées par un pirate). Dans un tel cas, cette combinaison jugée “personnelle” par l’utilisateur met en péril sa sécurité. Les ingénieurs de Microsoft ont alors planché sur un système d’authentification rapide, fluide, sécurisé et personnel.

Une authentification personnelle

Votre “picture password” est composée de deux parties complémentaires : une photo de votre bibliothèque d’images et les gestes associés à celle-ci. Au lieu d’avoir un échantillon d’images prédéfini, vous pouvez choisir n’importe quelle image avec la combinaison de gestes que vous désirez. L’intérêt est double : votre image est personnelle et vous plait et vous décidez vous-même des gestes que vous y associez en fonction des parties de l’image qui comptent pour vous, augmentatant ainsi la sécurité et la mémorabilité de votre mot de passe.

Picture password

La combinaison de gestes à votre disposition sont les cercles, les lignes et les tapotements. Ces gestes permettent de mettre en valeur ou de relier les parties de l’image qui comptent pour vous. La direction de ces gestes importe également : il ne suffit pas de savoir quelles parties de l’image vous avez décidé de mettre en valeur avec les gestes choisis mais il faut connaitre les points de départs et d’arrivées et ceci dans l’ordre que vous avez choisi.

Picture password

Les ingénieurs de Microsoft ont également expérimenté de laisser le choix dans les gestes à l’utilisateur mais ceci était un échec : les gens mettaient plus de temps pour réproduire les gestes qu’ils avaient défini (17s en moyenne pour des gestes libres et 4s pour les lignes / cercles / tapotements). De plus, les utilisateurs mettaient très souvent en évidence des zones précises de leur image et changeaint ensuite leurs gestes pour être en adéquation avec cette idée de mise en évidence de zones dans l’image. Ils choisissaient alors naturellement des lignes ou des tapotements.

Comment ceci fonctionne

Une fois que l’utilisateur a sélectionné l’image, celle-ci est divisée dans une grille de 100 segments de même taille en long et en large, formant des carrés au final.

Les gestes sont ensuite identifiés selon leurs coordonnées dans ce repère et sont caractérisés par des points de coordonnées (x,y). Pour les lignes, les coordonnées des points de départ et d’arrivée sont enregistrés ainsi que l’ordre dans lequel ils sont atteints. Pour un cercle, on enregistre la coordonnée du point central, le rayon du cercle et la direction dans laquelle il est tracé. Pour le tapotement, on enregistre la coordonnée du point de contact.

Picture password

Quand vous essayez de vous authentifier, les coordonnées enregistrées quand vous faites vos gestes sont comparées avec les coordonnées du mot de passe de l’image. Si le type de geste est faux (ça devrait être un cercle mais vous avez tracé une ligne), l’authentification échoue instantannément. Quand le type de gestes et l’ordre est bon, vous ne serez authentifié que si le pourcentage de ressemblances des coordonnées est suffisament proche de 100 %.

Prenons l’exemple du tapotement, qui est le geste le plus simple des 3. Les coordonnées du tapotement effectué sont comparées à celui enregistré : le pourcentage varie de 100 % si la coordonnée est la même et décroit jusqu’à 0 % si le point touché est trop éloigné de celui enregistré. Le geste est validé si le pourcentage de ressemblance est >= 90 %. Voici une représentation visuelle des pourcentages de correspondance :

Picture password

Le pourcentage de 100 % de correspondance est associé aux points situés dans un rayon de 3 du point de coordonnée original. Pour chaque point, ce sont les 37 points “autour” de lui qui auront un pourcentage de correspondance associé. Les calculs sont similaires pour les lignes et les cercles.

Sécurité et nombre de gestes

Quand on s’occupe du nombre de gestes nécessaires à l’utilisation de “Picture password” on considère la sécurité, la mémorabilité et la rapidité tout en offrant un compromis entre l’expérience utilisateur et la sécurité. Pour déterminer le nombre de gestes nécessaires apportant une sésurité suffisante, on compare “Picture password” aux autres méthodes d’authentification : le code PIN et le mot de passe alphanumérique.

Pour un code PIN de 4 chiffres (4 chiffres de 10 possibilités indépendantes) il y a 10^4 = 10 000 combinaions possibles.

Quand on s’occupe des mots de passe alphanumériques, l’analyse peut être simplifiée en considérant que la séquence de caractères est composée de lettres minuscules (26), lettres majuscules (26), chiffres (10) et symboles (10). Dans le cas le plus basique, quand un mot de passe est composé de n lettres, il y a 26^n combinaisons. Quand le mot de passe est composé de 1 à n lettres il y a alors tant de combinaisons :

Picture password

Par exemple, un mot de passe de 8 caractères possède 208 milliards de combinaisons, ce qui apparait énorme pour beaucoup de personnes.

Malheureusement, la plupart des gens n’utilisent pas de mots de passe aléatoires. Ils utilisent des mots communs et des phrases, des noms de famille et ainsi de suite…

Dans ce cas, considérons que l’utilisateur compose son mot de passe de tout sauf deux lettres miniscules et inclut une majuscule et un chiffre ou un symbole. La lettre majuscule et le symbole peuvent être placés en n’importe quelle position. Le nombre de combinaisons est alors :

Picture password

On obitent alors le tableau suivant, donnant le nombre de combinaisons possibles selon la taille du mot de passe :

Picture password

On mène une analyse similaire pour chacun des types de gestes de “Picture password”. Les tableaux suivants comptent pour un geste unique en tenant compte de la clémence de l’algorithme de reconnaisance.

Pour le tapotement, le nombre de gestes uniques en fonction du nombre de tapotements est le suivant :

Picture password

Le cercle est plus compliqué que le tapotement mais moins compliqué que la ligne. Pour estimer la sécurité d’un cercle, on peut prévoir que l’attaquant estime que le rayon est compris entre 6 et 25 et que les positions X et Y sont comprises entre 5 et 95 (on exclut des cercles aux bords de l’image). Ce qui laisse une solution potentielle dans l’image définie comme suit :
Picture password

En fonction du nombre de cercles, le nombre de combinaisons à réaliser est le suivant :
Picture password

Le geste le plus complexe est une ligne. Une ligne est composée de 2 points sur la grille de 100×100 avec un ordre dans ces points. Ce qui donne 100 millions de lignes possibles, mais comme les lignes doivent être d’au minimum 5 portions de long, le nombre de possibilités est abaissé à 99 336 960. Contrairement aux cercles, on ne peut pas faire des hypothèses où les lignes peuvent se situer : elles peuvent rejoindre un bord à l’autre de l’écran comme elles peuvent être très courtes.
En fonction du nombre de lignes, le nombre de combinaisons à réaliser est le suivant :
Picture password

Maintenant que l’on comprend la sécurité de chaque geste individuel, les données peuvent être ajoutées afin d’avoir une combinaison de plusieurs gestes. Ceci peut être fait en faisant la somme de chaque geste unique des 3 types de gestes d’une longueur donnée n et en l’élevant à la puissance n. Le résultat est dans le tableau suivant qui compare “Picture password” à la méthode du PIN et aux mots de passe alphanumérique.
Picture password

Comme on peut le voir, l’utilisation de 3 gestes propose une sécurité similaire à un mot de passe de 6 caractères choisis au hasard. De plus, l’utilisation de 3 gestes assure un mot de passe facile à mémoriser et rapide à utiliser.

En addition au nombre de combinaisons possible, la sécurité a été augmentée en mettant en place deux protections supplémentaires. Comme les PIN, au bout de 5 essais incorrects avec “Picture password” vous ne pouvez plus vous connecter qu’avec votre mot de passe alphanumérique. De plus, “Picture password” est désactivé dans les sessions distantes, ce qui empêche une attaque réseau contre cette fonctionnalité.

En clair, “Picture password” est une méthode d’authentification complémentaire au mot de passe alphanumérique et n’est pas un remplacement de celui-ci.

Sécuriser contre les traces de doigts

Les gens sont parfois concernés par les tâches sur les claviers virtuels qui permettent de savoir ce que l’on a tapé précédemment. Néanmoins ceci reste compliqué car il faut pouvoir deviner l’ordre des différents gestes, la tâche est quasiment impossible sur un écran “sale” qui correspond à une utilisation normale.

Le risque potentiel est que les traces laissées par votre authentification puissent trahir votre “Picture password”. On peut comparer différentes manières de s’authentifier (clavier normal, un code PIN et “Picture password) pour comparer la difficulté de deviner la véritable séquence d’authentification. Imaginons le pire des scénarios :
– Votre écran est aussi propre qu’un miror
– Vous touchez exactement les bons endroits pour vous authentifier
– Vous vous éloignez de votre appareil sans plus le toucher
– Un attaquant vole votre appareil et peut deviner 100 % de chacun de vos gestes pour s’authentifier.

Bien évidemment, les choses ne se passent habituellement pas comme ça. Mais ce scénaria permet de comparer les 3 formes d’authentification et leur vulnérabilité à ce type d’attaque.

Un code PIN laissera une trace pour chacun des chiffres utilisés. Si il y a n chiffres, et que chaque chiffre n’a été utilisé qu’une fois (le cas le plus compliqué), il y aura alors n! possibilités. Pour un code de 4 chiffres, il y aura alors 24 (4x3x2x1) combinaisons possibles.

Pour un clavier, il y a également n! façons de saisir un mot de passe de n caractères. Pour un mot de passe complexe, l’utilisateur va utiliser la touche majuscule (ou un autre bouton) pour sélectionner le caractère adéquat. La pression de cette touche sera visible pour l’attaquant, mais il ne pourra pas savoir quand cette touche aura été utilisée. Si on fait la simplication qu’il n’y a qu’un caractère qui requiert l’utilisation de la touche majuscule, il y a alors Formule combinaisons possibles.

Les gestes comportent également n! possibilités. Pour chaque ligne ou cercle utilisé dans la séquence de gestes, le nombre de possibilités augmente par un facteur de 2. Si tous les gestes sont des lignes ou des cercles alors le nombre de combinaisons est identique au mot de passe utilisant la touche majusucle.

Le tableau suivant fait la synthèse du nombre de possibilités pour chacune des méthodes selon la taille de la séquence :
Picture password

Encore une fois on consiède un écran totalement propre où seuls les gestes d’authentification apparaissent. Si on considère un scénario ou l’attaquant ne peut pas retirer d’informations grâce aux tâches sur l’écran (parce que l’appareil a été beaucoup utilisé auparavant par exemple) ou parce que la personne utilise un clavier et une souris, les chances de déviner sont énormément réduites. Avec nos 3 types de gestes, et une séquence de plus de 3 gestes, le nombre de possibilités est de 1 155 509 803 comme vu précédemment.

La dernière attaque possible est de considérer les points d’intêrets de l’image, où les gens ont le plus de chances de faire leurs gestes dans ces zones. Bien que les études menées montrent qu’il est très difficile de deviner où un utilisateur va tracer une ligne plutôt qu’un cercle, on peut simuler une attaque en considérant que la photo a m points d’intêrets. Si l’utilisateur peut utiliser des tapotements, des lignes ou des cercles, le nombre total de possibilités est de Formule où n est le nombre de gestes du “Picture password”. On obtient le tableau suivant de combinaisons possibles :
Picture password

En considérant que l’image a 10 points d’intêrets et qu’il y a 3 gestes dans la combinaison de l’utilisateur, il y a alors 8 millions de possibilités, ce qui semble compliqué à deviner en 5 essais.

A noter que les administrateurs réseaux ont la possibilité de définir s’ils veulent utiliser ou non sur leur réseau “Picture password”. Et bien évidemment, sur les ordinateurs personnels, “Picture password” reste une option et ne remplace pas le traditionnel mot de passe alphanumérique.

Rétrospective de l’année 2011 avec Google

Standard

Google
Tsunami, Ben Laden, printemps arabe, Grèce, Occupy, Steve Jobs, mariages princiers, Adele, Fukushima, Google +, iPhone 5, affaire DSK… Tout ces termes ont été des recherches populaires sur Google en 2011. Google vient de dévoiler aujourd’hui son « Zeitgeist » annuel qui révèle les tendances, personnalités et événements les plus recherchés dans le monde en 2011.

La recherche qui a connu la plus grosse progression dans le monde entier toute catégorie confondue est Rebecca Black. L’interprète de Friday, si elle n’a pas rencontré le succès grâce à ses talents de chanteuse, pourra au moins se vanter d’être devenue le phénomène de l’année. Elle est suivie de Google +, Ryann Dunn, Casey Anthony, le jeu Battlefield 3, l’iPhone 5, la chanteuse Adele, Fukushima, Steve Jobs et enfin l’iPad 2.

Vous pouvez retrouver le classement détaillé en plusieurs catégories et par pays sur le site dédié de Google : http://www.googlezeitgeist.com/fr.

Particulièrement intéressant également, vous pouvez retrouver les principaux évènements marquants de l’année 2011 dans une vidéo réalisée par Google :

Faites le test et regardez la version 2010 (juste ici) du Google Zeitgeist ; vous souveniez-vous de tout ?

Clip vidéo interactif : We The Kings révolutionne les clips musicaux

Standard

We The Kings
We The Kings est un groupe de PowerPop floridien qui peine à émerger. Pour remédier à ce manque de popularité, le groupe a réalisé un clip interactif qui devrait faire parler de lui.

Après avoir sélectionné un des quatre membres du groupe et un niveau de difficulté, vous voilà plongés dans le clip où vous devez sauver une jeune fille d’une bande de voyous. Vous avez alors certaines actions à entreprendre durant tout le clip : une manière originale de regarder un clip musical puisque vous interagissez avec lui à travers des mini jeux ! Si jamais vous échouez, vous perdez une vie et vous pouvez retenter votre chance avec un autre membre du groupe.

Pour jouer, cliquez sur l’image ci-dessous !
We The Kings

“Take This Lollipop” : un thriller interactif qui pille votre compte Facebook

Standard

Lollipop
Combien de fois vous a t’on répété que vous deviez protéger vos informations sur internet, en particulier sur les réseaux sociaux ? Ne divulguer que les informations utiles, n’accepter que les personnes dignes de confiance, bref faire attention en naviguant. Je suis d’accord avec ceci, vous l’êtes probablement aussi, mais après tout… On peut se demander “Pourquoi nous embête t’on autant avec ça ?”.

Take this Lollipop (“Prend cette sucette” en français), est un nom bien évocateur pour un site web. En effet sur ce site, une fois connecté à l’aide votre compte Facebook et après avoir accepté de divulguer certaines informations pour les besoins du site (ce que vous avez surement déjà du faire pour de nombreuses autres applications), vous vous retrouverez avec une vidéo. Pas n’importe quelle vidéo, une mise en scène de votre vie, basée sur les informations que vous avez partagé sur Facebook.

Dans une pièce un peu sombre, un homme pianote frénétiquement sur le clavier de son ordinateur. Il a l’air un peu hagard, et sue comme s’il ne s’était pas lavé depuis un bail. Sur son écran, apparaît une page Facebook : la vôtre ! Oui, c’est bien sur votre profil qu’il est en train de surfer, et visiblement, il a accès à tout ce que vous y partagez. Vos photos, vos statuts, la liste de vos amis… Il fouille tout, et l’on se demande bien ce que ce type au regard psychopathe va faire de tout cela…

L’expérience est poussée à l’extrême et vous prendrez conscience des enjeux de la protection de votre vie privée après avoir vu ceci.

Tentez l’expérience, vous ne serez pas déçu ! www.takethislollipop.com

iPhone 4S : Siri a de l’humour

Standard

Siri
Alors que l’iPhone 4S a été dévoilé il y a quelque jours, c’est sa nouvelle fonctionnalité Siri qui fait beaucoup parler d’elle. Cette reconnaissance vocale est capable de vous donner la météo, de régler un timer, d’envoyer un SMS, de suivre le trafic aux alentours de vous et tout ceci grâce à ce que vous lui demandez. On assiste donc à une sorte de dialogue homme / machine où Siri essaye de comprendre ce que vous dites et de faire l’action que vous désirez.

Les ingénieurs ont eu l’air de bien s’amuser en développant Siri et se sont amusés à cacher quelques répliques bien osées, plutôt rigolotes et souvent originales. En voici quelques unes :

  • « Quel est le sens de la vie ? , « Se poser des questions comme celle-là , répond Siri
  • « Quel est le sens de l’existence ? , « 42 , répond Siri
  • « Veux-tu m’épouser ? , « Mon contrat de licence utilisateur ne comprend pas les mariages. Désolé. , répond Siri
  • « Raconte moi une blague , « Je ne peux pas, j’oublie toujours la chute , répond Siri
  • « Qu’est-ce qui te rend d’humeur coquine ? « J’ai trouvé un certain nombre de services d’escort girls près de toi , répond Siri on fournissant ladite liste.
  • « Je suis bourré ! -> Siri vous donnera une liste de taxis
  • « Quel est ton père ? « C’est toi ! On peut retourner bosser maintenant ? , répond Siri
  • « J’ai besoin de cacher un corps Siri vous donnera une liste surprenante aux alentours : décharges, marais, mines, anciennes usines…

[CODE] L’Ajax, c’est pas si compliqué que ça

Standard

Ajax
En utilisant Ajax dans un site web, un programme écrit en langage de programmation Javascript, incorporé dans une page web, est exécuté par le navigateur. Celui-ci envoie des demandes de calcul au serveur Web, puis modifie le contenu de la page actuellement affichée par le navigateur Web en fonction du résultat reçu du serveur, évitant ainsi la transmission et l’affichage d’une nouvelle page.

Voici pour la partie théorique, pour simplifier nous dirons que l’Ajax permet d’exécuter des actions côté serveur et de mettre à jour une page web côté utilisateur sans que ce dernier ne doive avoir à recharger la page, le changement se fait pour lui de manière quasi instantanée.

Pratique

Pour vous apprendre comment utiliser l’Ajax, je vais utiliser mon site Teen Quotes avec lequel j’avais déjà montré comment faire des traductions, créer un site mobile et comment traquer ses erreurs 404.

Comme nous l’avons vu, il faut pour utiliser Ajax, faire appel à du JavaScript. J’utilise la librairie jQuery qui facilite l’utilisation d’Ajax. Pour utiliser le script suivant, vous devrez donc inclure la dernière version de jQuery auparavant.

Code ajax.js

// déclaration de la fonction et des variables qui seront utilisées
function favorite(id_quote,id_user) {
	$(".favorite[data-id="+id_quote+"]").html("Wait..."); // texte que verra l'utilisateur sur l'élement HTML cible pendant l’exécution de la requête
	$.ajax({ // l'url désigne la page distante où le code PHP sera éxécuté, data désigne les variables qui seront envoyées ici en post à cette page
		type: 'post',
		url: 'http://teen-quotes.com/ajax/favorite.php',
		data: {
			id_quote: id_quote,
			id_user: id_user
		},
		success: function(data) {
			$(".favorite[data-id="+id_quote+"]").html(data);
		} // affiche un message définit dans la page PHP sur l'élément HTML ciblé quand la requête a été exécutée avec succès
	});
	
	return false;
}

J’ai bien détaillé chaque partie du code JavaScript, vous ne devriez pas avoir de mal à comprendre celui-ci.

Vous avez donc vu que nous faisons appel à une page distante, qui servira à exécuter l’action voulue puis à mettre à jour l’affichage de notre page.

Code de la page ajax/favorite.php

 
// Permet d’exécuter la page depuis un domaine extérieur ou un sous-domaine
header("Access-Control-Allow-Origin: *");

// Connexion en base de données
require "../kernel/config.php";
$db = mysql_connect($host, $user, $pass)  or die('Erreur de connexion '.mysql_error());
mysql_select_db($user, $db)  or die('Erreur de selection '.mysql_error()); 
require "../kernel/fonctions.php";

// Récupération des données envoyées par le script JS
$id_quote = mysql_real_escape_string($_POST['id_quote']);
$id = mysql_real_escape_string($_POST['id_user']);

// vérification que la requête ne provient pas d'un serveur externe
if (preg_match('/teen-quotes.com/', $_SERVER['SERVER_NAME'])) 
{
	if (empty($id_quote))
		echo 'Erreur id !';
	else
	{
		$query = mysql_query('INSERT INTO teen_quotes_favorite (id_quote, id_user) VALUES ('.$id_quote.','.$id.')');

		if ($query) 
			echo $add_succes;
		else
			echo $error;
	}
}
else
	echo ''.$_SERVER['SERVER_NAME'].'';

Encore une fois, rien de très compliqué, je pense avoir suffisamment détaillé pour que vous puissiez comprendre facilement.

Maintenant que notre Javascript va pouvoir éxécuter notre page PHP puis mettre à jour l’affichage, il ne reste plus qu’à appeler notre fonction JavaScript dans notre page de la manière suivante :

Vous devez faire en sorte que les informations que vous souhaitez envoyer à la fonction JavaScript soient dans le bon ordre, dans notre cas 900 désigne donc id_quote et 42 id_user

Pensez à bien cibler l’élément HTML dont vous souhaitez mettre à jour le contenu, une fois la requête exécutée avec succès, l’ancien contenu texte sera effacé et mis à jour par ce que vous avez défini dans votre page appelée par votre fonction JavaScript.

Vous voilà donc prêts à utiliser l’Ajax a foison, vous avez les clés en main !