ESUP-Days #16 Paris, 03 juillet 2013 1

Développement, uMobile & co… 2 ESUP Mobile Projets mobiles : Développement, uMobile & co… Bonjour à tous, Donc comme d’habitude, je vais vous parler un petit peu de l’atelier ESUP-Mobile et des travaux et activités sur lesquels nous travaillons M. Guérin – Université de La Rochelle 2

Sommaire Développements mobiles uMobile Services disponibles 3 Développements mobiles Les différentes techniques d’aujourd’hui… … et de demain (?) uMobile (Re?)Définition Etat de l’art Services disponibles Listing des services ESUP adaptés mobiles 3 grandes parties - Une partie plutôt technique faisant le point sur les différentes solutions possibles pour réaliser des services adaptés mobiles dans un contexte uPortal - Une 2e partie dédiée à uMobile - et comme d’habitude, un petit tour d’horizon des services adaptés mobiles et issus de la communauté ESUP 3

Sommaire Développements mobiles uMobile Services disponibles 4 Développements mobiles Les différentes techniques d’aujourd’hui… … et de demain (?) uMobile (Re?)Définition Etat de l’art Services disponibles Listing des services ESUP adaptés mobiles 4

Développements mobiles 5 > Les différentes techniques d’aujourd’hui… CSS spécifique mobile… … et/ou script JS (jQuery-mobile) A déclarer dans le common_skin.xml (ou les skin.xml de vos skins mobiles personnalisées) > common_skin.xml <!-- Si CSS spécifique mobile --> <css>/myportlet/media/css/myportlet_mob.css</css> <!-- Si script JS spécifique mobile--> <js>/myportlet/media/js/myportlet_mob.js</js> Donc je vais commencer par un petit rappel des techniques que nous avons jusque-là identifiées et que l’on vous a déjà présenté lors de précédentes ESUP-Days donc je ne vais pas rentrer dans le détail de chacune d’elles Bon je n’en ai pas parlé ici mais il se peut que votre interface soit de base adaptée mobiles… et ne nécessite donc aucune des méthodes que je vais mentionner après mais bon… partons du principe qu’elle ne soit pas adapté mobile… La première technique consiste à créer une CSS et/ou un script JS (à base de jQueryMobile) spécifique mobile… C’est la solution la plus simple à mettre en place techniquement parlant puisqu’il s’agit juste de fichier CSS/JS qu’il suffit de déclarer au niveau du portail dans le fichier common_skin.xml ou dans les skin.xml de chacune de vos skins si vous voulez un rendu spécifique en fonction de si vous vous trouvez sur Android, iOS, etc. Dans le cas d’un script jQuery-Mobile, pensez à vérifier que jQM (et les thèmes associés par défaut) soient bien importés ! 5

Développements mobiles 6 > Les différentes techniques d’aujourd’hui… Ecriture de vues (voire de code) spécifiques mobiles => Détection du contexte : desktop ou mobile ? En se basant sur le UserAgent (regex) > applicationContext.xml <util:list id="mobileDeviceRegexes"> <value>.*iPad.*</value><value>.*iPhone.*</value><value>.*Android.*</value> <value>.*Black[Bb]erry.*</value><value>.*IEMobile.*</value> <!-- etc. --> </util:list> > ViewDetectionUtil.java La deuxième technique consiste à créer des vues (voire du code Java) spécifique mobile… La question est alors de savoir : comment déterminer si on se trouve dans un contexte mobile ou non.. Pour cela, il y a 2 principales méthodes. La première consiste à parser le UserAgent de l’utilisateur et à le comparer à un ensemble d’expressions régulières qui permettent de définir si le UserAgent courant est mobile ou non. Donc là, dans les cadres, je vous ai mis une liste non exhaustive d’expressions régulières ainsi qu’un extrait du code Java censés détecter si l’on se trouve dans un environnement mobile ou non… //Load patterns + handle potential error cases, then... boolean isMobile = false; String userAgent = request.getProperty("user-agent"); if (userAgent != null && patterns.size() != 0) { for (Pattern pattern : patterns) { if (pattern.matcher(userAgent).matches()) { isMobile = true; break; } 6

Développements mobiles 7 > Les différentes techniques d’aujourd’hui… En se basant sur le themeName "utilisé" par le portail > ViewDectectionUtil.java boolean isMobile = false; final String[] mobileThemes = request.getPreferences().getValues("mobileThemes", "UniversalityMobile"); final String themeName = request.getProperty("themeName"); for (String theme : mobileThemes) { if (themeName.equals(theme)) {     isMobile = true; break;    } } La deuxième méthode consiste elle à utiliser le themeName positionné par uPortal… Car je ne sais pas si c’est la peine que je le reprécise mais uPortal a lui-même des vues mobiles donc il fait lui-même ce travail de détection, avec la méthode précédemment présentée… C’est pourquoi dans le portail on se retrouve avec 2 thèmes universality pour la vue desktop et le thème Muniversality ou UniversalityMobile pour la partie mobile… Dans sachant ça, il est en fait possible de récupérer dans la portlet le thème en cours pour uPortal et se baser là-dessus pour dire si la portlet se trouve dans un contexte mobile ou non… Comme je l’ai indiqué dans le cadre bleu, Jasig propose une implémentation de cette détection dans le module portlet-mvc-utils du projet portlet-utils… Donc ajoutant cette dépendance à votre projet, vous devriez juste avoir à faire appel à cet utilitaire et… voilà ! L’avantage de cette solution, c’est que si vous souhaitez faire évoluer la liste des expressions régulières détectant les UserAgent mobile, il vous suffit de faire la modif au niveau du portail et cela sera aussi valable pour votre portlet L’inconvénient, si on peut dire, c’est que justement vous êtes « dépendant » de la détection du portail… Donc si par exemple vous souhaitez avoir l’affichage « desktop » sur un tablette alors que le portail considère les tablettes comme des terminaux mobiles et bien vous êtes coincé… Cf. repository Github de Jasig: - portlet-utils - portlet-mvc-utils - src/main/java/org/jasig/portlet/utils/mvc - IViewSelector.java - ThemeNameViewSelectorImpl.java i 7

Développements mobiles 8 > … et de demain ? Le RWD, c’est tendance… R esponsive W eb D esign Ok donc là, je vous ai parlé des technos utilisables et utilisés jusqu’à maintenant… Mais il y a une nouvelle technique qui a le vent en poupe et qui a été mentionné à plusieurs reprises dans les sessions mobiles à la conf Apereo… c’est le Responsive Web Design! Pour ceux qui s’en souviennent, Raymond avait fait une petite introduction à cette technique lors d’une précédente édition des ESUP-Days mais on trouvait utile et intéressant d’approfondir un peu ce sujet vu que cette « mode » continue à faire des adeptes.. Et notamment au sein de la communauté Apereo ! Donc pour faire simple, le RWD consiste à réaliser des pages web offrant un affichage optimal à l’utilisateur quelque soit le terminal utilisé : qu’il s’agisse d’un PC avec un écran de 24pouces ou d’un écran de smartphone avec son écran de 3pouces et demi… (source Wikipedia) […] Web design approach aimed at crafting sites to provide an optimal viewing experience --easy reading and navigation with a minimum of resizing, panning, and scrolling-- across a wide range of devices (from desktop computer monitors to mobile phones) 8

Développements mobiles 9 > RWD: Kezako ? "One code to rule them all" Des exemples plutôt qu’un long discours… http://www.alsacreations.fr http://mashable.com desktop tablette smartphone Et le « challenge » si je puis dire c’est d’obtenir cet affichage optimal via une interface unique qui va s’adapter automatiquement à l’écran de visualisation… Il n’y a donc qu’un seul code qui va s’adapter pour l’ensemble des terminaux. Le plus simple est je pense de vous illustrer cela par des exemples… 9

Développements mobiles 10 Développements mobiles > RWD: Principes fondamentaux #1 Flexibles, ta grille et tes contenus média seront… Eviter les tailles/hauteurs/positionnements/… fixes #2 Les Media Queries tu maîtriseras… Extension CSS > myapp.css nav li { background: #D3311F; } @media (max-width : 640px) { @media (max-width : 320px) { nav li a { color: #FFFF00; En fait, pour résumer, le RWD se résume en 2 grands principes : * Le premier : c’est qu’il faut mettre en place une grille d’affichage fluide et proposer des contenus média flexible… Il faut donc éviter au maximum les tailles/hauteur/positionnement fixes,… Sinon, voilà ce qu’on obtient… EXEMPLE NOT RWD Le RWD se base également sur l’utilisation de media queries qui sont une extension de CSS3 et qui permettent à la page d’appliquer des règles CSS différentes en fonction des caractéristiques du terminal de consultation. Dans une grande partie des cas, pour du RWD, il s’agit de règles conditionnées par la largeur du terminal… Donc là en reprenant la même page que précédemment mais en appliquant les media-queries qui vont bien, on obtient quelque chose d’un peu plus fluide… EXEMPLE RWD 10

Développements mobiles 11 Développements mobiles > RWD: Frameworks Des boîtes à outils existent pour aider à générer des pages HTML proposant un responsive design Twitter Bootstrap (v.2.3.2) Zurb Foundation (v.4.2.3) … Bien évidemment, il existe des boîtes à outils permettent de faciliter le développement de telles interfaces comme Bootstrap et Foundation, la plus répandue actuellement étant Bootstrap… Ces frameworks permettent de faciliter le développement en proposant des composants, des règles CSS prédéfinies, etc… EXEMPLE BOOTSTRAP > bootstrap-ex.css <div class="visible-desktop">Bienvenue sur le site du consortium ESUP-Portail!</div> <div class="visible-tablet">Bienvenue sur le site ESUP !</div> <div class="visible-phone">Bienvenue !</div> 11

Développements mobiles 12 > RWD: Avantages / Inconvénients The good stuff… Un code => Affichage adapté dans une majorité des cas Technologiquement "simple" : HTML/CSS Coûts de dév. et de maintenance réduits The Dark Side… Temps de chargement Performances Usages/besoins différents selon les terminaux Couts de dev et maintenance : 1 seul code (cela dit, 1 seul code mais plus de code) Facilement testable : navigateur Temps de chargement : on charge l’intégralité de la page et donc on charge du code « inutile » qui sera caché par exemple à l’utilisateur mobile… or dans un contexte mobile, une des problématiques est justement de charger au minimum pour avoir la meilleure expérience utilisateur possible… Les utilisateurs sont relativement exigeants donc attendre 5-10sec qu’une page se charge… ce n’est pas trop conseillé ou envisageable Performance : calcul CPU pour resizer les images, etc. Usage : c’est pas parce que l’affichage est adapté à votre écran que le contenu est pertinent… donc le rwd ne répond pas forcément à cette problématique Un seul code… mais plus de code 12

Développements mobiles 13 > RWD: Bilan Une solution intéressante pour proposer --à moindre coût-- une interface adaptée à un panel important de terminaux Il n’y a pas que la taille qui compte… Une solution à coupler avec l’utilisation de vues différentes en fonction du User Agent? Donc voilà ce qu’on peut en dire : Permet de proposer une interface adaptée à l’ensemble des terminaux de l’utilisateur et ce, pour un faible coût… La taille est un critère certe mais est-ce suffisant ? Pas les mêmes besoins et attente en desktop, tablette et smartphone… En plus, le critère de la taille devient de plus en plus flou pour définir dans quelle « famille » de terminal on se trouve.... Quand on voit un Samsung Note et son écran de 5,3’’ ou les tablettes qui proposent des résolutions de plus en plus élevées (iPad écran rétina 2048 x 1536 pixels.), etc… Pour les questions de perf citées précédemment, la solution ne serait-elle pas de continuer à proposer des vues JSP différentes en fonction du terminal (et minimiser les scripts à importer, etc) et utiliser le RWD pour proposer un affichage optimisé quelque soit le 13

Sommaire Développements mobiles uMobile Services disponibles 14 Développements mobiles Les différentes techniques d’aujourd’hui… … et de demain (?) uMobile (Re?)Définition Etat de l’art Services disponibles Listing des services ESUP adaptés mobiles 14

uMobile > (Re?)Définition "The mobilization of the portal content" 15 > (Re?)Définition "The mobilization of the portal content" Plusieurs implémentations possibles : il n’y a pas UNE solution unique Le WG uMobile est en charge de la mutualisation de ces solutions Le uM WG se charge de mutualiser et promouvoir ces solutions… On essaie de faire de la veille, de suivre les tendances, prendre les bonnes décisions au bons moments… 15

uMobile > Etat de l’art Aujourd’hui ? Et demain ? 16 > Etat de l’art Aujourd’hui ? Vues web mobiles d’uPortal Application basée sur Titanium (deprecated) Application basée sur PhoneGap Et demain ? Idem… Application native pour Android… … et iOS ? 16

uMobile > Etat de l’art Déploiement en production? 17 > Etat de l’art Déploiement en production? Vues web mobiles d’uPortal En France UNR RUNN Université Pierre et Marie Curie Université de Valenciennes Université de La Rochelle Université de Reims Champagne-Ardenne A l’étranger Ohio University University of Chicago University of Oakland 17

uMobile > Etat de l’art Déploiement en production? 18 > Etat de l’art Déploiement en production? Application basée sur Titanium En France  A l’étranger University of Oakland (iOS) D’après la conf Apereo, les applis natives ont surtt été déployées pour contrôler l’image et l’aspect marketing des universités sur les stores… car des personnes principalement des étudiants utilisaient l’image des pour leurs applis… ce qui peut avoir, comme vous l’imaginez, des conséquences assez graves dans certains cas… 18

uMobile > Etat de l’art Déploiement en production? 19 > Etat de l’art Déploiement en production? Application basée sur PhoneGap En France  A l’étranger Kyoto University (en cours) Anonymous (en cours) 19

Sommaire Développements mobiles uMobile Services disponibles 20 Développements mobiles Les différentes techniques d’aujourd’hui… … et de demain (?) uMobile (Re?)Définition Etat de l’art Services disponibles Listing des services ESUP adaptés mobiles 20

Services ESUP adaptés mobiles 21 > Services opérationnels esup-helpdeskviewer Affichage des derniers tickets obtenus dans l'application ESUP Helpdesk v.1.2.1 UNR RUNN 21

Services ESUP adaptés mobiles 22 > Services opérationnels esup-portlet-sympa Affichage des listes de diffusions Sympa de l'utilisateur v.4.0 UNR RUNN + INSA Lyon + Univ. Valenciennes 22

Services ESUP adaptés mobiles 23 > Services opérationnels esup-messages Affichage des e-mails d'un utilisateur v.2.0.0 UNPIdF (prestataire) 23

Services ESUP adaptés mobiles 24 > Services opérationnels esup-annuaire2 Consultation d'un annuaire LDAP + géolocalisation v.0.2.3 Univ. Lille1 + UNPIdF (prestataire) 24

Services ESUP adaptés mobiles 25 > Services opérationnels esup-sifacmiss2 Affichage du récapitulatif des frais de missions du personnel v.1.0.1 UNRNPdC (prestataire) 25

Services ESUP adaptés mobiles 26 > Services opérationnels esup-search-ofm Affichage de l'offre de formation pour les primo-entrants v.1.0.2 UNR NPdC (prestataire) Mobile only 26

Services ESUP adaptés mobiles 27 > Services opérationnels esup-lecture Agrégation et affichage de flux XML d’informations v.2.0.0 Univ. Rennes1 27

Services ESUP adaptés mobiles 28 > Services opérationnels esup-covoiturage Service de covoiturage (création d’offres, recherche) v.1.0.1 UNR NPdC (prestataire) NOUVELLE VERSION 28

Services ESUP adaptés mobiles 29 > Services opérationnels esup-filemanager Partage de documents (consultation, renommage, etc.) v.2.2.2 UNR RUNN NOUVELLE VERSION 29

Services ESUP adaptés mobiles 30 > Services opérationnels esup-twitter Affichage de fils Twitter v.0.9 UNR RUNN NOUVELLE VERSION 30

Services ESUP adaptés mobiles 31 Services ESUP adaptés mobiles > Services opérationnels esup-dossetumob Consultation du dossier étudiant (adresses, notes, calendrier d’examen…) v.1.0.0 UNR NPdC (prestataire) GA RELEASE Mobile only 31

Services ESUP adaptés mobiles 32 > Services opérationnels esup-portlet-intranet Affichage d’une section à la manière d’un intranet (navigation, recherche, derniers documents uploadés,…) v.1.0.5 Univ. Rennes1 NOUVEAU SERVICE ! 32

Services ESUP adaptés mobiles 33 > Services opérationnels esup-ecm-dashboard Affichage d’éléments du tableau de bord Nuxeo v.1.0.3 Univ. Rennes1 NOUVEAU SERVICE ! 33

Services ESUP adaptés mobiles 34 > Services opérationnels esup-portlet-jefyco Affichage des états financiers (dépenses, recettes) de l’établissement v.1.0-SNAPSHOT (livraison avant fin 2013) Univ. de Franche-Comté EN COURS DE DEV. 34

Services ESUP adaptés mobiles 35 > Services opérationnels esup-portlet-dt Affichage des dernières demandes de travaux (créées et/ou affectées) + création de DT simplifiée v.0 Univ. de La Rochelle A L’ETUDE 35

Sommaire Développements mobiles uMobile Services disponibles 36 Développements mobiles Les différentes techniques d’aujourd’hui… … et de demain (?) uMobile (Re?)Définition Etat de l’art Services disponibles Listing des services ESUP adaptés mobiles 36

Conclusion Un secteur en constante évolution… uMobile 37 Conclusion Un secteur en constante évolution… Des technos/méthodes qui changent uMobile Vues mobiles uPortal4 efficaces Solution native encore peu déployée… … mais à suivre de (très) près ! Des services adaptés mobiles toujours plus nombreux ! "Come join us!" uMobile: nouvelle dynamique suite à la conf Apereo 37

ESUP-Mobile 38 http://www.esup-portail.org/ display/PROJESUPMOBILE/Projet+ESUP+Mobile 38