Catégories
eBooks

[eBook Gratuit] Télécharger le livre « Développer avec jQuery Mobile »

Découvrez en exclusivité un eBook complètement gratuit sur le Framework jQuery Mobile. Désormais en version 1.4.5, jQuery Mobile, qui permet de créer des sites mobiles multiplateformes, ne cesse d’évoluer et de séduire de plus en plus de développeurs, déjà très familiers de jQuery, dont s’inspire d’ailleurs le framework Mobile. Ce livre électronique vous permettra de découvrir en profondeur les nombreuses possibilités et surtout facilitées offertes par jQuery Mobile. Bien plus qu’une introduction, « Développer avec jQuery Mobile » fera de vous un expert du Framework.

Télécharger le livre électronique

Catégories
Développement Android

Optimiser son site mobile pour les téléphones Android

Android pour le Web MobileIl est important, en développant un site mobile, de tenir compte de l’expérience utilisateur. Votre application se démarquera toujours de celles des autres grâce à ce petit truc en plus que ressent le mobinaute en utilisant votre application. Vous souhaitez passer de…rien du tout, au top 10 ? Alors pensez à vos utilisateurs. Cette idée s’applique au développement d’applications en générale, mais dans cet article nous nous limiterons au développement de sites mobiles, en étudiant ce que préconise Google en la matière.

Tous les smartphones actuels, et Android en particulier, parlent couramment le HTML, le CSS et bien sûr, le Javascript. Cependant, et à la différence de l’iPhone, la résolution d’écran d’un smartphone est variable d’un constructeur à l’autre. Rappelons que Google ne propose d’un OS, et non le smartphone tout en entier. Donc, il faut pouvoir gérer ces nombreuses résolutions d’écran, qui souvent posent des soucis d’esthétiques.

Deux facteurs fondamentaux sont a étudier de près quand on souhaite optimiser sa page web pour Android :

  • La taille de l’écran et l’échelle de la page
  • La densité de l’écran

Gérer la taille de l’écran et l’échelle de la page avec la métadonée viewport

Par défaut, lorsque le navigateur d’Android charge une page Web, elle est chargé en mode « Vue d’ensemble » (Overview mode), qui demande bien souvent de cliquer sur le bouton de zoomage pour mieux afficher ce que l’on souhaite regarder. Il est très facile surcharger ce comportement par défaut en précisant la taille initiale de la page, tout en offrant la possibilité ou non de zoomage.

Pour ce faire, on utilise une métadonnée nommée viewport. Le viewport en lui-même est l’espace dans lequel votre page web est dessinée (canvas), c’est à dire le nombre de pixels de la page web. Il est toujours supérieur ou égal à la taille de l’écran lui-même. Cependant, la partie visible du viewport est toujours égale à la taille de l’écran. Ce qui fait que pour un viewport supérieur à la taille de l’écran on ait un affichage peu visible, nécessitant un zoom de la page.

Ce problème se résout facilement en décidant que la taille du viewport soit exactement égale à la taille de l’écran du device (width=device-width). Dans l’entête HTML il suffit d’écrire :

Metadonnée viewport
1 2 3 4 
<head>  <title>Une page optimisée pour Android</title>  <meta name="viewport" content="width=device-width, user-scalable=no" /> </head>

Le paramètre user-scalable=no précise qu’il n’est pas possible de zoomer ou même de dézoomer. la métadonnée viewport peut prendre plusieurs paramètres, chacun étant séparé par une virgule.

Utilisation avancée du viewport
1 2 3 4 5 6 7 8 9 10 11 
<meta name="viewport"  content="  height = [valeur_en_pixel | device-height] ,  width = [valeur_en_pixel | device-width ] ,  initial-scale = valeur_numérique_float ,  minimum-scale = valeur_numérique_float ,  maximum-scale = valeur_numérique_float ,  user-scalable = [yes | no] ,  target-densitydpi = [dpi_value | device-dpi |  high-dpi | medium-dpi | low-dpi]  " />

Il en résulte un affichage automatique de la page, fonction du viewport. Ci-dessous, le résultat de l’affichage d’une image pour des d’écrans différentes, grande (gauche) et petite (droite) :

Android viewport

Il dans ce cas important de mettre l’échelle de l’écran à 1, ce qui permet un affichage direct du contenu de la page. On aura donc finalement :

Utilisation de la metadonnée viewport
1 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

valeur_en_pixel

Gérer la densité de l’écran

L’OS Android gère trois densités d’écran différentes en dpi (dots per inch, point par pouce en français), fonctions du device utilisé :

  • ldpi
  • mdpi
  • hdpi

Par défaut, le navigateur Android utilise la densité mdpi pour afficher une page web. Ainsi, si l’on essai d’afficher une image basse résolution, sur un smartphone de densité mdpi ou hdpi, on aura un affichage semblable au dessin de gauche, contre celui de droite pour une optimisation de l’affichage :

Android densité

Pour optimiser sa page, en fonction de la densité ciblée, on utilise des propriétés CSS particulières appelées media queries:

Optimisation en fonction de la densité
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
#contenu {  background:url(medium-density-image.png); }   @media screen and (-webkit-device-pixel-ratio: 1.5) {  /* CSS optimisé pour un affichage hdpi */  #contenu {  background:url(high-density-image.png);  } }   @media screen and (-webkit-device-pixel-ratio: 0.75) {  /* CSS optimisé pour un affichage ldpi */  #contenu {  background:url(low-density-image.png);  } }

 

On peut également utiliser la métadonnée viewport, pour un affichage automatique fonction de la densité du device :

Optimisation de la densité en HTML
1 
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

 

Pour en savoir plus :

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" />