Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

« Démarrage d'un projet mobile et agile en Grails | Page d'accueil | Web app Mobile, une nouvelle vague d'applications pour l'entreprise »

17 juin 2011

Développer une application mobile simple en HTML5, CSS3 et javascript

Le développement d'applications mobile ("there is an app for that™") en entreprise à tout avantage à miser sur l'expérience acquise au fil du temps dans la création d'application web. Avec un excellent support pour le HTML5, les CSS3 et le javascript ces appareils permettent de développer des solutions qui fonctionnent sur iPhone, iPad, android, ou même nos bons vieux ordinateurs.

Le vidéo suivant montre comment développer une application simple et introduit quelques aspects particulier du développement web.

Il s'agit d'un prototype d'une application qui met en valeur un contenu existant sur internet (site Hydro-Québec).

La valeur de l'application vient du fait que l'utilisateur peut consulter l'information même s'il n'a pas de connexion réseau (s'il visite sa pépinière favorite), qu'il peut interagir avec le contenu (trouver les arbres et arbustes qui répondent à un critère) et finalement qui indique à l'utilisateur la zone de rusticité dans laquelle il se trouve en fonction de sa localisation.

Le vidéo suivant présente le développement du code.

 

Web app mobile en HTML (introduction) from jean desbiens on Vimeo.

Le vidéo suivant montre une version légèrement plus avancée, qui supporte les gestes sur le mobile (notamment le "swipe" pour revenir en arrière).

 

Démo d'une web application mobile HTML5 sur iPad (arbres) from jean desbiens on Vimeo.

Finalement voici le code de la page. Le backend est une application grails, d'où l'utilisation de page gsp.

 

<%@ page import="arbr.Arbre" %>
<!DOCTYPE html><%-- indique au fureteur de traiter la page en HTML5--%>
<html manifest="../arbre/manifest/"><%-- permet à l'application de fonctionner offline --%>
<head>
<title>Arbres HQ</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8" />
<link rel="icon" type="image/ico" href="../images/logo.png">
<%-- les applications natives ne zoom pas, en général --%>
<meta name="viewport"
    content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<%-- ces tags, propre a iOS permettent un look and feel plus natif--%>
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <!--this is buggy?? !!-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="../images/splash.png" />
<link rel="apple-touch-icon" href="../images/logo.png">
 
<style type="text/css">
/* feuille de style pour le formattage de la page */
body {
    /* Helvetica est la police par défaut des applications sur iOS*/
    font-family: helvetica, trebuchet MS, arial, sans serif;
    margin: 4px;}
header {
    border-bottom:1px solid #999;
    margin-bottom:2px;
    background-color:silver;}
#content {
    padding-top: 10px;}
#searchInput {
    font-size: 1.3em; /* une police plus grande facilite la saisie sur les mobiles*/}
 
.list {
    padding:2px;
    margin-bottom:12px;
    border:1px solid black;
    /* coins arrondis*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    /* fond dégradé de coleur*/
    background: #b4e391; /* Old browsers */
    background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C */
    }
 
#zone {
    padding:10px;}
p {
    margin:0;}
 
/* fin des styles communs  */
@media all and (orientation:landscape) {
    #content {
        -webkit-column-count: 3;
    }
} /* landscape */
 
@media(orientation:portrait) {
    #content {
        -webkit-column-count: 2;
        }
} /*portrait */
</style>
 
<%--  filtre de la liste des arbres--%>
<script  type="text/javascript">
    function Filtrer(idOfSearchField) {
        var arr = new Array();
        arr = document.getElementsByClassName('list');
        for ( var i = 0; i < arr.length; i++) {
            var obj = document.getElementsByClassName('list').item(i);
            if (obj.textContent
                    .indexOf(document.getElementById(idOfSearchField).value) == -1) {
                obj.style.display = "none";
            } else {
                obj.style.display = "block";
            }
        }
    } // filtrer()
</script>
 
<%-- géolocalisation--%>
<script  type="text/javascript">
    function UpdateZone() {
        if (window.navigator.geolocation){
        window.navigator.geolocation.getCurrentPosition(successCallback);
 
        function successCallback(position){
            alert("Position : "+position.coords.longitude + ", " + position.coords.latitude );
            }
        }
    } // UpdateZone()
</script>
</head>
 
<body>
<header><%-- header est une tag HTML5 sémantique --%>
     <input id=searchInput type="search"
        placeholder="Rechercher..." onkeyup="Filtrer(this.id);"  /> 
        <%-- HTML5 supporte des nouveaux types et attributs --%>
    <span id=zone onClick="UpdateZone();">Ma Zone</span>
</header>
 
<section id=content><%-- section est une tag HTML5 sémantique --%>
    <g:each in="${arbreInstanceList}" status="i" var="arbreInstance">
    <%-- on cré un DIV pour chacun des arbres --%>
        <div id=${fieldValue(bean: arbreInstance, field: "id")} class="list" tabindex="1">
            <img src="${fieldValue(bean: arbreInstance, field: "vignetteURL")}" />
            <p class="fr">${fieldValue(bean: arbreInstance, field: "nomFrancais")}</p>
            <p class="lt">${fieldValue(bean: arbreInstance, field: "nomLatin")}</p>
            <p class="en">${fieldValue(bean: arbreInstance, field: "nomAnglais")}</p>
            <p class="zone">${fieldValue(bean: arbreInstance, field: "zone")}</p>
            <p class="distance" >${fieldValue(bean: arbreInstance, field: "distanceMinimale")}</p>
        </div>
    </g:each>
</section>
 
</body>
</html>

12:21 | Lien permanent | Commentaires (0)