4shared

Test pour et avec Windows Phone

By  |  4 Comments

Bien que l’utilisation de Windows Phone est encore faible par rapport aux autres navigateurs 1 Il est parfois nécessaire de tester votre travail Web pour Internet Explorer Mobile . Pour les développeurs Web, ce pourrait être une complication. Test pour l’environnement Windows Phone est pas toujours facultative, mais elle peut être une corvée & mdash; surtout parce que la version d’Internet Explorer qui vient avec le Windows Phone peut être décalé au mieux. Si vous êtes un développeur sans dispositif de Windows Phone, vous pourriez avoir à obtenir un peu de créativité pour assurer que vos sites sont rendus correctement.

Test Pour Et Avec Windows Phone
Le Nokia Lumia (Crédit image: Microsoft 2 ) 920.

Dans cet article, je tiens à souligner quelques outils et de techniques différentes qui peuvent aider les sites de test pour Windows Phone, même si vous ne disposez pas du périphérique réel à portée de main ou si vous ne développez pas sur Windows. Mais d’abord, regardons rapidement dans les différences entre les mobiles et de bureau Internet Explorer.

IE mobile Explained

Comme Microsoft a reconnu dans le passé, la version d’Internet Explorer trouvé sur les appareils mobiles est similaire mais pas identique 3 à la version du navigateur de bureau. Il ya quelques caractéristiques clés qui ne sont pas disponibles sur Windows Phone:

  • HTML5 soutien tactile drag-and-drop (démo 4 ).
  • Vidéos qui utilisent le cryptage des médias Extension 5 ne jouera pas sur Windows Phone.
  • CSS tactile Vues autre que overflow: défiler
  • CSS3 césure 6 est également pas disponible

Ce sont toutes des caractéristiques plutôt mineures, mais vous avez encore besoin de connaître les différences de rendu et de les prendre en compte.

Outils de test

La précision est pas toujours la chose la plus importante de ce genre de tests. Au cours du développement, il est plus important de tester et itérer rapidement que obtenir une mise en œuvre au pixel près sur le premier essai. Mais vous avez besoin de savoir comment la précision de votre méthode d’essai est de sorte que vous pouvez planifier le test final en conséquence.

Pour vous aider à obtenir un sens de la précision de chaque méthode de test, nous allons comparer chaque outil de test contre le rendu de deux sites Web sur un périphérique réel (Nokia Lumia 920). Pour référence, nous allons voir comment SmashingMag 7 (sensibles) et Quirksmode 8 (ne répondant pas) rendre sur un véritable appareil Windows Phone:

Rendering on the Nokia Lumia 920 - Test Pour Et Avec Windows Phone 9
Rendu sur le Nokia Lumia 920. (Voir grande version 10 )

Plus tard dans l’article, nous allons comparer le rendu original avec le rendu dans l’outil de test pour voir comment l’outil est précis. Dans le meilleur des cas, un outil de test va produire exactement le même rendu que le dispositif réel, avec 100% de précision. Débutons droite, allons-nous?

Internet Explorer Emulation

Le moyen le plus rapide et le plus facile à tester un site pour l’environnement Windows Phone est d’utiliser Internet Explorer et de son service de l’émulateur intégré. Grâce aux outils de développement fournis dans le navigateur lui-même, vous serez en mesure d’exécuter une émulation de téléphone. Cela inclut des options telles que le profil de navigateur, l’orientation et la résolution de l’écran. Vous pouvez parcourir les paramètres en temps réel à regarder les différents appareils et résolutions, et vous pouvez compléter les tests localement sur votre ordinateur avant que le site va vivre. En outre, vous pouvez basculer entre les versions mobiles du site Web et la version de bureau pour assurer qu’aucun de vos changements ont affecté la façon dont l’apparence du site sur la version de bureau de Internet Explorer.

Tout comme la simulation de périphérique dans Chrome, cela ressemble à une grande idée et une solution facile pour un test rapide. Très probablement, vous aurez besoin de tester pour Internet Explorer à un certain moment, alors pourquoi ne pas intégrer Windows Phone dans cette étape de test?

Nokia Lumia (left), IE emulation (right) - Test Pour Et Avec Windows Phone 11
Nokia Lumia (à gauche), l’émulation IE (à droite). (Voir grande version 12 )

Malheureusement, les résultats de rendu nous montrent que l’émulation dans Internet Explorer est pas encore fiable pour tester les sites sensibles .

Nokia Lumia (left), IE emulation (right) - Test Pour Et Avec Windows Phone 13
Nokia Lumia (à gauche), l’émulation IE (à droite). (Voir grande version 14 )

Il semble que l’émulation ignore les paramètres de fenêtres et redimensionne seulement la page afin de l’adapter à l’écran. Bien que ce soit l’une des méthodes les plus rapides de voir un site Web dans un environnement de Windows Phone, il est surtout utile pour le contrôle rapide des sites Web qui ne sont pas sensibles plutôt que des tests plus complets.

Windows Phone Emulator

Pour les concepteurs qui apprécient la précision plus une option légère de test, il est un émulateur Windows Phone 37 15 disponible pour Windows Phone 7 et Windows Phone 8. Si vous n’êtes pas sur Windows les émulateurs peuvent également être utilisés par un service tel que BrowserStack 16 .

Le autonome émulateur Windows Phone est beaucoup mieux que l’émulation intégré dans Internet Explorer. L’émulateur exécute une copie de l’ensemble du système d’exploitation Windows Phone, de sorte que vous pouvez tester des applications natives aux côtés de votre projet web. Il est la solution idéale pour ceux qui ont besoin simplement de tester sur une plate-forme qui; utilisation de l’émulateur en ligne peut être une option plus complète pour ceux qui ont besoin de faire beaucoup de tests multi-plateforme.

Nokia Lumia (left), Windows Phone emulator (right) - Test Pour Et Avec Windows Phone 17
Nokia Lumia (à gauche), l’émulateur Windows Phone (à droite). (Voir grande version 18 )

Comme les résultats le montrent, l’émulateur Windows Phone est pas tout à fait aussi précis dans le rendu que vous espérez. En particulier, les icônes SVG de SmashingMagazine en haut à droite ne fonctionnent pas dans l’émulateur, mais affichent comme prévu sur le périphérique réel .

Nokia Lumia (left), Windows Phone emulator - Test Pour Et Avec Windows Phone 19
Nokia Lumia (à gauche), émulateur Windows Phone. (À droite) (Voir grande version 20 )

L’émulateur a quelques limitations du système. Par exemple, l’émulateur de Windows Phone 8 ne fonctionne que sur Windows 8 et plus. Pour ceux qui ont Mac OS X ou d’autres systèmes d’exploitation, il est impossible d’installer et d’utiliser l’émulateur directement, sans l’aide d’une machine virtuelle. En utilisant une solution basée sur le Web est généralement la meilleure option.

Comme avec tous les émulateurs, bien que l’émulateur fourni par Microsoft est probablement la plus précise disponible, il ne sera toujours pas en mesure d’afficher le site avec une précision absolue pour chaque appareil. Certains problèmes matériels restent qui ne peut être compensée par un émulateur. Pourtant, l’émulateur Windows est probablement le meilleur émulateur que vous pouvez trouver si vous voulez utiliser un émulateur logiciel.

Périphérique réel

La meilleure méthode de test pour Windows Phone est sans aucun doute l’essai avec un périphérique réel. Comme nous l’avons vu, l’émulateur est proche, mais ne sont pas aussi précises que nous aimerions qu’il soit. Et, bien sûr, il ya certaines choses qui ne peut pas être simulées ou émulés. Par exemple, l’expérience de l’utilisateur peut être modifiée par la façon dont l’utilisateur doit manipuler leur écran tactile. Lorsque vous utilisez un dispositif réel, la plupart des développeurs se concentrent sur Windows Phone 8 que Windows Phone 7 est déjà en déclin 21 . Le rendu du navigateur peut également varier selon l’appareil, comme la résolution de l’appareil sera différente de dispositif mobile pour appareil mobile.

Si vous ne voulez pas acheter un appareil de test dédié Je vous recommande de jeter un regard sur les services offerts par Perfecto Mobile 22 , CrossBrowserTesting.com 23 ou DeviceAnywhere [ 1999150] 41 24 , qui vous donne accès en ligne à des appareils Windows Phone parmi beaucoup d’autres. Ces dispositifs réels rendent tout comme mon dispositif de test de sorte que vous serez un côté en sécurité ici.

Si vous voulez acheter un appareil de test, vous pouvez aller avec la solution haut de gamme et d’acheter le plus puissant Lumia 1520 25 ; choisir quelque chose dans le milieu comme le Lumia 920 26 ; ou un bâton pour le bas de gamme avec un Lumia 430 27 , le moins cher de Windows Phone.

débogage à distance

Maintenant que vous pouvez trouver tous les bugs de conception, comment pouvez-vous les résoudre? Je ne trouve rien de plus frustrant que se fondant sur des conjectures aléatoire pour corriger un bug. Heureusement, vous pouvez utiliser weinre 28 (Web inspecteur télécommande) pour obtenir un débogueur distant décent passe pour Windows Phone. Il est similaire à débogage à distance sur Android Chrome 29 mais avec moins de fonctionnalités.

Weinre

Weinre est un outil de débogage à distance open source pour le débogage des sites Web sur un Windows Phone (et tout autre appareil mobile, bien sûr). Comme un outil open source, il est entièrement gratuit et plus de développeurs avancés peuvent même modifier son code. Microsoft conseille même aux développeurs d’utiliser weinre 30 pour déboguer sur Windows Phone.

Avec weinre vous êtes en mesure d’inspecter les DOM et changer à la volée, permettant des changements en temps réel. Bien que l’outil ne permet pas de fonctionnalités avancées telles que le débogage JavaScript – la chose entière fonctionne sur JavaScript, ce qui limite un peu -. Il est toujours une excellente solution pour les tests et le débogage à distance

Utilisation weinre est vraiment facile. Il fonctionne sur Node.js 31 . Avec deux commandes simples que vous pouvez installer et démarrer le serveur weinre. Sous Windows:

  NGP -g installer weinre
weinre --httpPort 8080 --boundHost -tous-
 

Et sur Mac OS X et Linux:

  sudo NGP -g installer weinre
weinre --httpPort 8080 --boundHost -tous-
 

Weinre va maintenant courir à votre localhost: 8080. Pour déboguer votre appareil Windows Phone, vous devez suivre les étapes ci-dessous:

  • Ouvrir localhost:. 8080 sur votre machine de développement
  • Dans la section Script cible du site Web qui ouvre, vous trouverez le & lt; script de & gt;. élément que vous devez ajouter au site Web que vous souhaitez tester
  • Maintenant, ouvrez la page sur votre Windows Phone comme normal.
  • Sur votre machine de développement, les outils de développement sont maintenant disponibles ici: localhost: 8080 / client / # anonyme
  • .

Notez que weinre est un outil de débogage ne devrait jamais être exécuté dans la production que cela pourrait poser un risque de sécurité 32 .

Web Inspector Remote - Test Pour Et Avec Windows Phone 33
Inspecteur à distance
Web. (Voir grande version 34 )

Si vous souhaitez utiliser weinre comme un outil de développement, vous aurez besoin d’avoir les périphériques que vous souhaitez tester ce soit physiquement, dans le nuage, ou émulé. Pourtant, il est un excellent moyen de tester en temps réel et devraient être inclus dans l’arsenal de tout développeur web. L’environnement weinre de débogage peut être ouvert dans un navigateur majeur.

Qu’en est-il Windows Phone 10?

Comme le temps d’écrire aucun service web offert tests de la version bêta de Windows Phone 10, et actuellement il n’y a aucun périphérique disponible qui aura préinstallé. Mais si vous voulez tester pour le prochain nouveau système d’exploitation, vous pouvez soit mettre à jour votre appareil 35 pour Windows 10 ou d’exécuter l’émulateur à l’intérieur d’un Windows 10 l’installation 36 sur votre machine de bureau en utilisant la dernier SDK Windows Phone et Visual Studio 2013.

Résumé

Comment votre site look sur la plateforme Windows Phone? Environ 3% de vos utilisateurs mobiles seront en utilisant un Windows Phone – de sorte que vous devrez peut-être vous assurer que votre site affiche correctement. Comme nous l’avons vu, il est pas si facile de tester pour Windows Phone comme tous les outils de test (même la émulateur par Microsoft) ne rendent pas fiable. Je suggère d’aller avec l’un des services en ligne pour accéder au périphérique réel que cela fonctionne plutôt bien. Le seul inconvénient est que weinre ne fonctionnera pas si vous ne faites pas votre machine de développement accessible de l’extérieur.

Ressources

  • Windows Phone Emulator 37 15
  • CrossBrowserTesting.com 38
  • BrowserStack 39
  • Perfecto Mobile 40
  • DeviceAnywhere 41 24
  • « tester et déboguer les applications HTML5 distance sur Windows Phone 8 Devices 42  » par Keith Ward dans Visual Studio Magazine

(da, ml, og)

Notes

  1. 1 https://www.netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=1
  2. 2 http: // www.microsoft.com
  3. 3 https://msdn.microsoft.com/en-us/library/ie/dn736066%28v=vs.85%29.aspx
  4. 4 http: //html5demos.com/drag
  5. 5 https://msdn.microsoft.com/en-us/library/ie/bg182646(v=vs.85).aspx#eme
  6. 6 http://www.hongkiat.com/blog/css3-hyphenation/
  7. 7 http://www.smashingmagazine.com
  8. 8 http://www.quirksmode.org [ 1999027]
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/04/02-device-rendering-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/04/02-device-rendering-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/04/03-mag-ie-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/ uploads / 2015/04/03-mag-ie-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/04/04-q-ie-opt. png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/04/04-q-ie-opt.png
  15. 15 https://msdn.microsoft.com/en-us/library/windows/apps/ff402563%28v=vs.105%29.aspx
  16. 16 http://www.browserstack.com
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/04/05-mag-emulator-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/04/05-mag-emulator-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/04/06-q-emulator-tops.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/04/06-q-emulator-tops.png
  21. 21 http://techcrunch.com/2014/11/27/windows-phone-8-1-finally-breaks-the-50-market-share-threshold/
  22. 22 http://perfectomobile.com
  23. 23 http://www.crossbrowsertesting.com
  24. 24 https://www.keynote.com/solutions/testing/mobile-testing
  25. 25 http://www.microsoft.com/de-de/mobile/smartphone-handy/lumia1520/
  26. 26 http://www.microsoft.com/en/mobile/phone/lumia920 /
  27. 27 http://www.microsoft.com/en/mobile/phone/lumia430-dual-sim/specifications/
  28. 28 http://people.apache.org/~ pmuellr / weinre-docs / latest /
  29. 29 https://developer.chrome.com/devtools/docs/remote-debugging
  30. 30 https://msdn.microsoft.com/en-us/library/windows/apps/ff402563%28v=vs.105%29.aspx
  31. 31 https://nodejs.org/
  32. 32 http://people.apache.org/~pmuellr/weinre-docs/latest/Security.html
  33. 33 https: // www. smashingmagazine.com/wp-content/uploads/2015/04/07-weinre-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2015/04/07- weinre-opt.png
  35. 35 http://www.ibtimes.co.uk/how-install-windows-10-technical-preview-phones-any-windows-phone-8-1-device-1488013
  36. 36 http://www.codefoster.com/wponwin10/
  37. 37 https://msdn.microsoft.com/en-us/library/windows/apps/ff402563%28v=vs.105%29.aspx
  38. 38 http://www.crossbrowsertesting.com/
  39. 39 http://www.browserstack.com/
  40. 40 http://perfectomobile.com/
  41. 41 https : //www.keynote.com/solutions/testing/mobile-testing
  42. 42 http://visualstudiomagazine.com/articles/2013/06/13/test-and-debug-html5-apps-remotely.aspx

The Test poste pour et avec Windows Phone première apparition sur Smashing Magazine.

Test Pour Et Avec Windows Phone
Test Pour Et Avec Windows Phone
Test Pour Et Avec Windows Phone
Test Pour Et Avec Windows Phone
Test Pour Et Avec Windows Phone

Test Pour Et Avec Windows Phone

4 Comments

  1. Graceland

    30 avril 2016 at 11 h 41 min

    I’ve been surfing online more than three hours today, yet I never found any inrteesting article like yours. It’s pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the net will be much more useful than ever before.

  2. Marge

    1 mai 2016 at 23 h 42 min

    Take any tips while you get them for running a blog. Make sure to generate a spot where by th71r#82ye;&e able to be saved. Crafting just when inspired might be unproductive to the weblog. Repeatedly, the very best suggestions can show up when you are unable to weblog. So give them a spot to expand and prosper.

  3. Tangela

    6 mai 2016 at 0 h 01 min

    James – we’ll check our records and get this fixed. Sorry about the coinusnof. Just to make sure, you received something via regular mail with this incorrect info, is that right?

    • Lucy

      19 juillet 2016 at 14 h 14 min

      By febbraio 20, 2013 – 2:01 pmIf you dont mind, where do you host your blog? I am sehiacrng for a good quality web host and your webpage appears to be extremely fast and up just about all the time

Leave a Reply

Votre adresse de messagerie ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>