Catégories
Développement multiplateforme

Plus loin avec jQuery Mobile : 1ère Partie (application de gestion des stages)

Logo jQuery MobileDans un précédent article, nous avons fait une introduction au framework jQuery Mobile. Ce puissant outil permet de construire de très belles applications basées sur les technologies du web (JavaScript, HTML & CSS). Nous allons dans cette série de 3 articles, présenter le framework de façon un peu plus avancée.

Pour ce faire, nous nous proposons de travailler sur un projet complet à chaque article. Chaque projet suivra une rapide analyse des besoins, une phase de conception, une phase de développement et une phase de tests, tout cela pour vous convaincre de la maturité de ce framework, qui peut être utilisé dans le cadre d’un projet d’entreprise à échelle industrielle 🙂

Pour ce premier article, nous allons créer une application simple de Gestion des stages.

Contexte et analyse des besoins

Un établissement universitaire souhaiterait mettre en place une solution mobile de gestion des stages, afin de permettre à ses étudiants, très high-tech, et roulant au Samsung Galaxy S II et autres smartphones derniers cris, de postuler à des offres de stages directement depuis leur plateforme mobile.

Avec cette application, il devra être possible de :

  • Consulter des offres de stages
  • Postuler à une offre
  • Voir/Afficher ses candidatures
  • Rechercher un stage, en se basant sur des critères comme le lieu (ville, département, la durée
  • Gérer son profil/compte

 

Conception de l’application

Maquettage ou sketching

Afin d’avoir une idée de l’application finale à mettre en place, il est absolument (c’est un avis personnel) nécessaire de s’aider d’une maquette. Il existe de très bon outils qui vous aideront à faire des maquettes (sketchs). La version Windows 7 de Paint est suffisamment riche pour produire des maquettes assez intéressantes. Pour notre exemple, je me suis servi du logiciel gratuit Pencil, avec lequel j’ai assez rapidement produit les croquis ci-dessous :

Login - dentificationTableau de bord

Base de données

Nous allons utiliser 3 tables pour réaliser notre application. Cet article n’étant pas un cours de conception de base de données, nous n’allons pas nous attarder dessus ou produire un schéma super optimisé. Voici ce que je vous propose :

 

Schéma de base de données
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 
CREATE TABLE Entreprise(  id int NOT NULL AUTO_INCREMENT,  nom varchar(100) NOT NULL,  email varchar(50) NOT NULL,  adresse varchar(50) NOT NULL,  code_postal int(5) NOT NULL,  ville varchar(50) NOT NULL,  pays varchar(50) NOT NULL,  telephone varchar(10) NOT NULL,  fax varchar(12) NOT NULL,  url_logo varchar(512) NOT NULL,  PRIMARY KEY (id) );   CREATE TABLE Stage(  id int NOT NULL AUTO_INCREMENT,  id_entreprise int,  type varchar(4),  branche varchar(10) NOT NULL,  filiere varchar(10) NOT NULL,  sujet varchar(250) NOT NULL,  dateAjout timestamp,  PRIMARY KEY (id),  FOREIGN KEY(id_entreprise) REFERENCES Entreprise(id) );   CREATE TABLE Etudiant(  id int NOT NULL AUTO_INCREMENT,  id_stage int,  nom varchar(45) NOT NULL,  prenom varchar(45) NOT NULL,  email varchar(50) NOT NULL,  branche varchar(10) NOT NULL,  filiere varchar(10) NOT NULL,  PRIMARY KEY (id),  FOREIGN KEY(id_stage) REFERENCES Stage(id) );

 

 

Développement avec jQuery Mobile

C’est ici que commencent les choses sérieuses avec jQuery Mobile. Nous allons donc implémenter ce que nous venons de concevoir.

L’interface utilisateur sera donc développer à l’aide des composants du Framework jQuery Mobile, tandis que l’application sera rendue dynamique à l’aide de PHP.

Page de connexion

Rien de bien méchant par ici. L’utilisateur doit simplement se connecter à l’aide de son e-mail et d’un mot de passe. Nous considérerons que ceux-ci ont été généré en début d’année, à l’inscription de l’étudiant au mois de septembre par exemple. Nous aurons donc au moins besoin des éléments html suivant :

  • Un formulaire
  • Deux labels et deux champs textes : pour le login et le mot de passe. (Voir la documentation pour les champs texte)
  • Un bouton : pour valider les entrées. (Voir la documentation pour les boutons)

Voici comment tout cela s’écrit avec jQuery Mobile :

 

Première vue jQuery Mobile
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 
<!DOCTYPE html>  <html lang="fr">  <head>  <meta charset="utf-8">  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />  <title>Gestion des Stages</title>  <link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.min.css" />  <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>  <script type="text/javascript" src="js/jquery.mobile-1.0a4.1.min.js"></script>  </head>  <body>  <div data-role="page">    <div data-role="header">  <h1>Gestion des stages</h1>  </div><!-- /Entete de la page -->    <div data-role="content">  <form action="accueil.php" method="post">  <fieldset data-role="fieldcontain">  <caption>Connexion</caption>  <p>  <label for="email">Email :</label>  <input type="text" name="email" id="email" />  </p>  <p>  <label for="pwd">Mot de passe :</label>  <input type="password" name="pwd" id="pwd" />  </p>  <p>  <input type="submit" value="Valider" data-theme="b" />  </p>  </fieldset>  </form>  </div><!-- /Formulaire de connexion -->    <div data-role="footer">  <h4>&copy; <a href="http://www.mobile-tuts.com" title="Mobile-tuts! Actualités et tutoriels autour du mobile">Mobile-tuts!</a> 2011</h4>  </div><!-- /Pied de page -->    </div><!-- /Page Login -->  </body> </html>

 

 

ATTENTION ! les fichiers propres au Framework doivent être téléchargés (jquery.mobile-1.0a4.1.min.css, jquery-1.5.2.min.js, jquery.mobile-1.0a4.1.min.js ) et installé sur votre serveur d’exécution ou sinon précisez dans l’entête à la place des chemins relatifs, les liens absolus, à savoir :

  • http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css
  • http://code.jquery.com/jquery-1.5.min.js
  • http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js

Rien de bien méchant par ici, juste du déjà vu dans un article d’introduction au framework. Quelques explications s’imposent tout de même.



data-role="fieldcontain" <!-- Permet un affichage optimal des champs du formulaire -->

data-theme="b" <!-- Permet de donner au bouton "Valider" sa couleur bleue-->

Le résultat en image :
Accueil Login

Un script php, défini dans le paramètre action du formulaire, se chargera de gérer la session d’identification. Nommons-le accueil.php. Le script ici sert uniquement d’exemple, et n’est donc pas exceptionnel. Je vous invite à l’améliorer et le sécuriser (Le but étant de surtout se focaliser sur jQuery) :

Fichier de connexion
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 
<?php /**  * @author Charles  * @copyright Copyright 2011, Mobile-tuts!  * @version 1.0  */   // fichier de connexion include_once 'config.php';   //Récupération des données du form. $session = $_POST['session']; $email = $_POST['email']; $mdp = $_POST['mdp'];   switch ($session) {    // Connexion au Dashboard  case "login":  //Test de validité de l'@  if (($email != "") && le_user_exist_bdd($email, $mdp)) {  include_once 'dashboard.php';  } else {  include_once 'index.php';  }  break;    // Deconnexion du Dashboard  case "logout":  include_once 'index.php';  break; } ?>  

 

Tableau de bord

Le tableau de bord (dashboard.php) offre une vue générale des offres de stages. On peut cliquer dessus pour avoir plus de détails. Voici comment cela s’écrit avec jQuery Mobile :

 

Dashboard
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 
<?php /**  * @author Charles  * @copyright Copyright 2011, Mobile-tuts!  * @version 1.0  */ require_once 'config.php'; ?> <!DOCTYPE html> <html lang="fr">  <head>  <?php include_once 'entete.php';?>  </head>  <body>  <div data-role="page" data-add-back-btn="false">    <div data-role="header" data-theme="b">  <h1>Tableau de bord</h1>  <a href="accueil.php?session=logout" data-icon="delete" class="ui-btn-right">Quitter</a>  </div><!-- /Entete de la page -->    <div data-role="content" id="login_page">  <span class="ui-btn-left"> Bonjour <span style="font-weight: bolder;"></span></span>  <h3>Liste des offres :</h3>  <?php include_once 'tabs/offres.php'; ?>  </div><!-- /Contenu principal -->    <div data-role="footer" data-theme="c">  <div data-role="navbar">  <ul>  <li><a href="#" class="ui-btn-active" data-icon="check">Offres</a></li>  <li><a href="tabs/candidatures.php" data-icon="star">Candidatures</a></li>  <li><a href="tabs/search.php" data-icon="search">Rechercher</a></li>  <li><a href="tabs/profil.php" data-icon="info">Profil</a></li>  </ul>  </div><!-- /navbar -->  <h4> Gestion des stages &copy; <a href="http://www.mobile-tuts.com" title="Mobile-tuts! Actualités et tutoriels autour du mobile">Mobile-tuts!</a> 2011</h4>  </div><!-- /Pied de page -->    </div><!-- /Page Login -->  </body> </html>

 

  • A la ligne 17, data-add-back-btn= »false » interdit l’affichage du bouton de retour, qu’ajoute automatiquement  jQuery Mobile lorsqu’il détecte un historique; le dashboard étant la première page que l’ont affiche,  nous n’aurons pas besoin de revenir en arrière, sauf en cas de déconnexion, ce qui est déjà gérée par le bouton Quitter à la ligne 19 du script dashboard.php.
  • A la ligne 19, la classe ui-btn-right permet d’afficher (positionner) le bouton Quitter en haut à droite de la page; ui-btn-left permettant bien sûr d’afficher le bouton à gauche de l’écran.
  • Le paramètre data-icon permet d’ajouter une icône à un bouton. Ainsi, data-icon= »delete » ajoute une icône sous forme de croix au bouton Quitter à la ligne 19. On retrouve d’autre utilisation de ce paramètre aux lignes 31 à 34. Voir la documentation sur ce paramètre.
  • A la ligne 29, data-role= »navbar » permet de définir une barre de navigation sous forme d’onglets. Il suffit ensuite de les afficher à l’aide de simples listes html (<ul>, <li>,…)

Comme vous l’aurez surement remarqué, le paramètre data-role apparait souvent, et permet de définir sémantiquement la structure de notre écran.

Le fichier php affichant la liste des offres (On utilisera des données factices) s’écrit :

Affichage d’une liste d’offres
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 
<?php /**  * @author Charles  * @copyright Copyright 2011, Mobile-tuts!  * @version 1.0  */ ?> <div data-role="content" id="liste_offres">  <ul data-role="listview" data-filter="true">  <li><a href="#">  <img src="images/logo_air-france.png" alt="Logo Air France" />  <h3>Air France</h3>  <p>Stage de développement de Systèmes embarqués temps réels</p>  </a></li>    <li><a href="#">  <img src="images/logo_atosorigin.jpg" alt="Logo Atos Origin" />  <h3>Atos Origin</h3>  <p>Stage de développement Java EE</p>  </a></li>  <li><a href="#">  <img src="images/logo_capgemini.gif" alt="Logo Capgemini" />  <h3>Cap gemini</h3>  <p>Stage Consultant Systèmes d'information</p>  </a></li>  <li><a href="#">  <img src="images/logo_google.jpg" alt="Logo Google" />  <h3>Google France</h3>  <p>Stage Ingénieur Réseaux et Systèmes</p>  </a></li>  </ul> </div><!-- / Liste des offres de stages -->

 

  • A la ligne 9, data-role= »listview » permet de définir une ListView (composant qui affiche des liens verticalement, et pouvant être triés par catégorie), tandis que data-filter= »true » permet de filtrer les données en fonction des mots-clés. Il suffit d’entrer quelques lettres pour voir le filtrage en action et n’afficher que le résultat voulu (voir la 2e image ci-dessous) :

Tableau de bord, listview jQuery Mobile

 

Et avec le filtrage on a ça :

Tableau de bord, listview filtrage jQuery Mobile

Dans 2 prochains articles, nous étudierons d’autres cas d’utilisation du Framework. En attendant, n’hésitez pas à visiter la documentation en ligne (Voir ci-dessous) et à voter pour cet article 🙂

Pour plus d’informations :

 <input type="submit" value="Valider" />

Catégories
Développement multiplateforme

Pourquoi et comment adapter son site web au format mobile

SmartphonesDévelopper pour le mobile est devenu est sujet très à la mode, de plus en plus de personnes se connectant à internet depuis leur smartphone. L’on se souvient de cette époque où les entreprises s’arrachaient ces nouveaux explorateurs d’internet qu’étaient les développeurs web. Aujourd’hui la donne n’a pas tout a fait changé, cependant, les internautes ont juste un peu changé leurs habitudes, car ils veuillent désormais disposer d’internet à tout moment, et si possible sans trop d’encombrement. Beaucoup optent pour le notebook (La sortie prochaine des Chromebooks, le 15 juin, devraient les intéresser), c’est notamment le cas des grands voyageurs, quand d’autres, grands citadins, se tournent vers les smartphones.

L’entreprise tout comme le particulier Web 2.0, voire 3.0, se doivent  donc de s’adapter, en repensant l’image que donne leur site d’eux. Afin d’atteindre cet objectif, les questions qui se posent sont souvent :

  • Doit t-on réécrire un site from scratch et entièrement customisé pour le web mobile ? Ou juste alléger le site en fonction du visiteurs ?
  • Faut t-il développer une application native ou application multiplateforme ?

A vrai dire, tout dépend de certains paramètres comme le temps imparti, la taille de l’équipe de développement et le type d’application ciblé.

A mon avis, faire le choix d’une application native est vraiment intéressant si l’on souhaite pousser au maximum les capacités de l’application. Une application de réalité augmentée par exemple ne peut et ne doit être faite qu’en application native. On pourra ainsi bénéficier de toute la puissance de l’appareil (accélération matérielle, rendu graphique,…).

Par contre un site d’actualités transformé en application mobile peut se faire sans difficulté grâce aux technologies du web (HTML, CSS, JavaScript). Ce qui aura d’ailleurs l’avantage de permettre aux internautes une transition facile du site web vers l’application mobile. On sait tous à quel point l’acceptabilité d’une application est un problème, alors tant qu’on peut la contourner on ne va pas s’en priver. Un internaute visitant le site via son mobile sera par exemple redirigé vers la version mobile du site après détection du type d’appareil à l’aide d’un script côté serveur par exemple ou encore en JavaScript. Un exemple avec la librairie PHP Tera-WURFL est expliqué ici.

Un autre paramètre important est le nombre de personnes dans l’équipe de développement. Si l’on dispose de beaucoup de monde, alors autant pleinement exploiter les plateformes de développement proposées par chaque OS mobile (Android, iOS, Blackberry OS,…) et négocier avec le client sur la durée de développement et donc des couts finaux, lui promettant une application qui changera la face de son entreprise.

Une solution pour adapter son site web en production est l’utilisation des médias queries. Cette méthode évite de devoir faire des redirections, de reconstruire son site avec les technologies du web ou en natif. En fait l’idée est simplement de garder son site tel quel (s’agissant du contenu et du design) et d’adapter sa feuille de style en fonction du type de navigateur utilisé (standard ou mobile). Mon avis est que cette méthode est d’abord orienté vers les smartphones. Pour les mobiles un peu ancien, le mieux c’est de faire simple, comme expliqué dans ce tutoriel. Une redirection placée à la page index du site devrait permettre d’atteindre la version appropriée :

Redirection simple en PHP
1 2 3 4 5 6 7 8 9 
<?php    if (is_wap_mobile_fonction)    {       // Mettre ici du code php optimisé pour les anciens mobiles    }    else {      // Et ici du code php avec media queries    } ?>

La spécification CSS 3 Media Queries donne les règles d’adaptation CSS en fonction des capacités de l’appareil. Inspirées de la spécification Media Types en CSS 2, les Media Queries étendent les capacités de cette spécification, et vont grandement faciliter la vie des développeurs. Ces dernier n’auront en effet qu’à l’appliquer sur un site standard, sans ensuite se préoccuper d’une éventuelle version mobile.

L’écriture des Media Queries (Requêtes de média) se fait grâce à d’opérateurs logiques : and (ET Logique), only (uniquement) et not (NAND).

Dans cet exemple, le fichier smartphone.css ciblera les appareils que le navigateur considérera comme étant de petites tailles (handheld) et dont la largeur est au plus égale à 320px :

Ciblage en fonction de la taille de l’écran
1 2 
<link rel="stylesheet"   media="handheld, only screen and (max-device-width: 320px)" href="smartphone.css">

Cet autre exemple permettra de cibler la tablette iPad :

Ciblage Tablette iPad
1 2 
<link rel="stylesheet"   media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">

Les Media Queries peut être directement intégrées dans une balise style :

Media Queries dans une balise style
1 2 3 
<style>   @media only all and (orientation: portrait) { #navigation{display:none} } </style>

Dans le cas d’un site à développer, l’utilisation des Media Queries se fera simplement en ajoutant ceci à la balise head :

Media Queries en Action
1 2 3 4 
<link rel="stylesheet"   media="all" href="/css/style_de_base.css" /> <link rel="stylesheet"   media="only screen and (max-width: 800px)" href="/css/mobile.css" />

Le fichier style_de_base.css définissant le look ‘n Feel de base du site (paramètre all), tandis que le mobile.css se charge d’adapter le site en cas de visite d’un appareil mobile (paramètre only), dont la largeur est fatalement inférieure à 800px. On couvre ainsi les smartphones (environ 320px) et les tablettes. Les changement à apporter pourraient être :

  • La modification des valeurs du whitespace et des marges(padding, margin)
  • Suppression du :hover, qui n’est d’ailleurs pas visible en mobile
  • Ajuster la structure du site de façon à ce que le contenu ne tienne que sur une colonne.

Et bien d’autres, comme vous le sentirez.

Pour aller plus loin:

Catégories
Développement multiplateforme

Développer avec jQuery Mobile, Framework de développement d’applications multiplateformes mobiles

Logo jQuery MobilejQuery Mobile est un excellent framework de développement d’applications web mobiles, qui se propose, comme la plupart des Frameworks de développement mobile, d’offrir un ensemble d’outils à base de technologies du web, pour construire des applications indépendantes du matériel mobile. Il est compatible avec tous les OS mobiles actuels et beaucoup d’entrepreneur s’en servent dans leurs projets. Le site de musique en ligne Deezer s’en sert dans sa version mobile (http://m.deezer.com).

jQuery Mobile, qui est très facile à prendre en main, est donc un choix interessant pour qui souhaiterait écrire un service mobile en écrivant moins, tout en créant plus : c’est le fameux « write Less, do more ».

Un site en jQuery Mobile s’êcrit en HTML5. Toute page doit au moins comporter ceci :

Ecran de base jQuery Mobile
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a3.min.js"> </script> </head> <body>     ... </body> </html>

Chaque écran de l’application est représenté par une page, qui est le plus souvent une balise <div>. Le framework propose l’attribut spécial data-role= »page » qui caractérise une page (écran) :

1 
<div data-role="page">...</div>

Et dans chaque page, on peut insérer tout ce que l’on veut, du code php, html…On y décrit une structure (gabarit ou template) pour notre écran actuel. On peut par exemple imaginer un écran avec un bloc d’entête, un bloc de contenu et un pied de page. Ca donnerait ça :

Structure d’une page jQuery Mobile
1 2 3 4 5 
<div data-role="page">        <div data-role="header">...</div>        <div data-role="content">...</div>        <div data-role="footer">...</div> </div>

Une page complète s’écrit finalement :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 
<!DOCTYPE html> <html>     <head>     <title>Page Title</title>     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"> </script>     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"> </script> </head> <body>   <div data-role="page">       <div data-role="header">         <h1>Titre de l'écran actuel</h1>     </div><!-- /entete -->       <div data-role="content">            <p>Contenu de l'écran actuel.</p>            </div><!-- /contenu -->       <div data-role="footer">         <h4>Pied de page</h4>     </div><!-- /footer --> </div><!-- /Fin de la page -->   </body> </html>

Essayons de compliquer un peu. Nous allons écrire un écran simple, avec une liste de liens menant à d’autres pages (écrans). Cette page proposera de consulter mon CV, ma liste de projets, et le contenu de mon blog. Chaque élément de la liste menant à chacun des contenus. Ça donnerait ça au final

Demo jQuery Mobile

Pour générer une liste de ce type il faut utiliser un attribut spécial nommé data-role= »listview » à l’interieur d’une balise ul.

Il est possible de varier les couleurs pour chaque bloc de liens en modifiant l’attribut data-theme. L’élement qui sert d’entête à la liste est désigné par l’attribut data-role qui a pour valeur list-divider. Nos deux blocs de liens (A propos de moi, Mon blog) s’écrivent donc :

Page complète
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
<div data-role="content">         <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">                  <li data-role="list-divider">A propos de moi</li>                  <li><a href="pages/cv.php">Mon CV</a></li>                  <li><a href="#">Mes projets</a></li>         </ul><!-- A propos de moi-->         <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">                   <li data-role="list-divider">Mon blog</li>                   <li><a href="#">Software (Android, Windows Phone 7,  IOS...)</a></li>                   <li><a href="#">Hardware (Freebox, Systèmes embarqués,...)</a></li>                   <li><a href="#">Web (HTML 5,CSS 3,...)</a></li>                   <li><a href="#">News</a></li>         </ul><!-- Mon blog--> </div><!-- contenu de la page -->

Voir la démo

Pour en savoir plus sur jQuery Mobile, le mieux c’est de lire la documentation qui est vraiment bien faite.