UPMC University selected uPortal and CAS in 2005 and is still using it. Its portal (monUPMC) has been migrated from uPortal 2.6 to uPortal 4.0 in Autumn 2012. This new portal now supports desktop and mobile views with some specific personnalizations or "improvements". This presentation will focus on: - an "unpretentious" attempt to think Mobile and Desktop at UPMC; - the use and customization of portlets and UPMC's uPortal environment (for example : map, email-preview, simple-content) and our contributions to Jasig/Apereo community; - some developed portlets and their functionalities.

1. Happy Birthday "monUPMC":
9 years of Portal at UPMC
Ludovic Auxepaules & Christian Cousquer
UPMC, Paris, France 1

2. About us
• Christian Cousquer
– At UPMC since 2005
• SG TICE : ICT Department (in Education)
– Front-End / Software / Mobile Engineer
– Github : https://github.com/cousquer
• Ludovic Auxepaules
– At UPMC since 2011
• DSI : IT Department
– Integration / Software Engineer / Portal Administrator
– Github : https://github.com/auxepaul
2Open Apereo 2014

3. Pierre and Marie Curie University
UPMC
• One of the members of “Sorbonne Universités”
• UPMC Facts and Figures
– 18 sites across 4 regions in France
• 15 in Paris region
• 3 stations (Banyuls, Roscoff, Villefranche)
– 32 000 students, of whom
• 6400 foreign students
• 3300 doctoral candidates
– 10 500 staffs, of whom
• 8200 in research units (120 research laboratories)
• UPMC Website and Web applications
– Website : http://www.upmc.fr/en/index.html
– Portal : https://mon.upmc.fr (uPortal)
– Learning Management System (Sakai CLE)
3Open Apereo 2014

4. Plan of the presentation
• History of monUPMC portal (2005-2011)
• New monUPMC portal : uPortal v4.0 (2012-…)
• UPMC mobile and desktop approach
• Examples of use and customizations
• Portal perspectives
4Open Apereo 2014

5. 5
From 2005 to now
3 Mobile applications history at UPMC
Open Apereo 2014
https://www.youtube.com/watch?v=Gv_r1ZOvh2U

6. HISTORY OF MONUPMC PORTAL
From 2005 to 2011
6Open Apereo 2014

7. 7
2005 - uPortal 2.5 & CAS 2.0
(ESUP-Portail packaging)
Open Apereo 2014

8. 2005 - uPortal 2.5
(ESUP-Portail packaging)
• Beginning of ENF (Learning Workplace)
– Sept. 2005: First portal prototype with only 1000 students and
teachers of first year (L1)
– Sept. 2006: Medicine students and teachers
• Creation of a "div" layout instead of the default "table"
layout
• Injection of a JavaScript library
– uPortal Tests with a JavaScript library
• Prototype.js
– Ability to change the order of main navigation tabs
• Drag & Drop
8Open Apereo 2014

9. 9
2007 - uPortal 2.6
(ESUP-Portail packaging)

10. 10
2007 - uPortal 2.6
(ESUP-Portail packaging)
Open Apereo 2014

11. 2007 - uPortal 2.6
(ESUP-Portail packaging)
• ENT = "Environnement Numérique de Travail"
• ENT portal of services (a digital working space)
– Sep. 2007: All UPMC students, staff members and guests
– Examples of iChannels and Portlets
• News, Announcements, Bookmarks, Esup Stockage (file sharing)
• VideoLive version 1
• VideoArchives version 1
• Prairydog (equivalent to Jasig’s CMS portlet)
• Pimp my portal (dynamic css injection in layout)
• Adding jQuery library
– Remove of prototype.js library
– We want to test JavaScript components inside portlets in the
desktop view
11Open Apereo 2014

12. 12
AffDist Portlet
Horizontal unobrusive slider
Open Apereo 2014

13. 13
Sakai Portlet
Vertical unobrusive accordion

14. 2009 / 2011 – monUPMC "Winter"
• 2009
– Our portal "lost" its back-end developer and administrator
• No new services and portlets in monUPMC portal
– Some services never put into production servers
• Some integrated services couldn't be maintained
– File sharing and Intranet  Alfresco & Ametys CMS portlets  links
– Sakai Portlet  a link
– Pimp my portal  "no longer used" and creation of a new skin
– …
• Only security and critical updates and a new skin…
14Open Apereo 2014

15. Open Apereo 2014 15
2011 – uPortal 2.6.1
ENT before redesign / reboot

16. NEW MONUPMC PORTAL:
UPORTAL V4.0
2011: Portal project redesign / reboot
September 2012: new monUPMC in production
16Open Apereo 2014

17. From uPortal 2.6 to 4.0
2011 State of Art
• Old physical servers (no VMs)
• Central authentication system (v. 2.0)
– Limited settings
– Lots of security requirements (e.g. no services filtering)
– Mobile support issues (uMobile applications incompatibility)
• Portal (v. 2.6.1)
– No further updates or security patches from Jasig and Esup-Portail
– Old user interface and no mobile support
 A "technical reboot" and a new design
• Sept. 2011: Hiring a new "engineer" dedicated to the ENT
– UPMC chose to migrate directly to uPortal v4
 A new v4 portal (computers and mobiles) released in september 2012
Open Apereo 2014 17

18. From uPortal 2.6 to 4.0
uPortal 4.0.x at UPMC
18
• Fork and customizations of the uPortal rel-4-0-patches branch
• Picking of some functionalities of the French Esup-uPortal packaging
– Configuration items on local filter file
– Internationalization: french user messages
• Maven Portlets Overlays
– https://wiki.jasig.org/display/UPM40/Working+with+Portlet+Overlays
• Resource Server Extensions
– https://wiki.jasig.org/display/UPC/Resource+Server
– Fluid patches, CKEditor and javascripts libraries updates, logs fixes…
• Git, Github and a private Gitlab (UPMC): https://www.gitlab.com/
– Private source code management, upgrades of portal and portlets…
– Allow a close coordination between every developers (Front & Back End)
– Allow us to easily share code with uPortal, uMobile communities
Open Apereo 2014

19. From uPortal 2.6 to 4.0
Replacement of all deprecated iChannels
• Content Management System (CMS): PrairieDog Portlet  SimpleContentManagement Portlet
– https://wiki.jasig.org/display/PLT/Simple+Content+Management+Portlet
• Internal Announcements: Announcements Channel  Announcements Portlet
– https://wiki.jasig.org/display/PLT/Announcements+Portlet
• RSS Feeds Display: News Channel  NewsReader Portlet
– https://wiki.jasig.org/display/PLT/NewsReaderPortlet
• Personal Bookmarks: Esup Signet Channel  Jasig Bookmarks Portlet
– http://www.esup-portail.org/display/PROJ/Canal+signet  https://wiki.jasig.org/display/PLT/Bookmarks+Portlet
• Staff Career Information: Esup Harpège Channel  Esup Agent & AMUE Harpège WS
– http://www.esup-portail.org/display/ESUPAGENT/ESUP-AGENT
• Emails overview: Esup Imap Channel  Jasig Email-preview Portlet
– http://www.esup-portail.org/display/CANIMA  https://wiki.jasig.org/display/PLT/Email+Preview+Portlet
• Mailing Lists: Sympa Channel  Esup Sympa Portlet
– http://www.esup-portail.org/display/PROJCANSYMPA/ESUP-Sympa
• Intranet Workspaces: Esup Intranet and Stockage Channel  Alfresco & Ametys Web Sites
• Portal Usage and Statistics : Infos Channel  Statistics Portlet & Esup Monitor
– https://wiki.jasig.org/display/UPM40/Portal+Event+Logging
– https://wiki.jasig.org/display/UPC/Statistics+Reporting
19Open Apereo 2014

20. From uPortal 2.6 to 4.0
New ENT (monUPMC, CAS…)
20
• Virtual production servers (VMs)
– 2 VMs and 1 fallback server dedicated to CAS
– 4 VMs dedicated to the portal (mon.upmc.fr)
• Centos 6, 4GB RAM, 2 CPU cores
• Apache Httpd 2.2 with mod_proxy_ajp, Apache Tomcat 6.0
• Oracle Java JDK 1.6, Apache Ant 1.8, Apache Maven 3.0, MySQL 5
• Load balancing and fallback
– Cisco Content Services Switch with an SSL card
• Organization of monUPMC tabs and services
– 9 thematic tabs: 3 on guest page
– 20-30 "pushed" services depending on the user's profile
≈ 20 different portlets
≈ 130 portlet instances (with administration services)
≈ 50 Advanced CMS portlets
Open Apereo 2014

21. From uPortal 2.6 to 4.0
ENT Timeline (monUPMC, CAS, Grouper)
• From september 2011 to 2012
– Study of the existing portal and overhaul services organization, tabs
– Tests, settings and initial deployements (uPortal 4, CAS 3 and Grouper 2)
• May 2012: Maturity reached for a release in september 2012
• Aug. 2012: Grouper 2.1.2 release
• Sept. 2012: Custom uPortal 4.0.6-SR1 release (new monUPMC portal)
• Oct. 2012: Setting up private git server with Gitlab
• Oct./Nov. 2012: Flipping of all UPMC applications to a custom CAS 3.4.12
…
• May 2014: Custom uPortal 4.0.13.1 release
21Open Apereo 2014

22. monUPMC Usage Statistics
Statistics of the new UPMC portal v4
• Statistics and Usage "Tools"
– uPortal Statistics Portlet, Activity Portlet
– Esup Monitor Portlet
– CAS logs
• More than 34700 different connected users since September 2012
• Up to 30000 daily connections
– 4500 daily unique users
• Up to 450000 monthly connections
– 15000 monthly unique users
• Up to 1000 concurrent users per 5 minutes period
• More than 9000 user feedbacks collected with the Feedback Portlet
• Up to 27% users connected with a mobile device
22Open Apereo 2014

23. Open Apereo 2014 23
monUPMC Statistics
Total Logins (Unique Users)

24. Open Apereo 2014 24
monUPMC Statistics
Total Logins (Total connexions)

25. UPMC MOBILE AND DESKTOP
APPROACH
• monUPMC portal (uPortal 4) : Desktop and Mobile Views
• Tips and Tricks
25Open Apereo 2014

26. uPortal 4 at UPMC
Desktop and Mobile Approach
• uPortal 4 / uMobile 4: a triple outputs
– A desktop view
– A mobile view
– A JSON for the mobile app
• uMobile Native Application
– We didn't launch the App in the markets because there were problems of
memory leak on Android
– For the moment, we are focusing on the mobile web view
• uPortal 4.1 (Future?)
– New Respondr Theme with bootstrap in order to enhance Desktop and
Tablet experience?
26Open Apereo 2014

27. monUPMC Skins and Themes
uPortal v4.0
• 2 new skins
– 1 based on universality uPortal4 theme (desktop)
– 1 based on muniversality mobile theme (mobile)
• Specific visual artworks
– Tabs with specific colors on desktop: a javascript code
• One color by tab
– Specific colored mobile icons
• All icons portlets in a tab have the same background color
• Guest and authenticated mobile home page
– List-View instead of Grid-View
• Quick improvements
– Enhance mobile experience
– Enhance Accessibility : Hierarchy of headings in the portlets
27Open Apereo 2014

28. 28
monUPMC Skins and Themes
uPortal v4.0
Open Apereo 2014

29. Enhance User Experience
monUPMC Performance Optimizations
• Rules for Mobile Development
– Avoid page reflow
– Do efficient requests
• Performance optimization on Mobile (and Desktop)
– 80% of the resources loads are supported by the Front End
– Google Page Speed Tests
• Optimization of the rendering (Httpd and Tomcat configuration)
– JavaScript and CSS aggregation and compression (Portlets)
• Resource Server functionalities
Open Apereo 2014 29

30. Enhance User Experience
monUPMC Performance Optimizations
• Resource Server Content Improvements
– Add and use the "latest" versions of javascript librairies
– Fluid-all.js 1.4 patch (from Resource Server v1.0.36)
• Encoding issue in the multi-feed view of NewsReader Portlet
https://issues.jasig.org/browse/NEWSPLT-65
• Use jQuery >1.6 in uPortal : https://issues.jasig.org/browse/RESSERV-51
• Too many different versions of javaScript libraries
– Too many JavaScript requests (portal, portlets)
• Each portlet could import its own version of jQuery, jQuery-UI, backbone…
 Try to unify javaScript libraries used by Portal and Portlets
- jQuery 1.8.3, jQueryUI 1.8.24, jQuery Mobile 1.3.2, underscore 1.5.2,
backbone 1.0.0…
- Outcomes: jQuery 1.11.X, jQueryUI 1.10.X, jQueryMobile 1.4.X,
underscore 1.6.X, backbone 1.2.X…
Open Apereo 2014 30

31. Enhance User Experience on Mobile
jQuery Mobile 1.3.2
• jQuery-Mobile
– Mobile First and Touch-Event based Framework
– Easily create mobile-friendly views
– Major part of platforms and devices supported
– Responsive Web Design
• Widgets used on monUPMC
– Accordion, Listview
– Buttons, Checkboxes, Radio, Select, ControlGroup
– Collapsides
– Toolbars
– Responsive Table, reflow
– Transitions
• Update of jquery-mobile library on uPortal (1.1  1.3.2)
– More widgets and functionalities
– Best performance and devices support
31Open Apereo 2014

32. Enhance User Experience on Mobile
“Tips and Tricks”
• DOM scripting
– Context : Old JSF portlets with old HTML code
– Specific Javascript in the muniversality theme
– Rewrite and add elements with javascript to generate the mobile view
• Ugly but it works…
– Example: Esup Agent Portlet
• Specific CSS approach to hide and show content
– CSS class filtering : .ui-mobile
– Media Queries
– Example: Seevogh Research Network Portlet
• Enhancing user mobile experience with jQuery-Mobile
– Data-role and HTML 5 attributes
– Structure HTML code thanks to the jQM Widgets code
– Examples: SimpleContentManagement Portlet, Announcements Admin Portlet
• Add New Item Count
– Examples: VideoLive, VideoArchives, EmailPreview, EsupTwitter Portlets
32Open Apereo 2014

33. EXAMPLES OF USE AND
CUSTOMIZATIONS
• Portlets quick-fixes and Tips for enhancing desktop and
mobile experience
• UPMC and Esup Portlets
• Apereo Portlets
33Open Apereo 2014

34. VideoLive & VideoArchives Portlets
UPMC portlets
• Medicine Courses and Events on Video at UPMC
– VideoLive : Live courses (first year of Medicine) and Live Events
– VideoArchives : VOD courses (first year of Medicine)
• VideoArchives and VideoLive Project
– New development with JSR 286 Maven archetype of JASIG
• https://wiki.jasig.org/display/UMM/Using+the+uMobile+Portlet+Archetype
– Controllers, Desktop and mobile View
– View Selector with isMobile() method of IViewSelector
• https://github.com/Jasig/portlet-utils
– Spring MVC, JSTL, CSS, Javascript, jQuery, jQuery-UI, jQuery Mobile,
jQGrid, JsonP, Json, JwPlayer
• POC : Live video and VOD on uMobile
– https://www.youtube.com/watch?v=y-_aEPiDet4
Open Apereo 2014 34

35. Open Apereo 2014 35
VideoLive & VideoArchives Portlets
Desktop Views

36. Open Apereo 2014 36
VideoLive & VideoArchives Portlets
Desktop View

37. Open Apereo 2014 37
VideoLive & VideoArchives Portlets
Mobile Views

38. Seevogh Research Network
• EVO Internationnal  Seevogh Research Network
– Hybrid-cloud-based, high-definition, multi-point, video collaboration solution
– Video conferencing rooms running H.323, SIP or Cisco’s TIP telepresence
– Display of multiple video images, multiple simultaneously shared desktops
– Public and private text chat…
• Devices
– PCs running Windows, Mac and Linux
• Java Applet and now Application
– Mobile devices running Android and iOS
• Mobile Native App
• French "Research Communities" using SRN : Renater and UPMC
• 2011: Internet2 chooses Seevogh
– http://www.internet2.edu/products-services/cloud-services-
applications/seevogh/
Open Apereo 2014 38

39. Seevogh Research Network
uPortal Integration (Portlet)
• Identify the participant into Seevogh
– Use the portal authentication system (CAS, Shibboleth)
– Automatic registration into Seevogh from the University Directory
– No additional Authentication required to join a meeting
• Forward the user information from the portal to Seevogh
– Full ID and Role
• Retrieve Seevogh Information into the portal
– Meetings management
• A portlet to manage and to join meetings at UPMC
• Portlet migration from uPortal 2.6 to uPortal 4.0
– Bugs fixes and views improvements (JSP, JSF, CSS, JavaScripts…)
– Mobile enhancement with a CSS class filtering (.ui-mobile) and Media Queries
Open Apereo 2014 39

40. Open Apereo 2014 40
Seevogh Research Network
uPortal Integration (Portlet)

41. Open Apereo 2014 41
Seevogh Research Network
Client Application

42. Simple Content Management Portlet
Advanced CMS
• ≈ 40 Advanced CMS deployed in monUPMC
– Mostly used as quick links
• Others web-sites or applications
– A general code organization
• A title
• (An image and/or a subtitle)
• A short description
• A link (or others elements)
– Css classes on the first portlet div (css code on muniversality)
• .wrapper-cms : skinnning of Advanced CMS
• Mobile enhancements
– Use of Collapside jQm Widget (data-role="collapside")
– HTML5 and jQm attributes
• data-role="content", data-role="button"…
42Open Apereo 2014

43. June 3, 2014 43
Simple Content Management Portlet
"Sakai Advanced CMS"
<div class="portlet wrapper-cms">
<div class="portlet-content" data-role="content">
<div data-collapsed-icon="info" data-content-theme="b"
data-iconpos="left" data-role="collapsible">
<h3>Sakai</h3>
<p><img height="61" src="sakaiger.jpg" width="60" />
<span>
La plate-forme d&#39;enseignement de l&#39;UPMC
</span>
</p>
</div>
<p><a href="http://australe.upmc.fr/portal/login"
target="_blank" class="button" data-role="button"
data-icon="arrow-r" data-iconpos="right"
data-inline="true" data-mini="true">
Acc&eacute;der &agrave; Sakai
</a></p>
</div>
</div>
/* CSS code: only in muniversality theme */
.up .wrapper-cms {
background-color: #fff;
border-radius: 4px 4px 4px 4px;
padding: .6em;}

44. Map Portlet (Apereo)
UPMC use and customizations
44
• Jasig Community Portlet : JSR-286 Portlet
– https://wiki.jasig.org/display/PLT/Map+Portlet
– https://github.com/Jasig/MapPortlet/
• Features
– Display Google Map with markers
– API for representing campus locations (geo coordinates…)
– Search/Browse to find particular locations
• UPMC use and customizations
– Private Fork of replace-fluid-with-backbone branch
• https://github.com/Jasig/MapPortlet/tree/replace-fluid-with-backbone
– Update javascripts librairies: jQuery, backbone, backbone layout manager
– Fix some navigation bugs
– Add geocampus UnivMobile locations json (Point Of Interest)
• http://m.geocampus.fr/
– Add new informations: web site, detailed map…
Open Apereo 2014

45. Open Apereo 2014 45
Map Portlet (Apereo)
UPMC desktop view

46. Open Apereo 2014 46
Map Portlet (Apereo)
UPMC mobile view

47. Open Apereo 2014 47
Announcements Portlet (Apereo)
jQM Table Reflow Widget
• Use jQuery Mobile Table Reflow
– data-role="table" data-mode="reflow"
class="data table-stroke ui-responsive"
– http://demos.jquerymobile.com/1.3.2/widgets/table-reflow/

48. Open Apereo 2014 48
EsupTwitter Portlet
jQm List of Tweets
• Add New Item Count (24h new tweets)
– Develop MininimizedStateHandlerInterceptor
• Use jQuery Mobile ListView
– data-role="listview" and CSS code
– http://demos.jquerymobile.com/1.3.2/widgets/listviews/
• Set clickable #hashtag, @User and Links

49. Open Apereo 2014 49
Feedback Portlet (Apereo)
Submit a Feedback View
• Use jQuery Mobile Radio, Select, ControlGroup Widgets
• Enable and disable "submit" button fix: a jQuery script

50. Open Apereo 2014 50
News Reader Portlet (Apereo)
UPMC Multi-Feeds View
• Use Jquery-UI Tabs and hide RSS Feed Title on Desktop View
• Use JQuery Mobile ListView: RSS feed items with only the
story title and the story content on Mobile View

51. Open Apereo 2014Apereo default mobile view UPMC mobile view 51
Email-Preview Portlet (Apereo)
"Rewrite" of mobile view

52. FUTURE WORKS AND
PERSPECTIVES
52Open Apereo 2014

53. Future Works and Perspectives
• Define a new organization of tabs and services
• Add new services and connectors (e.g. with Sakai)
• Continue to share parts of our work with Esup and Apereo
• mUniversality theme: update jQueryMobile (1.3.2 1.4.X)?
– http://jquerymobile.com/upgrade-guide/1.4/
• Go to uPortal 4.1 and do a graphical redesign
• CAS update (4.0)
• uMobile native applications?
53Open Apereo 2014