tTecniche di sviluppo mobile per share point 2013 e office 365

  • Published on
    07-Jul-2015

  • View
    141

  • Download
    0

Embed Size (px)

DESCRIPTION

Using SharePoint Publishing Features and Bootstrap to developing mobile solutions

Transcript

  • 1. SHAREPOINT E OFFICE 365 -OFF004 - Tecniche di sviluppo mobile per SharePoint 2013 e Office 365Fabio Franzini MVPPatrick Lamber -MVP

2. Fabio Franzini@franzinifabiohttp://www.fabiofranzini.comfabio@fabiofranzini.comtbm 3. Patrick Lamber@patricklamberhttp://patrick.nubo.eupl@nubo.eutbm 4. AgendaMobile experienceoverviewContemporaryviewPublishingPublishing InfrastructureDevice channelsImage RenditionsBootstrapSharePoint Online with BootstrapRecommendations 5. SP 2013 Mobile browsing experienceContemporary viewFull screen UIClassic viewOptimized mobile browser experience to users and renders in HTML5.WP 7.5, iOS 5.0, Android 4.0Backward compatibility for mobile browsers that cannot render contemporary view. Same mobile experience as in SharePoint 2010Full desktop view for smartphone devices.Device ChannelsFull desktop view for smartphone devices. 6. Contemporary view and redirectionMenu buttonSwitch to PC ViewNavigation windowTap-to-open linksPaginationNew and edit functionality 7. DEMO -Contemporary viewSee how the contemporary view looks like in SharePoint 2013See a responsive site sample and what the logic behind 8. SP 2013 Mobile browsing experienceContemporary viewFull screen UIClassic viewOptimized mobile browser experience to users and renders in HTML5.WP 7.5, iOS 5.0, Android 4.0Backward compatibility for mobile browsers that cannot render contemporary view. Same mobile experience as in SharePoint 2010Full desktop view for smartphone devices.Device ChannelsFull desktop view for smartphone devices. 9. SharePoint Publishing Page Model 10. Device ChannelsControl experience based on user agent string, e.g.:Differentiated design with separate Master PagesE.g., account for different screen resolutionsTargeted content with Device Channel PanelsE.g., show a special deal to mobile customersMozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920) 11. Device channelsSingle publishing siteMultiple designsDesign specialization per device/agent string 12. Image RenditionsMultiple sizes, aspect ratios, and crops in just one image! 13. DEMOSee Publishing Page ModelSee Device Channels in actionSee Image Renditions in SharePoint 2013 14. But wait Responsive web design?A RDW site adapts its layout to the viewing environment.Techniques usedFluid grid layoutCSS3 media queriesFrameworksResponsive Grid SystemTitan FrameworkFoundation 3BootstrapHTML4 Boilerplate 15. Bootstrap Intro 16. Demo -Bootstrap 17. When should I use which technique?Device ChannelsGood for a smartphone base without UI customization requirementsBackward compatibility???Full desktop view for smartphone devices.Markupmanipulation is the key. Publishing sites only!Improve with RWDContemporary viewFull screen UIClassic view 18. DemoCreate a minimal masterCreate a pills page layoutAdd CSS and JS resources to the SharePoint Online siteAssociate the resources to the masterpageand page layoutCreate a support list for the pills locationsWorking with Display Templates 19. RecommendationsBootstrap/responsive design is not the holy grailConsider image renditions on different screensUse display templates and responsive design in hybridUse already prepared solutions that implement responsive on SharePoint (e.g.: https://responsivesharepoint.codeplex.com/)Be prepared to get some support on future environments 20. ResourcesOverview of mobile devices and SharePoint Server 2013 (http://technet.microsoft.com/en- us/library/fp161351(v=office.15).aspx)Mobile device browsers supported in SharePoint 2013 (http://technet.microsoft.com/en- us/library/fp161353(v=office.15).aspx)Plan for mobile views in SharePoint 2013 (http://technet.microsoft.com/en- us/library/jj673030(v=office.15).aspx)Optimizing SharePoint 2013 websites for mobile devices (http://blogs.msdn.com/b/sharepointdev/archive/2013/05/07/optimizing-sharepoint-2013- websites-for-mobile-devices.aspx) 21. Q & A 22. Contatti OverNet EducationOverNet Educationinfo@overneteducation.itwww.overneteducation.itTel. 02 365738@overnetwww.facebook.com/OverNetEducationwww.linkedin.com/company/overnet-solutions