Archive for mobile

Validateur mobile et a11y

Validateur mobile et a11y

Vous ne l’aviez peut-être pas vu le W3C a mis en ligne un validateur de site mobile.
Vous pouvez ainsi valider que votre site fonctionnera sur 3 périphériques différents (2 smartphones, 1 tablette).
Comment ça marche ? Le validateur fait automatiquement une capture d’écran du site et analyse ensuite les éléments suivants :

  1. Réseau : nombre de requêtes, compression, redirections, erreurs HTTP, optimisation d’image ;
  2. Responsive Design : utilisation de meta viewport valide, détection du scroll horizontal/vertical ;
  3. Interopérabilité : utilisation des préfixes CSS, détection de flash ;
  4. Interactions : détection d’utilisation de popins modales.

Pour chaque problème le validateur vous indique quelles actions effectuer pour le corriger.
Autre outil intéressant pour améliorer l’accessibilité de nos sites et applications : tota11y


tota11yCette librairie JavaScript peut s’utiliser via un simple favori.
Lorsqu’elle est chargée un bouton s’affiche en bas à droite de la page et il est ensuite possible de visualiser les problèmes d’accessibilité tels que :

  • La structure des titres, et les erreurs pouvant s’y trouver (plusieurs h1, h3 avant h2…) ;
  • Les contrastes trop faibles ;
  • Les liens peu explicites (type cliquez-ici) ;
  • Les champs de formulaires sans label ;
  • Les images sans alt ;
  • Les attributs ARIA.

C’est un bon outil pour s’assurer que les règles de base en terme d’accessibilité sont respecter.
Pour aller plus loin il faudra se tourner vers le site http://a11yproject.com/ afin d’avoir plus de documentation et d’exemple de code.

 

Live démo Android

Live démo Android

Après l’excellent PhoneGap Day à Amsterdam (ahh souvenirs), on s’est posé la question de comment faire simplement une live démo sur PC/Mac de nos apps Android. Et voici.

La solution existe et s’appelle Android Screen Monitor. Cette application Java permet de visualiser l’écran de votre smartphone Android dans votre ordinateur. Fonctionnalité similaire à l’Apple AirPlay Mirroring.

Pour utiliser Android Screen Monitor il faut télécharger asm.jar et le lancer avec la commande suivante :

Une fenêtre s’ouvre et nous demande de choisir un périphérique
androidscreenmonitor1 androidscreenmonitor2

Lorsque vous avez sélectionné votre périphérique vous visualisez alors l’écran en live !

Tout n’est pas parfait, par exemple le framerate n’est pas extraordinaire mais ça rend déjà bien des services. A noter que pour enregistrer simplement une capture vidéo de l’écran pour une diffusion ultérieure, il est possible d’utiliser la ligne de commande adb pour enregistrer un fichier au format mp4.

 

Les nouveautés de Cordova 5.0.0

Les nouveautés de Cordova 5.0.0

Le 21 avril est sortie la version 5.0.0 de Apache Cordova, et cette nouvelle version majeure apporte un nombre important de nouveautés et de changements dans l’écosystème.

Tout d’abord les plugins ont été renommés, les identifiants du type org.apache.cordova.* sont devenus cordova-plugin-*. Ce changement résulte du fait que les plugins sont désormais publiés sur npmjs.org.

Pour trouver de nouveau plugins il suffit d’utiliser la commande suivante qui liste tous les plugins cordova disponibles :

La classique commande cordova :

évolue aussi pour prendre en compte ce nouveau repository. D’ailleurs l’ancienne adresse http://plugins.cordova.io a vocation à fermer dans les prochains mois, le temps que la transition se fasse vers npm.

Concernant les plugins, autre changement : il est désormais nécessaire d’installer le plugin cordova-plugin-splashscreen pour Android si l’on souhaite ajouter un écran de chargement à notre application (qui n’est donc plus une fonction disponible par défaut).
De même le plugin cordova-plugin-whitelist est obligatoire pour Android afin d’autoriser le chargement de ressources externes.

Cordova 5.0.0 s’accompagne également de la version 4.0.0 de Cordova Android avec elle aussi son lot de nouveautés.
La plus importante (pour ne pas dire révolutionnaire) est qu’il est désormais possible d’utiliser d’autres WebViews que celle fournies de base par Android 4.* et 5.*
Grace au projet Android Crosswalk (développé par Intel) on peut maintenant s’assurer d’utiliser une WebView récente, identique sur tous les terminaux android, avec les dernières API JavaScript, le support de syntaxes et de propriétés CSS supplémentaires, et bien évidemment des outils de débogage avancés comme le remote debugging réservé jusqu’ici de base aux terminaux avec Android kitkat minimum.

Les autres plateformes Cordova ont elles aussi été mises à jour, les version actuelles sont les suivantes :
Cordova Amazon-FireOS: 3.6.3
Cordova Android: 4.0.0
Cordova BlackBerry10: 3.7.0
Cordova Browser: 3.6.0
Cordova FirefoxOS: 3.6.3
Cordova iOS: 3.8.0
Cordova Ubuntu: 4.0.0
Cordova Windows: 3.8.1
Cordova WP8: 3.8.0

Vous trouverez tous les détails sur les autres changements dans les articles officiels de Cordova :

Android 5.0 Lollipop

Android 5.0 Lollipop

Vous le savez sûrement déjà : Android 5.0 aka Lollipop est enfin sorti.Pour les heureux possesseurs de Nexus 5, 7 et 10, l’image système permettant la mise à jour sans attendre l’OTA est finalement sortie en fin de semaine dernière ! Les images peuvent se télécharger sur le site développeur Android : https://developers.google.com/android/nexus/images

Pour les autres il faudra attendre les mises à jour (ou images) des constructeurs même s’il est tout de même possible de tester Android 5.0 à l’aide des Android Virtual Devices.

Au chapitre des nouveautés le premier point qui saute aux yeux, c’est le travail effectué sur l’interface de l’OS. Le Material Design que Google a créé pour Android 5.0 apporte de nouveaux effets de transition, une gestion de la 3D améliorée, des nouvelles icones et fonts ainsi que d’autres principes d’interface qu’il est possible de consulter sur la charte graphique d’Android 5.0.

Android Lollipop propose également de meilleures performances, et les développeurs d’applications auront accès à des outils permettant de mieux prendre en compte la consommation de la batterie.
Toujours concernant l’amélioration des performances on peut noter que la nouvelle version de la WebView basée sur Chronium apporte le support de WebRTC, WebAudio, et surtout WebGL.

Autre point important, cette WebView sera désormais mise à jour via les Google Play Services donc de manière indépendante de l’OS et surtout automatique et transparente. On peut supposer que les mises à jour de la webview suivront le rythme imposé par celles de Chrome.

Cette nouveauté va avoir un impact important sur le développement d’applications hybrides (donc basées sur la Webview) car il ne sera plus nécessaire d’attendre une mise à jour d’android pour utiliser les dernières avancées technologiques ou profiter des corrections de bug de rendu. Idem pour les corrections de failles de sécurité. C’est donc une très bonne nouvelle pour les développeurs d’applications PhoneGap / Cordova.

Il sera ainsi possible de détecter si les fonctionnalités nécessaires au bon fonctionnement de notre application sont présentes dans la version de la WebView du téléphone, et si ce n’est pas le cas inviter l’utilisateur à mettre à jour son système. Cela devrait satisfaire aussi bien les utilisateurs que les développeurs.

Pour en savoir plus sur Android 5.0, on vous invite à consulter la présentation officielle de Lollipop et pour ceux qui veulent aller plus loin il est même possible de consulter la documentation des APIs Android 5.0.

 

Tips & tricks JavaScript, parallax UI pour Phonegap et les frameworks php à surveiller en 2014

Tips & tricks JavaScript, parallax UI pour Phonegap et les frameworks php à surveiller en 2014

Pour bien commencer l’année, 45 Useful JavaScript Tips, Tricks and Best Practices en guise de piqûre de rappel sur les bonnes pratiques et les trucs et astuces à garder en tête en JavaScript.

Si vous appréciez l’interface iOS7 et ses effets parallax, je vous invite à consulter cet article : Parallax UI for PhoneGap and Mobile Web Apps. Vous découvrirez ainsi comment créer une interface parallax en HTML5 et CSS3 pour une application PhoneGap.

2014 sera peut-être l’année où vous testerez un nouveau framework PHP. Pour cela, l’article Best PHP Frameworks for 2014 peut vous aider à choisir celui qui vous semble le plus intéressant. Par exemple, Phalcon est apparemment « Les plus rapide des Frameworks PHP ».

 

 

HTML, CSS : automatisations et frameworks

HTML, CSS : automatisations et frameworks

Les bons développeurs sont souvent ceux qui ménagent leur cerveau. Voici deux techniques qui devraient vous plaire :
On commence par l’automatisation avec Addy Osmani dans cette présentation intitulée The Landscape Of Front-end Development Automation
Il y a de bons exemples à suivre, notamment au sujet de l’utilisation de GruntJS, pour l’optimisation des images par exemple. On retient :
grunt-responsive-images : permet de générer des images de différentes dimensions
grunt-imageoptim : permet d’automatiser l’optimisation des images
 

On poursuit en éliminant des tâches répétitives avec un framework CSS : CSS frontend frameworks. Celui-ci permet de comparer et choisir un framework en fonction de nos besoins. Utilisation d’un pré-processeur CSS, responsivité, support des différents navigateurs.

 

 

Gestion du mode hors-ligne avec Offline.js

Gestion du mode hors-ligne avec Offline.js

A l’heure de la mobilité, nous attendons de plus en plus de nos applications mobiles : qu’elles soient disponibles et utilisables en tout temps, même si nous sommes « offline ».

C’est dans cet esprit que nous vous invitons à découvrir la librairie JavaScript Offline.js, une librairie très utile à toutes les applications web ou mobile qui ont doivent avoir un mode offline.

Cette libraire indique à l’utilisateur s’il vient de perdre sa connexion Internet  (l’application est passée en mode offline) ou d’en récupérer une. Ce qui est intéressant, c’est que lorsque l’application est en mode hors-ligne, la librairie intercepte les éventuelles requêtes AJAX effectuées pour les relancer dès que la connexion est rétablie. Pour que le tout soit parfaitement intégré à votre site ou application, plusieurs thèmes sont disponibles : clair, sombre, inspiré de Chrome… de quoi bien commencer votre prochain projet.

Alors Offline.js sera-t-elle la librairie complémentaire aux applications développées avec PhoneGap ?

 

Rappel sur les unités en CSS

Rappel sur les unités en CSS

En CSS, on dispose d’un florilège d’unités de mesure à ne plus savoir quoi en faire.

 

Cet article listant les différentes unités que nous avons à disposition explique également dans quelles situations elles sont le plus adaptées et dans lesquelles elles ne le sont pas.

 

On apprend, par exemple, que les « px » sont idéals pour les design fixes mais, qu’en revanche, ils sont effectivement déconseillés pour définir les breakpoint des media queries.
On apprend également qu’il existe certains cas ou les valeurs brutes (sans unité) sont à privilégier. C’est par exemple le cas pour les propriétés « line-height » et « border-image ».

Source : http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When

PhoneGap on Steroids

PhoneGap on Steroids

Le dopage est à l’honneur de cet article… ou tout du moins, l’usage des stéroïdes pour PhoneGap. Ça commence avec un slogan assez simple :

« PhoneGap apps didn’t feel native. That’s why we built Steroids.« 

 

PhoneGap on Steroids est un framework basé sur PhoneGap qui permet d’utiliser des éléments d’interfaces natifs (Native UI: Multiple WebViews, Tabs, Modal windows, Navigation bar, Native animations, Drawer et Calendar) et comble certains manques de PhoneGap.

On y trouve aussi des outils en ligne de commande très utiles comme le développement multi-périphériques en simultané et le support de Sass et CoffeeScript, pour ne citer qu’eux.

Vous trouverez plus d’informations dans les tableaux comparant les frameworks.

 

Pour l’instant les prix de la beta semblent intéressants, à surveiller et à tester très prochainement !

 

 

Bootstrap 3 est disponible

Bootstrap 3 est disponible

Nous attendions avec une certaine impatience l’arrivée de Bootstrap 3 et il est maintenant disponible.
En quelques mots, voici quelques uns des changements de cette version :
– le framework est mobile first; les périphériques mobiles sont gérés en premier
– toujours responsive
– nouveau système de grille
– des couleurs d’interface dans les tons pastels et des icônes façon « flat design »
Pour plus d’information, il faut visiter getbootstrap.com qui propose, entre autres, un guide de migration de Bootstrap 2 vers Bootstrap 3.
 

 

Page 1 of 2 1 2