SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013


Published on

Presentations from the SharePoint 2013 WCM Bootcamp design track

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • I’d like to get a show of hands: how many of you have designed for SharePoint 2013? SharePoint 2010? Neither?
  • Overview of the SharePoint 2013 page model:http://msdn.microsoft.com/en-us/library/jj191506.aspx
  • Overview of the SharePoint 2013 page model:http://msdn.microsoft.com/en-us/library/jj191506.aspx
  • http://msdn.microsoft.com/en-us/library/ms561507.aspx
  • SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013

    1. 1. Time Topic12:00-12:45 Lunch12:45-13:15 Archi considerations13:15-14:15 Rendering dynamic content and mobile optimization14:15-14:30 Coffee break14:30-15:15 Packaging15:15-16:00 Office 365 Public Sites16:00-16:30 Summary and Q&A
    2. 2. MockupsCSS,JS, etc.HTMLDreamweaver /Photoshop / etc.SharePoint Designer
    3. 3. SharePointDreamweaver / etc.AutoConvertSnippetGalleryAdd controlsUploadMockupsCSS,JS, etc.HTML
    4. 4. Let’s create the master page
    5. 5. • No more TABLEs for Web Parts & Zones
    6. 6. style text this way
    7. 7. Let’s create the home page
    8. 8. Category and item detail pages
    9. 9. Making it real:Design packaging andspecial considerations
    10. 10. SourceSPSiteTargetSPSiteSourceSPSiteTargetSPSiteWebAppWebAppWeb App1 2
    11. 11. Approach LimitationsDownload and ZIP files Lots of upload locations, not everythingcan be downloaded (list items)Solution (WSP) Must be custom-built in Visual StudioContent Management Pack (PRIME) Deploys more than just designsSTSADM Backup Requires version/CU parity betweensource and target, takes everythingSave Site as Template Not supported for Publishing; can’t beapplied to an existing site with content
    12. 12. DesignPackageDocumentlibrariesContentTypes, FieldsListsMaster Pages GalleryStyle, Site Asset LibrariesThemes Gallery, _themesCTs that derive from PageFields used by these CTsMobile ChannelsDesign Gallery/Composed Looks
    13. 13. (e.g. current master page)
    14. 14. Location not exportedPages, Images, Documents LibrariesCustom Lists/LibrariesTaxonomy, Managed Navigation, URLsSite Title, Description, IconReusable Content/Rich Text Snippets
    15. 15. Source TargetChecked Out [Not imported]Checked In Checked InPending Checked InPublished Published
    16. 16. Suppose the following:• Export “foo.master”• On the target SPSite, “foo.master” already exists• Import “foo.master”
    17. 17. Search EngineOptimization
    18. 18. Clean URLs http://www.c.com/carsHome Page Redirects NoneCountry code top-level domains(ccTLDs)http://www.c.com/carshttp://www.c.mx/cochesXML Sitemaps Automatically generated and referenced inrobots.txtSEO Properties Browser title, Meta description, Meta keywordsCanonical URLsWebmaster Tools integration Assists with ownership verification
    19. 19. Web partSpecifies the query and templates to useTriggers templates when search results are availableControl Template (Begins)Determines how to lay the items out on the pageRendered once per web part on the pageItem TemplateDetermines how each item should lookRendered sequentially, once per search result itemControl Template (Ends)After all items rendered, control template finishesrendering
    20. 20. To load custom JavaScript…$includeScript(this.url,"~sitecollection/_catalogs/masterpage/DisplayTemplates/Finished/Control_jShowOff_Script.js");Write code inside the first <div>OnPostRender will fire after bothControl and Item templates are donerenderingLoad jQuery in your master pageWeb partControl Template(Begins)Item TemplateControl Template (Ends)
    21. 21. Display templates specifyinputs for dataInputs are filled in with search managed propertiesspecified by:<mso:ManagedPropertyMapping msdt:dt="string">Link URL{Link URL}:Path</mso:ManagedPropertyMapping>
    22. 22. GetPictureMarkup returns an image renditionbased on dimensionsvar pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 135,135, ctx.CurrentItem, "cbs-sliding-details-thumbnail", line1, pictureId);Connect event handlers using OnPostRender toensure all HTML elements are createdTo load custom CSS…$includeCSS(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Finished/Item_SlidingDetails_Styles.css");Web partControl Template(Begins)Item TemplateControl Template (Ends)
    23. 23. You can use any (Control, Item) TemplatecombinationHowever, you may want to think about yourdesigns as tightly-coupled
    24. 24. This provider can beshared between multipleweb parts, or local to asingle web part… so you can easilycreate inter-connectedsearch experiencesSearch Data Provider
    25. 25. • You can manipulate search query context viaJavaScript, creating dynamic experiences.JavaScript Object Description Example use caseCtx.ListData Query result data Passing JSON into custom jQuery plug-inctx.CurrentItem Current item being rendered Passing JSON into custom jQuery plug-inctx.ClientControl Methods for interacting withpresentation of resultsPaging, sorting, infinite scrolling
    26. 26. 04008001200160020002006 2008 2010 2012 2014 2016INTERNETUSERS(MM)Global Mobile vs. Desktop Internet UserProjection,2007-2015E, by Morgan StanleyMobile DesktopCustomized Design,Fewer bytes over the wire… all while maintaining SearchEngine Optimization?
    27. 27. Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0;Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)
    28. 28. Office 365 Public Sites Office 365 Intranet Publishing Sites andOn-Prem/Azure Publishing SitesUsers get two channels and cannot modifythem. These channels are “Default” and“Mobile.”Users can create a maximum of 10 devicechannels and can define whatever useragents they’d like for these channels toapply to.Master pages with a “-mobile” suffix in thefilename will be applied as the mobilechannel master page.Users can map any master page to achannel and suffixes do not matter.