Because I have more and more requests for miscellaneous examples for nyroModal, I decided to implement some samples in a FAQ.

To prepare that, you could ask what you want here!

So let's comment!

Puisque j'ai de plus en plus de demandes d'exemples divers et variés pour nyroModal, j'ai décider de mettre en place des exemples sous forme de FAQ.

Afin de préparer tout ça, vous pouvez faire vos demandes ici !

Alors à vos commentaires !

Voilà bientôt 10 mois que je suis à Los Angeles. Comme je l'avais déjà dit 2 mois après mon arrivée ici, j'ai beaucoup progressé. Et encore plus maintenant.

Comme j'étais vraiment mauvais avant, je vais essayer de résumer toutes les étapes qui m'ont permis d'avoir le niveau que j'ai actuellement. Alors bien sûr, je suis très loin d'être bilingue -il faut 10 ans en immersion pour ça, et encore...-, mais je comprends les gens et je me fais comprendre : l'essentiel !

De plus, durant tout mon cursus scolaire, j'ai toujours eu des problèmes en langue. Des professeurs trop peu intéressant au collège, des textes et sujets barbants, rien qui m'a attiré dans cette langue. Les beaux discours des professeurs qui rabâchent -pas forcément à tort- que l'anglais est indispensable n'y faisait rien. Je n'ai jamais été bon pour apprendre par la théorie, mais j'ai toujours préféré la pratique : Learning by doing. Et pratiquer l'anglais en répondant à une cassette, ce n'est pas des plus sexy quand même...

Les bases

Avant toute chose, il est indispensable d'acquérir les bases de langue : comment conjuguer un verbe, quels sont les pronoms personnels, comment sont formées les phrases. Pour ça, l'école a quand même réussi à m'inculquer ça. Il faut dire que l'anglais n'est quand même pas très compliqué de ce côté là. les verbes au présent simple sont toujours pareil sauf pour la 3ème personne, la tournure des phrases ressemble beaucoup au français. Et si vous utilisez des questions ou du passé, l'utilisation du verbe do pour les verbes réguliers suffit.

Approfondir ces bases

Les bases s'acquièrent rapidement et simplement. Mais il va falloir rapidement emporter un certain bagage linguistique qui s'acquiert un peu plus difficilement. Là encore, il n'y a pas de secret, et si, comme moi, vous avez manqué le coche à l'école, je vous conseille ce livre : L'anglais correct pour les nuls. Derrière ce titre, se cache un livre qui commencera par vous raconter d'où vient la langue, comme elle s'est créée. Chose qu'on ne nous apprend pas à l'école. De plus, n'ayez pas peur, si vous n'y connaissez pratiquement rien en anglais. Comme je l'ai dit, on raconte l'anglais plus qu'on ne l'enseigne. C'est donc une approche beaucoup plus ludique. Dans les premiers chapitres, il y a très peu d'anglais. L'introduction de la langue n'intervient que plus tard, petit à petit, au fil des pages.

A la fin de ce livre, vous aurez en tête une très bonne idée de comment s'exprimer en anglais. Vous aurez acquis les bases, un bon paquet de vocabulaire et serez prêt à réellement pratiquer la langue.

Pratiquer la langue 

Une chose sur laquelle les enseignants ont toujours insisté, c'est que la pratique est indispensable. Autant pour progresser que pour conserver les acquis. Et encore une fois, ce n'est pas à l'école qu'on pratique la langue. Depuis que je suis ici, je me suis rendu compte qu'une langue se décompose en 4 parties : la lecture, l'écriture, la compréhension orale, l'expression orale. Il est évident qu'ils vont 2 par 2, et que progresser dans l'un fera automatiquement progresser dans son binôme, et toujours un peu aussi les 2 autres. Je vais donc décomposer ces 4 processus. Je les ai ordonnés dans l'ordre, du plus facile ou plus compliqué à acquérir. 

La lecture

Vous aurez déjà commencer cette étape en lisant le livre indiqué plus haut, mais cela n'est absolument pas suffisant. Le problème avec le livre, c'est qu'il mélange français et anglais. C'est beaucoup plus facile de le lire, mais le cerveau n'est pas complètement immergé dans un environnement anglophone. L'acquisition du vocabulaire est donc plus difficile, car elle va se faire par association avec des mots français. Il est beaucoup plus intéressant -du moins, pour moi, c'est comme ça que je le ressens- d'apprendre par association avec des images ou des idées. Bien sûr, ces images ou idées vont aussi avoir une transposition dans votre langue natale, mais l'association à une image est plus facile à retenir. J'en veux pour preuve ces génies qui font des calculs immenses en quelques secondes. A la question "Comment faites-vous ?", tous répondent à peu de choses près la même chose : "Je visualise les chiffres" ou "Je me raconte une histoire".

Donc pour en revenir à l'anglais, il faut lire de l'anglais -étonnant, n'est-ce pas. Mais que lire ? La réponse qui viendra à tout le monde est un livre. Alors oui, lire des livres anglais fonctionnent très bien. Même s'il est difficile de tout comprendre, il est possible de jongler avec un dictionnaire si vraiment c'est indispensable. Mais il faut l'éviter au maximum je pense, encore une fois pour éviter ce processus d'association avec le français. Pour ma part, j'ai déjà lu 3 livres de Dan Brown -l'auteur du Da Vinci Code- sur les conseils de mon frère et j'ai adoré. C'était vraiment difficile au début, mais du moment qu'on comprend l'ensemble de l'histoire, ce n'est pas grave. Je n'ai pas absolument tout compris les phrases et les mots, mais j'ai beaucoup améliorer mon vocabulaire en lisant ces livres.

Mais lire un livre est souvent intimidant. Ou on peut ne pas trouver quelque chose qui nous intéresse. Alors pour ça, j'ai trouvé un remplaçant, et là, vous ne pourrez pas dire qu'il n'y a rien pour vous : internet. Vous avez surement une passion, un centre d'intérêt quelconque et qui peut se trouver sur internet. D'ailleurs, il est possible que vous lisiez déjà à ce propos sur internet, mais en français. Changer vos habitudes, et lisez donc en anglais ! Pour ce faire, direction google.com et commencez à chercher. Attention, il est fort probable qu'il soit encore en français. Pensez à cliquer sur Google.com in English. Pour rechercher en français, utiliser google.fr. Et là, libre à vous de faire preuve d'imagination pour trouver des sites qui vous intéresse. Une fois trouvé, ajouter le à vos marques-page ou mieux, utiliser les RSS s'il en dispose !

L'écriture

Maintenant que vous savez comment se compose une phrase anglaise, que vous avez acquis du vocabulaire, il faut penser à écrire. Là aussi, il va falloir se forcer à écrire, et ce n'est pas forcément facile au début. Une solution simple si vous rédiger un blog : traduisez simplement vos billets. Ainsi vous n'aurez pas d'horror vacui en commençant. C'est ce que j'ai commencé à faire il y a peu de temps. Si vous ne tenez pas de blog, pourquoi ne pas en commencer un ? Ou bien essayer de vous rendre sur des forums et de poser des questions sur les sujets qui vous intéressent, de répondre à d'autres. Dans le même temps, vous devrez lire aussi, donc c'est tout bénéfice. Attention par contre à ne pas aller sur des forums où le langage SMS et abrégé est de mise. Si c'est le cas, fermer le site et trouvez-en un autre.

Et si vous ne trouvez toujours pas votre bonheur, essayer de faire la connaissance d'un anglophone passionné par la même chose que vous et échanger par email. Et sinon, je suis un peu à cours d'idée là. Si vous en avez d'autres, n'hésiter pas à partager.

La compréhension orale

On passe maintenant au second couple d'apprentissage. Et là, ça devient du sérieux ! En effet, quand avec la lecture ou l'écriture, on a tout le loisir d'utiliser un dictionnaire ou de relire quand l'on est pas sûr de bien avoir compris, c'est impossible dans la vraie vie. Il existe des solutions multimédia qui permettent d'apprendre l'anglais. Je n'ai jamais testé, mais je pense que ma réaction serait la même qu'à l'école : boooooooring...

A la place, je vous propose plutôt de regarder des films, des séries ou n'importe quoi d'autre. Si besoin, vous pouvez vous aider des sous-titre. Attention, là encore, évitez à tout prix les sous-titre en français ! Avec le texte en français, vous vous focaliserez dessus et n'écouterez même pas les acteurs parler. Avec de l'anglais, vous entendrez en même temps ce que vous lirez, et donc vous apprendrez plus facilement : le texte correspond exactement au paroles ! Si cela vous fait peur, commencez par des films que vous avez déjà vu, que vous connaissez. Vous n'aurez donc pas de problème pour comprendre l'histoire.

Les séries ont l'avantage d'être pour la plupart du temps facile à comprendre et sont assez court. C'est donc un bon point pour commencer. Mais il est moins évident de trouvez les sous-titres. Si vous pouvez vous passer des sous-titre, un bon plan : les sites des chaînes US propose en ligne les derniers épisodes gratuitement : la Fox pour les Simpsons, Bones, Prison Break, ABC pour Lost, Ugly Betty, Desperate Housewife, Grey's Anatomy et NBC pour Urgences, Heroes, Scrubs (les listes ne sont pas exhaustives !)

Si vous avez des chaînes anglophones chez vous (via internet par exemple), vous pouvez aussi regarder des programmes qui vous intéresse ou les news. Les news sont par contre très difficile au début, car il parle la plupart du temps très vite. Ne vous inquiétez pas donc si vous ne comprenez pas tout au début, c'est normal.

Tous ces exercices vont vous aider à développer votre oreille qui vous permettra de différencier les mots lorsque quelqu'un vous parlera et de vous exprimer. En effet, comment parler si on ne sait pas comment prononcer les mots ?

L'expression orale

Stade ultime de l'apprentissage d'une langue, l'expression orale est le point le plus difficile à acquérir. Et là, j'avoue ne pas avoir vraiment d'autres solutions que de partir en immersion dans un pays anglophone, pour un minimum de 3 mois. Au début, les gens vous comprendront très mal, vous devrez sans doute écrire les choses pour vous faire comprendre, mais à force de pratiquer, vous progresser, c'est évident. Et puis les gens sont pour la plupart du temps très compréhensifs, et vous corrigerons même pour vous faire progresser. C'est d'ailleurs une chose qu'il faut demander aux gens. C'est en effet un très bon moyen pour apprendre, c'est bien connu.

De plus, la question se pose de partir tout seul ou à plusieurs. Là encore, il est beaucoup plus intéressant de partir seul, pour être complètement immergé dans le monde anglophone. Si, pendant mon stage, j'avais été avec des français les soirs et les week-end, j'aurai beaucoup moins progresser car nous aurions sans doute parler français. Depuis que je suis ici, je n'ai parlé français que très rarement : quelques coups de fils en France, des rencontres avec des francophones, et depuis quelques temps, un nouveau graphiste français.

Mon expérience

J'ai donc décris les moyens techniques que j'ai utilisé pour progresser en anglais, et j'espère qu'ils seront utiles à quelques uns. J'ai décris les étapes de l'acquisition dans l'ordre le plus simple et facile, mais cela n'a pas été du tout mon cas. J'ai commencer par le livre indiqué plus haut offert par mon petit frère -qui se moquait de moi d'ailleurs, mais qui veut quand même le lire-, puis je suis parti à Los Angeles, continuant de le lire dans l'avion. Puis j'ai donc du faire face à toutes les facettes de la langue en même temps. Cela a été difficile au début, mais je n'en suis pas mort. Si je ne serai pas parti, je n'aurai jamais atteint le niveau que j'ai actuellement. Encore une fois, le niveau que j'ai n'est pas celui d'un bilingue. Mon accent est terriblement français. Je fais encore des fautes ; beaucoup moins, mais ça m'arrive. Mais maintenant, je me rends compte, et me corrige tout seul. Au final, je comprends les gens : je ne comprends pas tout le temps absolument 100% des mots qu'ils disent, mais je comprends le sens général de la phrase.

C'est aussi un mécanisme important à comprendre. Il n'est absolument pas indispensable de comprendre tout pour comprendre l'idée d'une phrase. De plus, la compréhension de cette phrase permettra peut-être de comprendre le sens de ce que l'on a pas compris. Vous suivez l'idée ?

Enfin, pour revenir sur l'apprentissage visuel et non par association français, j'ai remarqué un phénomène intéressant. Il m'arrive des fois de lire un texte en le comprenant parfaitement, mais il m'est impossible de le traduire en français. Je l'ai compris dans le sens où je visualise ce qui y est dit, mais je ne peux pas le traduire directement en français car je n'ai pas les mots français pour cette image que j'ai. Même chose quand je parle. Je sais le dire en anglais, mais impossible en français... Bon, un petit paragraphe quelque peu bizarre, je vous l'accorde, mais je tenez à partager cette expérience. Cela vous est déjà arrivé ?

J'en ai donc terminer avec ce billet qui me tenait à coeur. Autant pour partager mon expérience et peut-être en aider certains que pour me forcer moi-même à continuer à pratiquer une fois que je rentrerai, pour ne pas tout perde.

Des choses à ajouter ? Des expériences à partager ? Les commentaires sont là pour ça.

I deployed in a website an Ajax reload for every pages. This website use a small audio player and the sound was stopped each time a new page was requested. That wasn't so graceful. The result now is exactly the same website reloading the pages through Ajax, without changing accessibility: I didn't modify ehe HTML source.

I did it quickly bu using jQuery. As this method could be useful for others, I will describe step by step how I made it.
The website which I worked on was pretty small: Amandine Café. Nothing better to train himself in a small example and then apply it in big projects

Current Website Analysis

The first thing to do is to navigate in the whole website to deduct the fixed zone and dynamic zone to reload. You have to identify which links will reload which zones, and what will be happen regarding the reloaded page. For instance you have to worry about the possible javascript control which could be a problem. Write down them and we'll take care of that at the end.
This part was pretty fast for me as the website don't use sub navigation and contains only 5 pages. I found 2 zones delimited by 3 div identified with the id header, page, and footer. Only the div#page vary regarding the pages. That will be only this content that I will update with Ajax.

PHP Side Preparation

Before dealing with the javascript code, we'll update the PHP code of our pages. When an Ajax load is made, we won't reload the full page, but only the content to update. For more simplicity and flexibility, we'll use the same URL than the real links. That's mean we have to be able to provide only the requested content in PHP, without the head page, or the fixed div. If you don't want –can't– do that, take a look to the little bonus at the bottom of this post...
The easiest way to do that is to put the fix part in separate files, named randomly header.php and footer.php. These files will be include in every pages; that's may already the case, using the include function. The thing is now to don't show these parts when the request is an Ajax request. Pretty easy, we'll write a PHP function: isAjax. The file includes will occur only if isAjax is false. In others words:

if (!isAjax())
    inlcude('header.php');

The isAjax function is, as you can see, very very hard:

function isAjax() {
    return array_key_exists('HTTP_X_REQUESTED_WITH', $_SERVER);
}

Actually jQuery –also Prototype, I don't know about the others– add a HTTP_X_REQUESTED_WITH element in the request that you can retrieve in the $_SERVER global variable.
We're done with the PHP preparation pages, which are now able to provide light version of your pages especially for the Ajax request.

Javascript Integration

We're moving now on the real Ajax request programmation. To keep the website totally accessible, which will works exactly in the same way without Javascript, We won't modify any current HTML sources. We'll just include jQuery in all the pages and one other javascript file containing the upcoming code.
The script schema will be:

1. On the page load, intercept all links pointed to .php pages
2. Add an onclick function to make the Ajax request and stop the page change
3. On the click, call the page through Ajax with the same URL and then integrate the result where we want.
4. Stop the click propagation

With jQuery, we're writing that very simply:

$(function() {
    $('a[href*=.php]').click(function() {
        $('#page').load(this.href);
        return false;
    });
});

Very short, isn't it?
Of course this code won't work perfectly in every case. In my example I have to update the body id according to the requested page; that's mean the navigation bar link will going brown as expected by the graphic designer. To do so we can use the third parameter of the load function which will be called once the Ajax load is done. Here is how looks like my function:

$(function() {
    $('a[href*=.php]').click(function() {
        $('#page').load(this.href, null, function() {
            $('body').attr('id', this.href.substring(this.href.indexOf('.')));
        });
        return false;
    });
});

If you read the code in the live site, that's not at all like that because I occured other problems.

Little Bonus

If you can't–don't want– deploy the PHP cutting for the Ajax request, don't stop right now! Firstly it could be possible to reload the whole page. This solution will be very sad and you'll probably occurs many others problems.
jQuery will help. Indeed, in the URL provided to the load function, you can specifiy a HTML selector to filter the result and show only the part you want to.
In my example the call could become simply:

$('#page').load(this.href+' #page');

I dissuade to use this technique as that's mean you will reload the whole page. So we loose the Ajax utility to reduce data transfer between clients and server.

If it's not that simple?

Give proof of imagination!
As I already thought about this question, I'll give you some example soon. This post is yet consistent and you can start to enjoy. Finally I hope you won't wait me to do that... Or if you have a website where do you want deploy this kind of solution, let me know and I will use it as my example.

Express Yourself!

How did you find this post? Interesting, boring, totally useless, can do better?
Do you have some questions? Suggestions?
Did you read some English mistakes?
Use the comments!

Version française de ce billet

Aujourd'hui, j'ai implanté sur un site un chargement des pages en Ajax parce que le site intégre un petit lecteur son et couper le son à chaque fois et quelque chose qui n'est pas des plus agréable. Le résultat est le même site avec un rechargement des pages en Ajax, sans pour autant perdre en accessibilité, puisque la source HTML n'a été en aucun cas modifié.

J'ai fait ça rapidement en utilisant notamment grâce à jQuery. Comme la méthode utilisée peut servir à d'autres, je vais vous décrire étape par étape comment j'ai procédé.
Le site sur lequel j'ai réalisé ça était très petit est très simple : Amandine Café. Mais rien de mieux que de s'exercer sur un petit exemple pour ensuite l'appliquer à des projets plus conséquents.

L'étude du site actuel

La première chose à faire est de naviguer sur le site de fond en comble pour en déduire les zones fixes et les zones à recharger. Il faudra identifier quels liens vont recharger quelles zones, et tout ce que cela va engendrer au niveau de la page qui ne sera pas rechargé comme elle l'ai actuellement. On pense ici aux éventuels contrôles javascript qui peuvent ne pas fonctionner correctement. Il faut les noter pour les corriger au dernier moment.
Le tour du propriétaire s'est fait très vite pour moi puisque le site n'intègre pas de sous navigations et ne contient que 5 pages. On peut identifier 3 zones délimiter par des div avec les identifiants header, page et footer. Seule la div#page change selon les pages. C'est donc uniquement ce contenu que nous allons recharger en Ajax.

La préparation du côté PHP

Avant de s'attaquer au javascript, nous allons modifier les fichiers PHP de nos pages. Lors du chargement Ajax de nos pages, nous n'allons pas recharger la page complète, mais uniquement le contenu à modifier. Et pour plus de simplicité et de flexibilité du site, nous allons utiliser les mêmes URL que les liens réels. Il faut donc être capable du côté de PHP de n'afficher que le contenu demandé, sans les parties head de la page, ou les div fixes. Si vous ne pouvez –voulez– pas réaliser ceci, regarder du côté du petit bonus un peu plus bas...
Le plus simple pour réaliser ceci est de mettre les parties fixes dans des fichiers séparés, nommés au hasard header.php et footer.php. Ces fichiers sont inclus dans toutes les pages; ce qui est d'aileurs peut-être déjà le cas, grâce à include. Il va donc s'agir de n'afficher ses parties que lorsqu'on est pas dans une requête Ajax. Rien de plus simple, nous allons écrire une fonction PHP isAjax. L'inclusion des fichiers header.php et footer.php se fera donc à la seule condition que isAjax est faux. Autrement dit:

if (!isAjax())
    inlcude('header.php');

La fonction isAjax est, comme vous allez le voir, très très compliqué :

function isAjax() {
    return array_key_exists('HTTP_X_REQUESTED_WITH', $_SERVER);
}

En effet, jQuery –Prototype aussi, je ne sais pas pour les autres– ajoute un élément HTTP_X_REQUESTED_WITH dans la requête que l'on peut récupérer avec la variable globale $_SERVER.
Nous en avons donc terminé avec la préparation des pages PHP, qui vont être capable de fournir des versions light des pages spécialement pour les requêtes Ajax.

L'installation du Javascript

Nous en arrivons donc à la programmation véritable des requêtes Ajax. Pour garder un site totalement accessible, qui fonctionnera exactement de la même façon sans Javascript, nous n'allons en aucun cas modifier les sources HTML des pages actuelles. Nous allons plutôt inclure jQuery dans toues les pages, et un autre fichier javascript contenant le code qui va arriver.
Le schéma du script sera le suivant :

1. Au chargement de la page, intercepter tous les liens qui pointent vers des pages .php
2. A ces liens, leur appliquer une fonction sur le click pour procéder à la requête Ajax plutôt qu'au changement de page
3. Lors du click, appelez en Ajax la page demandée (avec la même url) et intégrer le résultat là où on le désire.
4. Arrêter la propagation du click

Pour jQuery, on écrira ceci d'une façon très simple :

$(function() {
    $('a[href*=.php]').click(function() {
        $('#page').load(this.href);
        return false;
    });
});

Très court, n'est-ce pas ?
Bien sûr, cet exemple ne fonctionnera pas dans tous les cas. Dans mon cas par exemple, je dois modifier l'identifiant du body en fonction de la page demandée pour changer le lien en marron du menu. Pour ce faire, on peut utiliser le 3ème paramètre de la fonction load qui sera appelé une fois le chargement ajax terminé. Voilà à quoi ressemble ma fonction :

$(function() {
    $('a[href*=.php]').click(function() {
        $('#page').load(this.href, null, function() {
            $('body').attr('id', this.href.substring(this.href.indexOf('.')));
        });
        return false;
    });
});

Bon dans la réalité, ce n'est pas du tout ça, mais c'est car vraiment spécifique au site.

Petit Bonus

Si vous ne pouvez –voulez– pas mettre en place le découpage du fichier spécifique en PHP pour les reqêtes Ajax, ne jetez pas l'éponge tout de suite ! Il serait tout d'abord possible de mettre à jour la page complète, mais cela ne serait pas très propre et engendrai sûrement beaucoup d'autres problèmes.
Mais jQuery est là pour nous aidé. En effet, dans l'URL de la fonction load, il est possible de spécifier un sélecteur HTML pour filtrer le résultat et ainsi n'afficher que ce qui nous intéresse.
Dans mon exemple, l'appel à la fonction load deviendrait simplement :

$('#page').load(this.href+' #page');

Je ne vous conseille pas cette technique, puisque cela veut dire que vous allez recharger la page complète, donc on perd un peu l'utilité de l'Ajax qui est de réduire les transferts de données entre le client et le serveur.

Et si c'est plus compliqué ?

A vous de faire preuve d'imagination !
Comme j'ai déjà beaucoup réfléchi à la question, je vous donnerai plusieurs pistes d'ici une semaine au deux. Ce billet est déjà bien conséquent et vous pouvez déjà vous amuser. Enfin, j'espère que vous ne m'attendiez pas pour ça... Ou bien si vous avez un site sur lequel vous aimeriez implémenter une telle solution, demandez-moi et je ferai mon exemple dessus.

La parole est à vous !

Comment trouvez-vous ce billet ? Intéressant, totalement inutile, peut mieux faire ?
Avez-vous des questions par rapport à ça ? des suggestions ?
Utilisez les commentaires !

English Version of this post

Si vous réaliser l'intégration de sites Web, vous vous êtes surement déjà posé la question de quelle propriété allait être appliqué, selon quel ordre d'importance.

Sitepoint a écrit un article pour vous aidé dans la compréhension de ce mécanisme.

Je vous traduit ici le principe de base, en 5 étapes (par déclaration, on entend définition d'une propriété à appliquer comme la couleur du texte) :

1. Si une déclaration est faite dans l'attribut style de l'élément, (un style en ligne, ex style="color: red;"), elle a la plus grande spécificité. S'il n'y a aucune déclaration en ligne, passer à l'étape 2.
2. Compter le nombre de sélecteur d'ID (#monId). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre de sélecteur d'ID (ou 0), passez à l'étape 3.
3. Compter le nombre de sélecteur de classes (.maClass), de sélecteur d'attributs ([type="submit"]) et de pseudo classes (:hover). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre (ou 0), passez à l'étape 4.
4. Compter le nombre de sélecteur de type (div) et de pseudo éléments (:first-letter). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre (ou 0), passez à l'étape 5.
5. Si deux ou plusieurs sélecteur ont la même spécificité, on applique la dernière règles trouvées.

Bien sûr, à chaque étape, on ne garde que ceux qui arrivent en tête du classement.

Puis l'article va plus loin en indiquant la méthode de calcul et une représentation en matrice, pour finir sur la gestion des éléments un peu plus poussé comme le sélecteur global * ou d'élément enfant avec >.

Un article à lire pour être conscient de comment fonctionne réellement les CSS, et s'éviter quelques maux de têtes dans certains cas...

Un petit truc en MySQL qui j'en suis sûr servira à plus d'un.

Pour California Apparel News, cela fait plusieurs fois que j'utilise cette technique qui marche à merveille.

Le problème est le suivant : Comment récupérer les 10 derniers ajouts d'une table mais triés par ordre alphabétique ?

La solution qui vient tout de suite à l'esprit est :

SELECT * FROM table ORDER BY date DESC, titre ASC LIMIT 0,10

On récupère bien les 10 derniers résultats, mais ils ne sont en aucun cas triés par ordre alphabétique. En effet, le tri se fait d'abord sur la date dans l'ordre décroissant, puis sur le titre. Le tri sur le titre ne sera effectif que si on a des éléments à la même date. Un exemple de ce qui pourrait sortir de cette requête est :

• 11/01/2008 - Il fait beau à Los Angeles
• 09/01/2008 - Nuageux mais pas froid à LA
• 03/01/2008 - Il pleut à Los Angeles
• 03/01/2008 - Tempête sur Los Angeles

(Bon que 4 résultats, je ne me souviens pas d'autres choses niveau météo ici)

On a les bons résultats, mais pas triés correctement. Alors c'est sûr, on pourrait écrire une fonction PHP pour trier les résultats et c'est bouclé. Mais une fonction de tri n'est jamais évidente à écrire et trier dès la requête augmentera les performances.

La solution est d'utiliser une sous-requête dans la clause FORM; la sous-requête récupèrera les 10 derniers résultats, la requête principal les triera par ordre alphabétique. La requête complète :

SELECT * FROM (SELECT * FROM table ORDER BY date DESC LIMIT 0,10) AS subSelect ORDER BY titre ASC

Noter le AS subSelect qui est indispensable, comme indiquée dans la doc.

Le résultat sera :

• 11/01/2008 - Il fait beau à Los Angeles
• 03/01/2008 - Il pleut à Los Angeles
• 09/01/2008 - Nuageux mais pas froid à LA
• 03/01/2008 - Tempête sur Los Angeles

La différence entre les 2 résultats est minime, mais vous avez compris !

Nous voilà donc avec nos résultats tout bien trié comme on le voulait !

J'ai utilisé ça à 2 endroits :

• Trends pour le menu déroulant
• Fashion Slideshow pour le menu déroulant aussi

En espérant que vous aurez l'occasion d'utiliser cette petite technique qui gagne du temps.