Happy birthday "monUPMC": 9 years of Portal at UPMC

19,253 views

Published on

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.

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
19,253
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Happy birthday "monUPMC": 9 years of Portal at UPMC

  1. 1. Happy Birthday "monUPMC": 9 years of Portal at UPMC Ludovic Auxepaules & Christian Cousquer UPMC, Paris, France 1
  2. 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. 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. 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. 5 From 2005 to now 3 Mobile applications history at UPMC Open Apereo 2014 https://www.youtube.com/watch?v=Gv_r1ZOvh2U
  6. 6. HISTORY OF MONUPMC PORTAL From 2005 to 2011 6Open Apereo 2014
  7. 7. 7 2005 - uPortal 2.5 & CAS 2.0 (ESUP-Portail packaging) Open Apereo 2014
  8. 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. 9 2007 - uPortal 2.6 (ESUP-Portail packaging)
  10. 10. 10 2007 - uPortal 2.6 (ESUP-Portail packaging) Open Apereo 2014
  11. 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. 12 AffDist Portlet Horizontal unobrusive slider Open Apereo 2014
  13. 13. 13 Sakai Portlet Vertical unobrusive accordion
  14. 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. 15. Open Apereo 2014 15 2011 – uPortal 2.6.1 ENT before redesign / reboot
  16. 16. NEW MONUPMC PORTAL: UPORTAL V4.0 2011: Portal project redesign / reboot September 2012: new monUPMC in production 16Open Apereo 2014
  17. 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. 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. 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. 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. 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. 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. 23. Open Apereo 2014 23 monUPMC Statistics Total Logins (Unique Users)
  24. 24. Open Apereo 2014 24 monUPMC Statistics Total Logins (Total connexions)
  25. 25. UPMC MOBILE AND DESKTOP APPROACH • monUPMC portal (uPortal 4) : Desktop and Mobile Views • Tips and Tricks 25Open Apereo 2014
  26. 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. 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. 28 monUPMC Skins and Themes uPortal v4.0 Open Apereo 2014
  29. 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. 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. 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. 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. 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. 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. 35. Open Apereo 2014 35 VideoLive & VideoArchives Portlets Desktop Views
  36. 36. Open Apereo 2014 36 VideoLive & VideoArchives Portlets Desktop View
  37. 37. Open Apereo 2014 37 VideoLive & VideoArchives Portlets Mobile Views
  38. 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. 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. 40. Open Apereo 2014 40 Seevogh Research Network uPortal Integration (Portlet)
  41. 41. Open Apereo 2014 41 Seevogh Research Network Client Application
  42. 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. 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'enseignement de l'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. 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. 45. Open Apereo 2014 45 Map Portlet (Apereo) UPMC desktop view
  46. 46. Open Apereo 2014 46 Map Portlet (Apereo) UPMC mobile view
  47. 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. 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. 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. 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. 51. Open Apereo 2014Apereo default mobile view UPMC mobile view 51 Email-Preview Portlet (Apereo) "Rewrite" of mobile view
  52. 52. FUTURE WORKS AND PERSPECTIVES 52Open Apereo 2014
  53. 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

×