A propos de cette page

A défaut de trouver une page simple et accessible sur tous les écrans (smartphones et tablettes) pour simuler des pronostics, je me suis lancé dans la création de iProno pour la coupe du monde 2014.

Voici la version de iProno pour l'EURO 2016.

Si l'aspect technique vous intéresse, vous trouverez ci-dessous tous les éléments nécessaires à sa conception.

Page conçue et réalisée par François Leysour de Rohello. blog

Simple et Pratique

Quelques clics suffisent pour faire un pronostic complet.

Phase de groupe

• Saisissez un score pour chaque match
• Synchronisez si vous le souhaitez sur la phase finale

Phase finale

• Sélectionner le 1er et le second de chaque groupe.
• Sélectionner les 4 meilleurs troisièmes
• Sélectionner le vainqueur de chaque match.
• Vous pouvez également saisir un score pour chaque match

La cohérence des résultats est toujours assurée. Si pour un groupe donné, vous sélectionner le même pays pour la première place, seconde ou troisième place, la sélection s'adapte automatiquement pour rester cohérente.

Pour chaque pronostic vous pouvez saisir un titre. Passer d'un pronostic à l'autre en cliquant sur son numéro : 1,2 ou 3

Réglement de l'EURO 2016

Extrait du réglement consultable sur le site de l'UEFA

Article 18 Egalité de points et qualification pour les matches à élimination directe de la phase finale

18.01 En cas d’égalité de points de plusieurs équipes du même groupe à l'issue des matches de groupe de la phase finale, les critères suivants sont appliqués dans l'ordre indiqué pour déterminer le classement:

a. plus grand nombre de points obtenus dans les matches disputés entre les équipes concernées;
b. meilleure différence de buts dans les matches disputés entre les équipes concernées;
c. plus grand nombre de buts marqués dans les matches disputés entre les équipes concernées;
d. si, après l’application des critères a) à c), plusieurs équipes sont toujours à égalité, les critères a) à c) sont à nouveau appliqués exclusivement aux matches entre les équipes concernées afin de déterminer leur classement final. Si cette procédure ne donne pas de résultat, les critères e) à h) s’appliquent;
e. meilleure différence de buts dans tous les matches du groupe;
f. plus grand nombre de buts marqués dans tous les matches du groupe;
g. comportement en termes de fair-play dans la phase finale, comme défini à l'annexe C.5.1;
h. position dans le classement par coefficient des équipes nationales de l’UEFA (voir l'annexe B.1.2.b).

18.02 Si deux équipes ayant le même nombre de points et le même nombre de buts marqués et encaissés se rencontrent dans leur dernier match de groupe et qu’elles sont toujours à égalité à la fin de ce match, leur classement final est déterminé par des tirs au but du point de réparation (voir l'alinéa 19.02 à l'alinéa 19.04), à condition qu'aucune autre équipe du groupe n'ait le même nombre de points à l’issue de tous les matches de groupe. Si plus de deux équipes ont le même nombre de points, les critères indiqués à l'alinéa 18.01 s’appliquent.

18.03 Les quatre meilleurs troisièmes sont déterminés sur la base des critères suivants, appliqués dans l'ordre indiqué aux matches de groupe de la phase finale:

a. plus grand nombre de points obtenus;
b. meilleure différence de buts;
c. plus grand nombre de buts marqués;
d. comportement en termes de fair-play dans la phase finale, comme défini à l'annexe C.5.1;
e. position dans le classement par coefficient des équipes nationales de l’UEFA (voir l'annexe B.1.2.b).

Répartition des 4 meilleurs troisièmes

Lecture du tableau, exemple avec la première ligne : A B C D 3C 3D 3A 3B
1A désigne premier du groupe A... etc
Les 4 meilleurs sont A B C D alors 1A jour contre 3C, 1B joue contre 3D...etc

         1A 1B 1C 1D
A B C D  3C 3D 3A 3B
A B C E  3C 3A 3B 3E
A B C F  3C 3A 3B 3F
A B D E  3D 3A 3B 3E
A B D F  3D 3A 3B 3F
A B E F  3E 3A 3B 3F
A C D E  3C 3D 3A 3E
A C D F  3C 3D 3A 3F
A C E F  3C 3A 3F 3E
A D E F  3D 3A 3F 3E
B C D E  3C 3D 3B 3E
B C D F  3C 3D 3B 3F
B C E F  3E 3C 3B 3F
B D E F  3E 3D 3B 3F
C D E F  3C 3D 3F 3E

Liste des matchs

Pratique : Une liste de tous les matchs entièrement filtrable avec un ou plusieurs critères séparés par une virgule.

• les matchs d'un (ou plusieurs) pays. ex : Allemagne,France
• les matchs à un horaire donné. ex : 21:00
• les matchs à un jour donné. ex : 11/06
• les matchs d'un (ou plusieurs) groupe. ex : A,C
• les matchs dans une ville. ex : Saint-Denis,Nice
• Saisissez 1/ pour lister tous les matchs de la seconde phase. ex : 1/

Partager et sauvegarder

Partager simplement avec une URL. Pas d'inscription, pas de login, pas de mot passe oublié. Vous pouvez partager l'ensemble de vos pronostics via une URL courte.

Vous pouvez également sauvegarder dans votre navigateur vos pronostics (via un cookie). Cliquez sur le bouton 'sauvegarder' sur la page partage.

Mise à jour, évolutions et retours utilisateurs

iProno est en version béta.

Vous pouvez très facilement faire des suggestions d'amélioration ou signaler un dysfonctionnement via le formulaire suivant.

jQuery Mobile

Cette page utilise le framework jQuery Mobile (JQM) dans sa version 1.4.5

Avantage
Vous bénéficiez de la librairie Jquery enrichie de nombreux widgets (thème, boutons, checkbox, filtre...) Vous codez une page web qui sera lisible sur tous les écrans tactiles. Néanmoins ce framework manque encore de maturité, il faut impérativement prendre le temps de lire la documentation avant de démarrer votre projet.

Inconvénient
Pour les écrans mobiles (smartphone, tablette), JQM se révèle parfois lent. Par exemple, si vous touchez un bouton il y a un temps de latence avant l'affichage de la popup par exemple.

Pré-requis
Un navigateur moderne qui supporte le HTML 5 et CCS 3.

Gestion de l'URL courte

L' URL courte est générée via l'API du service de Google : URL shortener

Resources tehniques

L'indispensable site stackoverflow
Le blog gajotres avec des billets sérieux et très précis sur JQM

Resources graphiques

Les drapeaux sur le site icondrawer
Le ballon de foot trouvé sur findicons
Les icones des réseaux sociaux sur le site graphicsfuel