SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013

  • 2,116 views
Uploaded on

Presentations from the SharePoint 2013 WCM Bootcamp design track

Presentations from the SharePoint 2013 WCM Bootcamp design track

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,116
On Slideshare
1,315
From Embeds
801
Number of Embeds
12

Actions

Shares
Downloads
33
Comments
0
Likes
1

Embeds 801

http://blog.mastykarz.nl 679
http://www.mavention.com 45
http://www.mavention.nl 30
http://www.newsblur.com 23
http://smashingreader.com 10
http://cloud.feedly.com 7
http://www.feedspot.com 2
http://www.goread.io 1
http://www.hanrss.com 1
http://translate.googleusercontent.com 1
http://newsblur.com 1
http://www.planetsharepoint.org 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 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. MockupsCSS,JS, etc.HTMLDreamweaver /Photoshop / etc.SharePoint Designer
  • 3. SharePointDreamweaver / etc.AutoConvertSnippetGalleryAdd controlsUploadMockupsCSS,JS, etc.HTML
  • 4. Let’s create the master page
  • 5. • No more TABLEs for Web Parts & Zones
  • 6. style text this way
  • 7. Let’s create the home page
  • 8. Category and item detail pages
  • 9. Making it real:Design packaging andspecial considerations
  • 10. SourceSPSiteTargetSPSiteSourceSPSiteTargetSPSiteWebAppWebAppWeb App1 2
  • 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. DesignPackageDocumentlibrariesContentTypes, FieldsListsMaster Pages GalleryStyle, Site Asset LibrariesThemes Gallery, _themesCTs that derive from PageFields used by these CTsMobile ChannelsDesign Gallery/Composed Looks
  • 13. (e.g. current master page)
  • 14. Location not exportedPages, Images, Documents LibrariesCustom Lists/LibrariesTaxonomy, Managed Navigation, URLsSite Title, Description, IconReusable Content/Rich Text Snippets
  • 15. Source TargetChecked Out [Not imported]Checked In Checked InPending Checked InPublished Published
  • 16. Suppose the following:• Export “foo.master”• On the target SPSite, “foo.master” already exists• Import “foo.master”
  • 17. Search EngineOptimization
  • 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. 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. 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. 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. 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. You can use any (Control, Item) TemplatecombinationHowever, you may want to think about yourdesigns as tightly-coupled
  • 24. This provider can beshared between multipleweb parts, or local to asingle web part… so you can easilycreate inter-connectedsearch experiencesSearch Data Provider
  • 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. 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. Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0;Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)
  • 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.