La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 ESUP-Days # 16 Paris, 03 juillet 2013.

Présentations similaires


Présentation au sujet: "Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 ESUP-Days # 16 Paris, 03 juillet 2013."— Transcription de la présentation:

1 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 ESUP-Days # 16 Paris, 03 juillet 2013

2 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 ESUP Mobile Projets mobiles : Développement, uMobile & co… M. Guérin– Université de La Rochelle 2

3 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Sommaire Développements mobiles – Les différentes techniques daujourdhui… – … et de demain (?) uMobile – (Re?)Définition – Etat de lart Services disponibles – Listing des services ESUP adaptés mobiles 3

4 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Sommaire Développements mobiles – Les différentes techniques daujourdhui… – … et de demain (?) uMobile – (Re?)Définition – Etat de lart Services disponibles – Listing des services ESUP adaptés mobiles 4

5 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Développements mobiles 5 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) > Les différentes techniques daujourdhui… /myportlet/media/css/myportlet_mob.css /myportlet/media/js/myportlet_mob.js > common_skin.xml Dans le cas dun script jQuery-Mobile, pensez à vérifier que jQM (et les thèmes associés par défaut) soient bien importés !

6 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Développements mobiles 6 Ecriture de vues (voire de code) spécifiques mobiles => Détection du contexte : desktop ou mobile ? En se basant sur le UserAgent (regex) > Les différentes techniques daujourdhui….*iPad.*.*iPhone.*.*Android.*.*Black[Bb]erry.*.*IEMobile.* > applicationContext.xml //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; } > ViewDetectionUtil.java

7 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Développements mobiles 7 En se basant sur le themeName "utilisé" par le portail > Les différentes techniques daujourdhui… 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; } > ViewDectectionUtil.java Cf. repository Github de Jasig: - portlet-utils - portlet-mvc-utils - src/main/java/org/jasig/portlet/utils/mvc - IViewSelector.java - ThemeNameViewSelectorImpl.java i

8 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Le RWD, cest tendance… Développements mobiles 8 > … et de demain ? R D W esponsive eb esign (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)

9 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Développements mobiles 9 "One code to rule them all" Des exemples plutôt quun long discours… > RWD: Kezako ? desktoptablettesmartphone

10 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Développements mobiles 10 #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 > RWD: Principes fondamentaux nav li { background: #D3311F; (max-width : 640px) { nav li { background: #D3311F; (max-width : 320px) { nav li a { color: #FFFF00; } > myapp.css

11 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Développements mobiles 11 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) … > RWD: Frameworks Bienvenue sur le site du consortium ESUP-Portail! Bienvenue sur le site ESUP ! Bienvenue ! > bootstrap-ex.css

12 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Développements mobiles 12 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 > RWD: Avantages / Inconvénients

13 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Développements mobiles 13 Une solution intéressante pour proposer --à moindre coût-- une interface adaptée à un panel important de terminaux Il ny a pas que la taille qui compte… Une solution à coupler avec lutilisation de vues différentes en fonction du User Agent? > RWD: Bilan

14 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Sommaire Développements mobiles – Les différentes techniques daujourdhui… – … et de demain (?) uMobile – (Re?)Définition – Etat de lart Services disponibles – Listing des services ESUP adaptés mobiles 14

15 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 uMobile 15 "The mobilization of the portal content" Plusieurs implémentations possibles : il ny a pas UNE solution unique Le WG uMobile est en charge de la mutualisation de ces solutions > (Re?)Définition

16 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 uMobile 16 Aujourdhui ? Vues web mobiles duPortal Application basée sur Titanium (deprecated) Application basée sur PhoneGap Et demain ? Idem… Application native pour Android… … et iOS ? > Etat de lart

17 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 uMobile 17 Déploiement en production? Vues web mobiles duPortal En France o UNR RUNN o Université Pierre et Marie Curie o Université de Valenciennes o Université de La Rochelle o Université de Reims Champagne-Ardenne A létranger o Ohio University o University of Chicago o University of Oakland > Etat de lart

18 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 uMobile 18 Déploiement en production? Application basée sur Titanium En France o A létranger o University of Oakland (iOS) > Etat de lart

19 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 uMobile 19 Déploiement en production? Application basée sur PhoneGap En France o A létranger o Kyoto University (en cours) o Anonymous (en cours) > Etat de lart

20 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Sommaire Développements mobiles – Les différentes techniques daujourdhui… – … et de demain (?) uMobile – (Re?)Définition – Etat de lart Services disponibles – Listing des services ESUP adaptés mobiles 20

21 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 21 esup-helpdeskviewer Affichage des derniers tickets obtenus dans l'application ESUP Helpdesk v UNR RUNN > Services opérationnels

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

23 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 23 esup-messages Affichage des s d'un utilisateur v UNPIdF (prestataire) > Services opérationnels

24 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 24 esup-annuaire2 Consultation d'un annuaire LDAP + géolocalisation v Univ. Lille1 + UNPIdF (prestataire) > Services opérationnels

25 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 25 esup-sifacmiss2 Affichage du récapitulatif des frais de missions du personnel v UNRNPdC (prestataire) > Services opérationnels

26 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 26 esup-search-ofm Affichage de l'offre de formation pour les primo-entrants v UNR NPdC (prestataire) > Services opérationnels Mobile only

27 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 27 esup-lecture Agrégation et affichage de flux XML dinformations v Univ. Rennes1 > Services opérationnels

28 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 28 esup-covoiturage Service de covoiturage (création doffres, recherche) v UNR NPdC (prestataire) > Services opérationnels NOUVELLE VERSION

29 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 29 esup-filemanager Partage de documents (consultation, renommage, etc.) v UNR RUNN > Services opérationnels NOUVELLE VERSION

30 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 30 esup-twitter Affichage de fils Twitter v.0.9 UNR RUNN > Services opérationnels NOUVELLE VERSION

31 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 31 esup-dossetumob Consultation du dossier étudiant (adresses, notes, calendrier dexamen…) v UNR NPdC (prestataire) > Services opérationnels Mobile only GA RELEASE GA RELEASE

32 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 32 esup-portlet-intranet Affichage dune section à la manière dun intranet (navigation, recherche, derniers documents uploadés,…) v Univ. Rennes1 > Services opérationnels NOUVEAU SERVICE ! NOUVEAU SERVICE !

33 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 33 esup-ecm-dashboard Affichage déléments du tableau de bord Nuxeo v Univ. Rennes1 > Services opérationnels NOUVEAU SERVICE ! NOUVEAU SERVICE !

34 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 34 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é > Services opérationnels EN COURS DE DEV. EN COURS DE DEV.

35 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Services ESUP adaptés mobiles 35 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 > Services opérationnels A LETUDE

36 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Sommaire Développements mobiles – Les différentes techniques daujourdhui… – … et de demain (?) uMobile – (Re?)Définition – Etat de lart Services disponibles – Listing des services ESUP adaptés mobiles 36

37 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 Conclusion 37 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!"

38 Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 ESUP-Mobile display/PROJESUPMOBILE/Projet+ESUP+Mobile 38


Télécharger ppt "Copyright 2013 © ESUP-Days 16 - Paris 03 juillet 2013 ESUP-Days # 16 Paris, 03 juillet 2013."

Présentations similaires


Annonces Google