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 Universits 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 Numrique 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 Jasigs 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 Harpge Channel Esup Agent & AMUE Harpge 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 Ciscos 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"

Sakai

La plate-forme d'enseignement de l'UPMC

Accder Sakai

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