View
114
Download
5
Category
Preview:
Citation preview
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 Mobile
Projets mobiles :Développement, uMobile & co…
M. Guérin – Université de La Rochelle
2
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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
4
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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…
<!-- 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>
> 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!
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Développements mobiles6
• 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 d’aujourd’hui…
<util:list id="mobileDeviceRegexes"> <value>.*iPad.*</value><value>.*iPhone.*</value><value>.*Android.*</value> <value>.*Black[Bb]erry.*</value><value>.*IEMobile.*</value> <!-- etc. --></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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Développements mobiles7
- En se basant sur le themeName "utilisé" par le portail
> Les différentes techniques d’aujourd’hui…
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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
• Le RWD, c’est tendance…
Développements mobiles8
> … 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)
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Développements mobiles9
• "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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Développements mobiles10
• #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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Développements mobiles11
• 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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Développements mobiles12
• 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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Développements mobiles13
• 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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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
14
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
uMobile18
• Déploiement en production?- Application basée sur Titanium
En Franceo
A l’étrangero University of Oakland (iOS)
> Etat de l’art
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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
20
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.1.2.1- UNR RUNN
> Services opérationnels
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
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Services ESUP adaptés mobiles
23
• esup-messages- Affichage des e-mails d'un utilisateur- v.2.0.0- UNPIdF (prestataire)
> Services opérationnels
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.0.2.3- Univ. Lille1 + UNPIdF (prestataire)
> Services opérationnels
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.1.0.1- UNRNPdC (prestataire)
> Services opérationnels
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.1.0.2- UNR NPdC (prestataire)
> Services opérationnels
Mobile only
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Services ESUP adaptés mobiles
27
• esup-lecture- Agrégation et affichage de flux XML d’informations- v.2.0.0- Univ. Rennes1
> Services opérationnels
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Services ESUP adaptés mobiles
28
• esup-covoiturage- Service de covoiturage (création d’offres, recherche)- v.1.0.1- UNR NPdC (prestataire)
> Services opérationnelsNOUVELLE
VERSIONNOUVELLE
VERSION
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Services ESUP adaptés mobiles
29
• esup-filemanager- Partage de documents (consultation, renommage,
etc.)- v.2.2.2 - UNR RUNN
> Services opérationnelsNOUVELLE
VERSIONNOUVELLE
VERSION
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érationnelsNOUVELLE
VERSIONNOUVELLE
VERSION
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Services ESUP adaptés mobiles
31
• esup-dossetumob- Consultation du dossier étudiant (adresses, notes,
calendrier d’examen…)- v.1.0.0- UNR NPdC (prestataire)
> Services opérationnels
Mobile only
GA
RELEASEGA
RELEASE
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
Services ESUP adaptés mobiles
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 !
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.1.0.3- Univ. Rennes1
> Services opérationnelsNOUVEAU
SERVICE !NOUVEAU
SERVICE !
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érationnelsEN COURS
DE DEV.EN COURS
DE DEV.
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 L’ETUDEA L’ETUDE
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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
36
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
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!"
Copyright 2013 ©ESUP-Days 16 - Paris 03 juillet 2013
ESUP-Mobile
http://www.esup-portail.org/ display/PROJESUPMOBILE/Projet+ESUP+Mobile
38
Recommended