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

Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013

ESUP-Days #16

Paris, 03 juillet 2013


ESUP Mobile

Projets mobiles :Développement, uMobile & co…

M. Guérin – Université de La Rochelle

2


Sommaire

• 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


Sommaire




– Etat de l’art


4


Développements mobiles5

• 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 d’aujourd’hui…

<css>/myportlet/media/css/myportlet_mob.css</css>

<js>/myportlet/media/js/myportlet_mob.js</js>

> common_skin.xml

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!



• Ecriture de vues (voire de code) spécifiques mobiles => Détection du contexte : desktop ou mobile ?

- En se basant sur le UserAgent (regex)


<util:list id="mobileDeviceRegexes"> <value>.*iPad.*</value><value>.*iPhone.*</value><value>.*Android.*</value> <value>.*Black[Bb]erry.*</value><value>.*IEMobile.*</value> </util:list>

> 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



- En se basant sur le themeName "utilisé" par le portail


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


• Le RWD, c’est tendance…


> … et de demain ?

R

DW

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)



• "One code to rule them all"

• Des exemples plutôt qu’un long discours…

- http://www.alsacreations.fr- http://mashable.com

> RWD: Kezako ?

desktop tablette smartphone



• #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;

}@media (max-width : 640px) { nav li { background: #D3311F; } }@media (max-width : 320px) {

nav li a { color: #FFFF00; } }

> myapp.css



• 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

<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>

> bootstrap-ex.css



• 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



• 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?

> RWD: Bilan


Sommaire




– Etat de l’art


14


uMobile15

• "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

> (Re?)Définition


uMobile16

• 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 ?

> Etat de l’art


uMobile17

• Déploiement en production?- Vues web mobiles d’uPortal

En Franceo UNR RUNNo Université Pierre et Marie Curieo Université de Valencienneso Université de La Rochelleo Université de Reims Champagne-Ardenne

A l’étrangero Ohio Universityo University of Chicagoo University of Oakland

> Etat de l’art


uMobile18

• Déploiement en production?- Application basée sur Titanium

En Franceo

A l’étrangero University of Oakland (iOS)

> Etat de l’art


uMobile19

• Déploiement en production?- Application basée sur PhoneGap

En Franceo

A l’étrangero Kyoto University (en cours)o Anonymous (en cours)

> Etat de l’art


Sommaire




– Etat de l’art


20


Services ESUP adaptés mobiles

21

• esup-helpdeskviewer- Affichage des derniers tickets obtenus dans

l'application ESUP Helpdesk- v.1.2.1- UNR RUNN

> Services opérationnels



22

• esup-portlet-sympa- Affichage des listes de diffusions Sympa de l'utilisateur- v.4.0- UNR RUNN + INSA Lyon + Univ. Valenciennes




23

• esup-messages- Affichage des e-mails d'un utilisateur- v.2.0.0- UNPIdF (prestataire)




24

• esup-annuaire2- Consultation d'un annuaire LDAP + géolocalisation- v.0.2.3- Univ. Lille1 + UNPIdF (prestataire)




25

• esup-sifacmiss2- Affichage du récapitulatif des frais de missions du

personnel- v.1.0.1- UNRNPdC (prestataire)




26

• esup-search-ofm- Affichage de l'offre de formation pour les primo-

entrants- v.1.0.2- UNR NPdC (prestataire)


Mobile only



27

• esup-lecture- Agrégation et affichage de flux XML d’informations- v.2.0.0- Univ. Rennes1




28

• esup-covoiturage- Service de covoiturage (création d’offres, recherche)- v.1.0.1- UNR NPdC (prestataire)

> Services opérationnelsNOUVELLE

VERSIONNOUVELLE

VERSION



29

• esup-filemanager- Partage de documents (consultation, renommage,

etc.)- v.2.2.2 - UNR RUNN


VERSIONNOUVELLE

VERSION



30

• esup-twitter- Affichage de fils Twitter- v.0.9- UNR RUNN


VERSIONNOUVELLE

VERSION



31

• esup-dossetumob- Consultation du dossier étudiant (adresses, notes,

calendrier d’examen…)- v.1.0.0- UNR NPdC (prestataire)


Mobile only

GA

RELEASEGA

RELEASE



32

• 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

> Services opérationnelsNOUVEAU

SERVICE !NOUVEAU

SERVICE !



33

• esup-ecm-dashboard- Affichage d’éléments du tableau de bord Nuxeo- v.1.0.3- Univ. Rennes1

> Services opérationnelsNOUVEAU

SERVICE !NOUVEAU

SERVICE !



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érationnelsEN COURS

DE DEV.EN COURS

DE DEV.



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


A L’ETUDEA L’ETUDE


Sommaire




– Etat de l’art


36


Conclusion37

• 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!"


ESUP-Mobile

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

38

Documents

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