TechDays 2012 : Développement Web pour Mobile

1-      Historique

Il y a quelque année le développement web pour mobile se fait avec les languages WAP ou WML

2-      Chiffres

Aujourd’hui il y 6 Milliard de téléphones mobile 

3-      Les contraintes

Les contraintes liées au développement pour mobile sont:

– Les écrans sont petit voir très petit

– il n’y a pas de souris

– un clavier pas facile à utiliser

4-      Les enjeux

Adapter pour les différents périphériques

Rentabilité pour tous les devices

Layout unique supportant le “Touch”

5-      Méthodes de développement “old School”

– L’idée est de faire 2 sites distincts:

     1 site internet

     1 site mobile

– Dans le cas d’1 seul site il y a peu d’adaptation possible.

– Les outils disponibles sont:

     Electric Mobile simulator

     Opera Mobile Emulator

     L’émulateur de Windows phone 7 qui se trouve dans le SDK

La méthode du Framework .net qui permet de détecter si on le navigateur est un navigateur mobile est: request.Browser.IsMobileDevice

Cependant cette ne fonctionne pas parfaitement sur tous les mobiles, car la détection du mobile se fait grâce à User-Agent qui est très varié selon chaque mobile

Pour remédier à ce problème :

– il faut installer le package Nuget : 51degrees.mobi

– il faut télécharger un fichier qui contient la liste de TOUS les mobiles ainsi que leur User-Agent : WURLF ( WirelessUniversalResourceFile)

– modifier le fichier de configuration en supprimant  la section <redirect> qui se trouve dans <fiftyone>

Voici un article qui explique tout ceci en détail

http://blog.stevensanderson.com/2010/12/17/using-51degreesmobifoundationforaccuratemobilebrowserdetectiononaspnetmvc-3/

6-      S’adapter

Aujourd’hui les devices maitrisés sont Win Phone et l’Iphone.

Pour les autres il faut s’adapter en fonction de :

– la taille de l’écran

– l’orientation (portrait / paysage)

– la compatibilité de HTML  ou pas.

CSS 3 permet cette adaptation en utilisant les @media queries qui sont des feuilles de style conditionnelles.

Détails et exemples : http://coding.smashingmagazine.com/2010/07/19/howtousecss3-mediaqueriestocreateamobileversionofyourwebsite/

 7-      MVC 4 : rentabilité

MVC 4 permet de faire des applications web mobile nativement.

– Html 5 obligatoirement

– il faut utiliser les templates mobile:

     Les templates mobiles s’adaptent à l’écran

     Pour les utiliser il suffit de créer une View qui porte comme nom : nom.mobile.chtml

     Dans le global.asax modifier la propriété DisplayModes pour du spécifique

8-      Layout

Les problématiques liées au layout sont:

     l’uniformisation ergonomique

     l’interaction Homme /Device

     Développement en un minimum de temps pour un maximum de navigateur

Jquery.mobile permet de répondre à ces problématique, il est téléchargeable par Nuget : jquery.mobile.mvc

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s