Développement mobile : quel est le meilleur choix pour concevoir ses applications ? Une approche HTML5, native ou hybride ? Pour la seconde édition de son enquête sur HTML5, Kendo UI, une division de Telerik, a interrogé plus de 5000 développeurs qui ont constitué 72 % de son panel, ainsi que des responsables des technologies de l'information qui ont représenté 20 % des répondants. L'objectif était de déterminer le degré d'adoption des applications HTML5, natives et hybrides. Dans les faits, 41 % des développeurs ont choisi le HTML pur comme approche pour les multi-plateformes, 32 % ont préféré les applications hybrides et seulement 8 % ont opté pour les applications complètement natives. En comparaison, au début de l'année, les votes en faveur des applications HTML pures ont gagné 5 points en pourcentage, pour les applications hybrides ils sont restés statiques tandis que pour les applications complètement natives ils ont reculé de 7 points. Avec le marché du mobile qui se développe de plus en plus, le rapport s'est intéressé à la façon dont les développeurs comptaient aborder le sujet. Et vous ?
10 outils pour le Web mobile Les contraintes d'ergonomie, d'adaptation et de performance dans le monde du Web mobile impliquent parfois certaines techniques rendues complexes par le peu de spécifications et d'outils existants à l'heure actuelle. En attendant des modules de positionnements CSS flexibles tels que "Flexbox", ou des spécifications stables concernant les informations de type "retina" ou de bande passante d'un terminal, nous sommes contraints à créer nous-même nos outils et stratégies. Pour nous faciliter la tâche, voici une sélection de 10 ressources bien pratiques. La majorité des dispositifs présentés dans cet article consistent en des bibliohèques JavaScript et répondent à des missions bien précises. Inutile de vous préciser qu'il n'est pas recommandé d'employer l'ensemble de ces outils sur un seul et même projet, pour des raisons évidentes de performances. Mobile Boilerplate Voir Mobile Boilerplate 320 and up Souple et évolutif, il peut être couplé à Modernizr, Bootstrap, LESS et SASS selon vos besoins.
Mobile : HTML5 est-il un échec pour le développement cross-platform ? Les développeurs se détourneraient peu à peu du langage Le développement natif pour les plateformes mobiles nécessite la maîtrise de plusieurs langages de programmation. Pour chaque OS mobile, le développeur est obligé de créer une application spécifique, ce qui engendre des coûts supplémentaires et ne facilite pas la maintenance de ces applications. Le HTML5 s’est imposé comme une solution à ce problème, entrainant son adoption rapide pour les développeurs mobiles. Cependant, le HTML5 est-il assez mature pour répondre aux besoins des développeurs mobiles ? La même étude menée cette année par Appcelerator montre que le nombre de développeurs qui ont déclaré être intéressés par le développement HTML5 a chuté à 59,9 %. La principale raison de cet éloignement des développeurs serait « les performances médiocres » des applications HTML5, car elles ne peuvent pas exploiter convenablement les ressources des terminaux, comme c’est le cas pour les applications natives. Appcelerator conclut dans son étude que JavaScript représente le futur du mobile.
La méthode matchMedia ou les Media Queries pour JavaScript Vous connaissez certainement les Media Queries CSS. Celles-ci permettent d'adapter les instructions de style appliquées à un document HTML, en fonction de nombreux critères (résolution de l'écran, dimensions, périphérique de sortie). C'est la technique la plus souple et la plus utilisée actuellement pour ajuster dynamiquement l'affichage et obtenir un rendu graphique différent sur écrans classiques, mobiles, tablettes, et autres moyens d'accéder au web. Avec matchMedia(), les mêmes capacités de détection sont rendues disponibles en JavaScript. La syntaxe de la requête média reste la même, ce qui est bien agréable. C'est une méthode qui dépend de l'objet window (la fenêtre du navigateur) et qui prend en argument une chaîne de texte contenant l'expression à tester, pour retourner true ou false via sa propriété matches. <script>if (window.matchMedia("(min-width: 600px)").matches) { } else { } </script> Voir la démonstration n°1 Voir la démonstration n°2 Voir la démonstration n°3
Web application, application native ou application hybride, choix Corn?lien ! La presse ne se pose aujourd’hui plus la question de la pertinence du mobile dans sa stratégie. Plusieurs technologies s’offrent à elle pour déployer ses applications mais quelle est la meilleure ? Entre technologie native, web application ou application hybride le dilemme est de faire le bon choix car celui-ci implique une organisation et bien souvent un prestataire différents. Commençons par définir les différences entre ces trois façons d’aborder la mobilité : – L’application native : la programmation sur iPhone se fait en Objective-C, un langage qui nécessite l’utilisation de X-Code, un environnement de développement sous Mac OSX. Ces langages permettent de faire appel aux couches basses du smartphone, c’est à dire aux fonctions matérielles comme l’accéléromètre, le GPS, les affichages systèmes de type push, badge, le cache local, les optiques, etc. Chaque mise à jour de l’application – et non du contenu, ne pas confondre Qu’en pensez vous ?
Responsive Web Design Patterns | This Is Responsive Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox
PhoneGap, la solution de développement d’applications mobiles multiplateformes | Digital Link Introduction Aujourd’hui, grâce à l’évolution des langages HTML, CSS et JS ainsi que des navigateurs mobiles (Safari, Webkit, Opera, Firefox…), il devient possible de créer des « web apps » rivalisant avec les applications natives. PhoneGap est justement une des solutions permettant le développement d’applications mobiles pour Android, iOS, Windows Phone, Symbian, Bada et Blackberry OS, en utilisant des langages HTML, CSS et JS. Avec PhoneGap, il est par exemple possible d’accéder aux fonctionnalités suivantes directement en javascript : Qu’est qu’un PhoneGap ? PhoneGap est un framework dont l’objectif est de réduire le fossé (gap) qui sépare les applications web des applications natives. Plug-in : JS/Natif Tous les plugins PhoneGap sont constitués d’une classe Javascript qui expose la fonctionnalité dans l’application HTML/JS (boîte rouge dans la figure ci-dessous). Image empruntée sur Comment développer avec PhoneGap Conclusion
Responsive Image Breakpoints Generator by Cloudinary Google’s Dart language on Android aims for Java-free, 120 FPS apps Non-game Android apps are normally written in Java, but a group inside Google is experimenting with a whole new way of writing Android apps using Dart, Google's in-house Web development language. It's Android apps with no Java, a focus on speed, and deep integration with the Web. Dart was created by members of Chrome's V8 Javascript engine team, after being frustrated with some aspects of the 20-year-old language they dealt with on a day-to-day basis. The group recently held a Dart Developer Summit where it showed off the Dart on Android project. Being fast and responsive is one of the biggest goals for Sky. The Dart team brought along a demo app, and it was rendering entire frames in 1.2ms. Sky's Web background carries over to the mobile space. Serving over HTTP makes development a lot easier.