Le programme
La page du programme de la Kiwi Partÿ permet d'aborder deux nouveaux aspects : la liste en accordéon et le Grid Layout.
La liste en accordéon se fait ainsi :
<div data-role="collapsible-set">
<div data-role="collapsible" data-content-theme="d">
<h3>9H - Accueil</h3>
<div class="margesinternes">
<p>Les portes de l'Epitech Strasbourg seront ouvertes aux inscrits confirmés<br />
Pensez au timing, les conférences débuteront à l'heure !</p>
</div>
</div>
<div data-role="collapsible" data-content-theme="d">
<h3>9H30 - Référencement : Google et nouvelles balises</h3>
<div class="margesinternes">
<p>Google est un organisme vivant...</p>
</div>
</div>
...
</div>
Il est assez aisé de reconstruire le programme. Seul souci : il y a des conférences en parallèle sur certaines plages horaires.
C'est là qu'entre en jeu le Grid Layout. Il permet de positionner des contenus sur des colonnes (non visibles). La syntaxe est extrêmement simple :
<div class="ui-grid-a">
<div class="ui-block-a">Le contenu de la colonne de gauche</div>
<div class="ui-block-b">Le contenu de la colonne de droite</div>
</div><!-- /grid-a -->
Il est possible d'aller jusqu'à 5 colonnes : ui-grid-a pour 2 colonnes, ui-grid-b pour trois colonnes, etc. ui-grid-d pour 5 colonnes. ui-block-a,b,c,d,e servant eux à faire les colonnes. Ce qui nous donne :
<div data-role="collapsible" data-content-theme="d">
<h3>10H30 - Responsive Web Design<br>
VS<br>
10H30 - L'accessibilité, pour qui? <br>
11H30 - Développer une application avec PhoneGap et Sencha Touch
</h3>
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="margesinternes">
<h4>Responsive Web Design</h4>
<p>Le Web est aujourd'hui sur nos mobiles...</p>
</div>
</div>
<div class="ui-block-b">
<div class="margesinternes">
<h4>L'accessibilité, pour qui?</h4>
<p>Revue des profils pour qui l'accessibilité est appréciable, utile et/ou nécessaire.</p>
<h4>Développer une application avec PhoneGap et Sencha Touch</h4>
<p>Développer une application iOS...</p>
</div>
</div>
</div>
</div>
Le Grid Layout n'a pas de marge entre les cellules, ni de padding. Ceci m'a posé un problème quand on diminue la résolution, le programme était peu aéré. Vous aurez noté l'utilisation de <div class="margesinternes"> dans chaque cellule. Cela permet d'ajouter un peu d'espacement interne (une marge de 0.5em) dans chaque cellule pour ce besoin précis sans aller changer les propriétés du Grid Layout. Ainsi, si il sera réutilisable (et cela m'évite accessoirement d'aller mettre les doigts dans le cambouis).
Les orateurs
La partie des orateurs comporte deux aspects : un autre type de liste ainsi que les boutons.
La liste avec les photos est très simple à obtenir :
<ul data-role="listview" data-inset="true">
<li>
<a href="olivier-andrieu.php" data-transition="slide">
<img src="img/orateurs/olivier-andrieu.jpg" alt="" />
<h3>Olivier Andrieu</h3>
<p>Expert référencement, Abondance.com</p>
</a>
</li>
...
</ul>
L'exemple est directement tiré de la documentation de jQuery Mobile sur les listes.
Les boutons groupés sur les pages des orateurs se font très facilement :
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="http://jeremie.patonnier.net/" data-role="button" data-icon="forward" data-iconpos="right" target="_blank">Site</a>
<a href="https://twitter.com/#!/JeremiePat/" data-role="button" data-icon="forward" data-iconpos="right" target="_blank">Twitter</a>
</div>
Ce sont de simples liens auxquels il suffit d'ajouter data-role="button". Ensuite dans cet exemple, chacun de ces boutons comporte une icone positionnée à droite. data-role="controlgroup" data-type="horizontal" data-mini="true" permet de les grouper horizontalement en en réduisant légèrement la taille.
Intéressons-nous au bouton de retour à la page d'accueil sur la liste des orateurs :
<a href="index.php" data-role="button" data-mini="true" data-inline="true" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse">Accueil</a>
Si la profusion d'attributs peut sembler indigeste ou compliquée, c'est une fausse impression ! C'est extrêmement simple, dans l'ordre :
-
data-role="button": c'est un bouton (!)… -
data-mini="true": de taille réduite… -
data-inline="true": qui va s'afficher en-ligne (prendre uniquement la largeur dont il a besoin et pas toute la largeur comme un bloc)… -
data-icon="arrow-l": qui aura pour icone une flèche vers la gauche… -
data-iconpos="left": positionnée à gauche… -
data-transition="slide": qui doit déclencher la transition slide… -
data-direction="reverse": mais pas dans le sens normal, dans le sens opposé (comme un bouton de retour).
Rien de bien sorcier, n'est-ce pas ? ;)