Depuis la version 5 de xcode, Apple a mis en place une nouvelle façon de gérer les images, les catalogues d’images, ou « assets catalog ».

Par le passé, lors de projets cordova ou phonegap, la mise en place d’icones et de splashscreen n’a jamais jamais été simple:

• plusieurs façons d’ajouter des icones/splashscreen 
• complexités des différents tailles d’icones à chaque nouvelle version d’iOS.
• l’ajout de   dans le config.xml fonctionne uniquement pour Phonegap Build.

Nous allons voir comment simplifier ces taches avec la nouvelle fonctionnalité d’Xcode 5.

Après plusieurs projets phonegap/cordova, et surtout « Synchronised« , le plus lourd en terme de contenus/animations/effets visuels, je vous présente une liste de techniques d’optimisations pour que vos applis restent fluides.

Cette liste peut s’appliquer à tout projet sur mobile/tablette, vu que les projets phonegap ne sont pas moins que des webapp encapsulés dans les moteurs natifs iOS/Android/Windows Phone/etc..

Ces optimisations font suite à l’excellent article de Jonathan Vallet sur les performances des applications Phonegap, même si certaines informations se recoupent.

Ce qui est génial dans le monde du développement c’est qu’il est possible d’utiliser le travail d’autrui pour faire notre travail. Mais cela ne fonctionne pas toujours du premier coup (voire jamais). Aujourd’hui j’ai voulu intégrer un superbe test de bande passante en javascript.

Tout de suite je me dis c’est du web worker, je n’en ai jamais fait sur une application ios avec cordova. Mais dans l’absolu c’est du javascript, donc je me rends sur github et j’intègre le petit js. Et la surprise après 2 ou 3 calages  cela fonctionne très bien ! Sur chrome…

Et oui comme le build est plus long, je teste sur le navigateur d’abord puis je réalise le build..

Et là, misère ! Rien ne fonctionne sur l’appli.

Introduction

Pour pouvoir utiliser des typos personnalisées dans le web,  on a pour habitude de convertir les polices souhaitées (.ttf, .otf, etc…) en format web (.woff, .svg, .eot, etc..) et d’y accéder ensuite en css avec la propriété @font-face.

Suite à ces conversions, les typos générées sont souvent dégradées, et l’affichage n’a plus rien à voir avec les maquettes.

Je vais vous montrer comment inclure des polices « brutes » directement dans votre application Phonegap et les appeler dans vos feuilles de styles comme s’il s’agissait d’une police système (cf: arial, verdana, etc).

Pour cet article, le tutorial concernera uniquement les projets sur iOS, et a été testé avec des polices OTF et TTF.

Dans un précédent article j’ai présenté Phonegap et les nouveautés de la version 3.0. Nous allons maintenant entrer au cœur de Phonegap et découvrir comment l’utiliser au mieux.

Phonegap souffre parfois d’une mauvaise réputation dû à un manque de performance: application qui lag, qui ne se comporte pas comme une « vraie » application mobile… Ça peut être vrai si on ne l’utilise pas correctement. Dans cet article il sera question de savoir quand utiliser Phonegap, et comment gérer au mieux les performances des mobiles pour vous permettre de développer des applications mobiles dignes de ce nom avec ce Framework.

Nous avons vu précédemment les nouveautés de Phonegap 3.0.

Parmi ces nouveautés: le dossier www commun à toutes les plateformes, et la possibilité de surcharger à notre guise des fichiers pour chaque plateforme.

Si on configure le DocumentRoot de son projet pour pointer vers le dossier www, on voit son application dans son navigateur. C’est plutôt pratique, mais pas suffisant pour se rapprocher vraiment de son application.

Pour le développement d’applications mobiles hybrides sur plusieurs plateformes, nous aimons utiliser Phonegap chez AdFab Connect.