Il y a 6,8 milliards de personnes sur la planète, dont 5,1 milliards possèdent un téléphone portable. Et aujourd'hui, un pourcentage toujours croissant de ces appareils sont des smartphones. Selon un récent Étude du Pew Research Center , le nombre d'utilisateurs accédant à Internet sur leurs smartphones a plus que doublé au cours des 5 dernières années, tout comme le nombre d'utilisateurs téléchargeant et utilisant application mobile . Parmi ceux qui utilisent Internet ou le courrier électronique sur leur téléphone, plus d'un tiers se connectent principalement via leurs appareils portables.
En effet, l’informatique mobile est de plus en plus omniprésente… et c’est génial.
Sauf, bien sûr, quand ce n’est pas le cas.
En tant qu'utilisateur d'un appareil mobile, peu de choses sont aussi frustrantes et difficiles à naviguer avec les doigts qu'une application Web mobile mal conçue, ou même une application native.
python créer un objet avec des attributs
Et comme un développeur d'applications mobiles , peu de choses peuvent être aussi intensément irritantes que de s'efforcer de prendre en charge un aussi large éventail de clients mobiles que possible, chacun ayant son propre ensemble d'idiosyncrasies frustrantes. Que vous choisissiez de développer une application Web mobile, native ou hybride, la recherche de la prise en charge de plusieurs navigateurs mobiles, d'appareils plus exotiques et de la prise en main de diverses plates-formes peut être une expérience vraiment déchirante.
Bien sûr, tous les développeurs n'ont pas à se soucier de la prise en charge des clients mobiles. Mais la nature de plus en plus omniprésente des appareils et des applications mobiles suggère fortement que ceux qui n’ont pas besoin de prendre en charge les clients mobiles aujourd’hui devront plus que probablement le faire dans un avenir pas trop lointain. Donc, si vous ne pensez pas déjà développement d'applications mobiles , vous devriez probablement l'être.
Comme c'est le cas pour la plupart des sélections technologiques, il n'y a pas de réponse unique en ce qui concerne le type d'application mobile à développer. Il existe de nombreuses bonnes pratiques à prendre en compte pour les applications Web, qui ne sont pas toutes techniques. Qui est votre public cible? Sont-ils plus susceptibles de préférer un Web mobile ou une application native? Quelle est la différence entre les applications natives et hybrides? De quelles ressources de développement disposez-vous et avec quelles technologies mobiles sont-ils les plus familiers? Quel est le modèle de licence et de vente que vous envisagez pour votre produit?
De manière générale (bien qu'il y ait toujours des exceptions), la route de l'application Web mobile est plus rapide et moins chère que la route de l'application mobile native, en particulier lorsque l'objectif est de prendre en charge une large gamme d'appareils. À l'inverse, il peut y avoir des fonctionnalités natives de l'appareil mobile (comme le capteur de mouvement, etc.) qui sont essentielles à votre application, mais qui ne sont accessibles que via une application native (ce qui ferait donc du choix de l'application Web mobile un non- démarreur pour vous).
Et au-delà de la question des anciennes applications Web par rapport aux applications natives, une application mobile hybride peut être la bonne réponse pour vous, en fonction de vos besoins et des contraintes de ressources. Les applications hybrides, comme les applications natives, s'exécutent sur l'appareil lui-même (par opposition à l'intérieur d'un navigateur), mais sont écrites avec des technologies Web (HTML5, CSS et JavaScript) et généralement étayées par un cadre d'application hybride. Plus précisément, les applications hybrides s'exécutent dans un conteneur natif et exploitent le moteur de navigateur de l'appareil (mais pas le navigateur) pour restituer le HTML et traiter le JavaScript localement. Une couche d'abstraction Web vers native permet d'accéder aux fonctionnalités de l'appareil qui ne sont pas accessibles dans les applications Web mobiles, telles que l'accéléromètre, la caméra et le stockage local.
Mais quel que soit votre choix - qu'il s'agisse d'une application Web mobile, d'une application native ou hybride - veillez à bien rechercher et confirmer vos hypothèses. Par exemple, pour les besoins de ce didacticiel de développement d'applications Web mobiles, vous avez peut-être décidé de développer une application mobile native pour le commerce électronique afin de vendre vos produits. Mais, selon Hubspot , 73% des utilisateurs de smartphones déclarent utiliser davantage le web mobile que les applications natives pour faire leurs courses… Donc, dans ce cas, vous avez peut-être misé sur le mauvais cheval.
Mais quel que soit votre choix - que ce soit pour le Web mobile, une application native ou hybride - veillez à bien rechercher et confirmer vos hypothèses.Et puis, bien sûr, il y a les considérations pratiques de temps et de budget. Comme le dit l'un de mes dictons préférés, 'Plus rapide, meilleur, moins cher… choisissez-en deux' . Bien que les délais de mise sur le marché et les contraintes de coût soient d'une importance capitale dans le développement d'applications Web, il est crucial de ne pas trop compromettre la qualité dans le processus. Il est assez difficile de retrouver la confiance d’un utilisateur qui a eu une mauvaise première expérience.
guide de programmation c++
En effet, les applications Web mobiles, natives et hybrides sont toutes des bêtes radicalement différentes, chacune avec son propre ensemble d'avantages et de défis. Ce tutoriel de développement Web mobile se concentre spécifiquement sur les méthodologies et les outils à utiliser, et les pièges à éviter, dans le développement d'applications Web mobiles hautement fonctionnelles, intuitives et faciles à utiliser.
Identifier vos besoins (ou ceux de vos clients) est l'une des meilleures pratiques les plus essentielles en matière de développement d'applications, mobiles ou autres. Recherchez soigneusement les fonctionnalités ciblées pour déterminer si elles sont réalisables dans votre application Web mobile. Il est assez frustrant et très improductif de se rendre compte qu’une ou plusieurs de vos fonctions client essentielles ne sont pas prises en charge, alors que vous avez déjà investi le temps et les ressources nécessaires pour concevoir l’interface Web et l’infrastructure de prise en charge.
Un autre problème courant pour les débutants des développeurs d'applications Web mobiles est de supposer que le code Web pour un navigateur de bureau fonctionnera «tel quel» dans un navigateur mobile. Ne pas. Là très certainement sont différences et, si vous n’en êtes pas conscient, elles peuvent certainement vous mordre. La fonctionnalité de lecture automatique du HTML5tag, par exemple, ne fonctionne pas sur les navigateurs mobiles. De même, le CSS transition
et opacity
les propriétés ne sont pas prises en charge (ou du moins ne sont pas toujours prises en charge) dans la plupart des navigateurs mobiles de nos jours. Vous rencontrerez également des problèmes avec certaines méthodes d'API Web sur une plate-forme mobile, telles que l'API de diffusion de musique SoundCloud qui nécessite Adobe Flash, qui n'est pas prise en charge sur la plupart des appareils mobiles.
Un facteur particulièrement compliqué dans le développement d'applications Web mobiles est que la durée de vie des appareils mobiles a tendance à être beaucoup plus courte que celle des écrans de bureau (la durée de vie moyenne d'un téléphone portable aux États-Unis est d'environ 21 mois). Ces durées de vie plus courtes des appareils, accompagnées de versions constantes de nouveaux appareils mobiles et de nouvelles technologies, donnent un paysage en constante évolution d'appareils à cibler. Bien que le travail dans un navigateur atténue quelque peu ce problème en vous protégeant d'un certain nombre de problèmes spécifiques à l'appareil, vous devrez toujours concevoir une vue basée sur un navigateur qui prend en charge de nombreuses résolutions d'écran différentes (ainsi que l'ajustement approprié pour les orientations paysage et portrait. ).
Il faut également réfléchir à la prise en charge des écrans Retina d’Apple (écrans à cristaux liquides qui ont une densité de pixels suffisamment élevée pour que l’œil humain ne puisse pas discerner les pixels individuels à une distance de vision typique). Plusieurs produits Apple - dont l'iPhone, l'iPod Touch, l'iPad, le MacBook Pro, l'iPad Mini et l'iPad Air - proposent des écrans Retina. Pour une application Web mobile en particulier, il est important de savoir qu’un écran Retina donne aux images basse résolution (qui sont généralement diffusées sur des appareils mobiles) floues et pixellisation peut se produire. La meilleure solution de développement d'applications dans ces cas est de faire reconnaître au serveur que la demande provient d'un appareil Retina, puis de fournir une autre image de résolution supérieure au client.
Si vous souhaitez utiliser certains des éléments HTML5 intéressants, n'oubliez pas de vérifier à l'avance que la fonctionnalité que vous recherchez est prise en charge dans le paysage des appareils que vos clients sont susceptibles d'utiliser. Par exemple, dans iOS 6 et supérieur, il n'y a pas de support pour le navigateur getUserMedia
fonctionnalité puisque la caméra n'est accessible que via des applications natives. Deux excellentes ressources pour vérifier ce qui est pris en charge sur des appareils et des navigateurs spécifiques sont caniuse.com et html5test.com .
Les requêtes multimédias CSS3 peuvent également vous aider à fournir un contenu personnalisé pour chaque appareil. Voici un exemple de code permettant de capturer différentes caractéristiques de l'appareil, telles que la densité de pixels, la résolution d'écran et l'orientation:
/* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }
'OMG, ce truc est tellement lent!' En tant que développeur d'applications Web mobiles, ce sont probablement les tout derniers mots que vous souhaitez entendre de l'un de vos utilisateurs. Vous devez donc réfléchir attentivement à la manière de réduire et d’optimiser chaque transfert d’octet et de serveur afin de réduire le temps d’attente de l’utilisateur. Il n’est pas réaliste de s’attendre à ce que les transferts soient toujours effectués via un réseau Wi-Fi, et vous devez savoir que 60% des internautes mobiles disent qu'ils s'attendent à ce qu'un site se charge sur leur téléphone mobile en 3 secondes ou moins (source). De même, Google a constaté que, toutes les cinq secondes supplémentaires de temps de chargement, le trafic diminuait de 20% (et il convient également de noter que les moteurs de recherche examinent les temps de chargement dans le cadre de leur calcul du score de qualité de la page).
60% des internautes mobiles disent s'attendre à ce qu'un site se charge sur leur téléphone mobile en 3 secondes ou moins.Dans le cadre de ce didacticiel de développement d'applications Web mobiles, voici quelques conseils qui peuvent vous aider à optimiser les performances de vos applications Web mobiles et à minimiser la latence:
«Les bons outils pour le bon travail» est un adage séculaire qui s'applique autant au développement logiciel qu'à tout autre domaine. Ce didacticiel fournit une introduction à certains des outils les plus populaires et les plus utilisés pour le développement d'applications Web mobiles, mais gardez à l'esprit qu'il peut très bien y avoir d'autres outils qui sont les «bons» pour développer votre application Web mobile, selon vos besoins et les ressources disponibles.
Comme le développement d'applications Web mobiles a tendance à créer bon nombre des mêmes défis courants - tels que la compatibilité entre navigateurs et le HTML et le CSS incohérents dans les navigateurs mobiles - des cadres ont été développés (basés sur HTML5 et CSS3) spécialement conçus pour résoudre ces problèmes et pour fonctionner aussi parfaitement que possible sur un large éventail de téléphones intelligents et de tablettes. La plupart de ces frameworks d'applications Web mobiles sont légers, ce qui facilite la navigation rapide sur le Web mobile sans compromettre l'aspect et la convivialité de votre site.
Élargissant notre vision au-delà du paysage mobile, s'il existe un seul framework JavaScript populaire qui mérite d'être mentionné, c'est jQuery . Si vous connaissez la version de bureau, je vous recommande d'essayer jQuery Mobile pour votre application Web mobile. Il dispose d'une bibliothèque de widgets qui convertit le balisage sémantique en un format convivial pour les gestes, facilitant les opérations sur les écrans tactiles. La dernière version consiste en une base de code très légère qui contient beaucoup d'éléments graphiques qui peuvent vraiment améliorer votre interface utilisateur.
Une autre alternative, Sencha Touch , gagne également rapidement des parts de marché. Il offre d'excellentes performances dans l'ensemble et permet de produire une interface utilisateur Web mobile qui ressemble et se sent largement comme une interface native. Sa bibliothèque de widgets complète est basée sur Sencha ExtJS Bibliothèque JavaScript.
exemple de fichier d'en-tête c++
Voici quelques différences clés à prendre en compte lors de la comparaison de jQuery Mobile et Sencha Touch:
Un nombre croissant de cadres réactifs a commencé à apparaître ces dernières années, deux des plus populaires étant actuellement Amorcer et Fondation . En bref, les frameworks réactifs simplifient et rationalisent conception d'interface utilisateur réactive basée sur le Web et la mise en œuvre, encapsulant les dispositions et les paradigmes d'interface utilisateur les plus courants dans un cadre réutilisable et optimisé pour les performances. Principalement basés sur CSS et JavaScript, bon nombre de ces frameworks sont open-source, gratuits à télécharger et facilement personnalisables. À moins que vous n'ayez un ensemble d'exigences très particulières, il est probable que l'utilisation de l'un de ces cadres réduira le niveau d'effort nécessaire pour concevoir et mettre en œuvre votre application Web mobile.
En examinant les deux principales options, Bootstrap et Foundation, voici quelques-unes des principales différences à prendre en compte:
Le débogage des applications Web mobiles peut être délicat et quelque peu frustrant, surtout si vous devez rechercher différents appareils à tester ou installer des SDK pour une émulation (généralement imparfaite) des plates-formes clientes ciblées.
Dans ce contexte, un avantage évident du développement Web mobile (par rapport au développement d'applications natives) est que vous pouvez utiliser des outils de développement standard basés sur un navigateur pour déboguer votre application. En fonction de ma préférence personnelle pour le débogage à distance, celui que je recommande dans ce didacticiel de développement d'applications est Chrome avec ses DevTools. D'autres options standard incluent Firefox avec Firebug ou les outils Dragonfly d'Opera.
Certaines des raisons que je préfère Chrome avec ses DevTools comprendre:
Pour tester la mise en page et la compatibilité de navigation croisée de votre application Web, vous pouvez également utiliser des outils en ligne utiles, tels que BrowserStack . Entrez simplement l'URL de votre application, sélectionnez le navigateur, la version et le système d'exploitation, et vous obtiendrez la vue émulée (et la vitesse de chargement) de votre site dans cet environnement. Un autre outil utile à cette fin est CrossBrowserTest .
Avec l'expansion rapide et continue du nombre, de la variété et de la sophistication des appareils mobiles sur le marché et utilisés aujourd'hui, le besoin d'applications mobiles efficaces, conviviales et hautes performances est susceptible d'augmenter considérablement. Pouvoir développer ces applications de manière intelligente et efficace restera donc d'une importance capitale.
De nombreux facteurs doivent être pris en compte lors du choix entre les options d'applications mobiles Web, natives et hybrides pour les appareils mobiles. Chacune a ses propres avantages, mais les applications Web mobiles représentent souvent votre option de développement (et donc de mise sur le marché) la plus efficace. Si vous choisissez de suivre cette voie, j'espère que ce didacticiel de développement d'applications Web mobiles vous aidera à vous rendre plus directement et plus efficacement à destination.
En relation: Rendez votre application rentable: tirez parti de Mobile AnalyticsLes applications Web mobiles sont des applications Web optimisées pour une bonne expérience téléphonique. Ce ne sont pas des applications mobiles, mais des sites Web écrits en HTML / CSS et exécutés par un navigateur. Bien qu'elles puissent être conçues pour ressembler à la sensation des applications pour smartphone, elles n'ont pas grand-chose en commun.
Une application native est une application écrite pour une plate-forme spécifique, utilisant des API spécifiques à la plate-forme.
Une application hybride est une application écrite à l'aide de technologies Web et enveloppée dans un navigateur Web natif mince. Une application hybride peut rapidement être portée sur différentes plates-formes où elles partagent la même base de code sous-jacente.
Les applications natives sont écrites dans des langages spécifiques à la plate-forme à l'aide d'API de plate-forme, telles que Java ou Kotlin pour Android et Objective C ou Swift pour iOS. Les applications hybrides sont écrites à l'aide de technologies Web telles que HTML5 / CSS et Javascript
quelles fonctionnalités sont les plus importantes pour vous lorsque vous utilisez un outil de cartographie en ligne ?
Une application Web mobile est un site Web optimisé pour être utilisé sur un mobile. Si c'est bien fait, l'expérience ressemble remarquablement à une application native ou hybride. À titre d'exemple, voir https://paperplanes.world/.
Les applications hybrides sont généralement buggées et plus lentes que les applications natives, car les applications natives ne passent pas par des cerceaux et des couches de conteneurs pour fonctionner. Les applications natives sont beaucoup plus performantes. React Native a réussi à changer la donne, cependant.