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 :

java -jar asm.jar

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.

 

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.
 

 

N’oubliez pas la balise viewport

N’oubliez pas la balise viewport

Cette petite balise peut faire toute la différence ! Confortée par un article de Ian Yates paru hier sur Tuts+, voici un petit résumé des impacts de cette balise méta.

Tout d’abord, cette balise a été introduite par Apple, puis implémenté par les navigateurs de tout bord. De façon générale, on utilisera le code suivant pour que le contenu soit affiché lisiblement sur tous les périphériques et que le niveau de zoom par défaut soit bien égal 1 :

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Cela dit, il faut savoir que cette balise n’est pas un standard et n’a jamais été reprise dans les spécifications du W3C. C’est Microsoft qui a pointé ce fait du doigt lors que la société a choisi d’ignorer ce metatag dans IE10 dans certains cas. A la place, ils ont opté pour l’utilisation de CSS Device Adaptation, solution préconisée par le W3C.
Cela consiste à utiliser la règle CSS @viewport :

@viewport {
    width: device-width;
}

 



Étant donné que ce travail est en développement, il faut utiliser la version préfixée pour qu’elle soit reconnue par IE10 :

@-ms-viewport {
    width: device-width;
}

 

L’utilisation de la balise méta viewport n’est donc pas pérenne et vous pouvez devriez déjà inclure la règle CSS @viewport dans vos feuilles de style en attendant qu’elle soit implémentée partout.

Source : http://hub.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag–webdesign-5972 (en anglais)

Page 1 of 2 1 2