session 1 branding and site development in sharepoint

29
The 7 th SharePoint Saturday Vietnam has been made possible because of a generous sponsorship from the following friends

Upload: khoa-quach

Post on 19-May-2015

1.637 views

Category:

Technology


4 download

DESCRIPTION

This session will provide an overview of tools and libraries available for branding SharePoint 2013 branding solutions. We will review the new design manager, code snippets and the new display templates for content search web parts as well as fundamentals such as master pages, page layouts, publishing content types and best practices when developing front end solutions to SharePoint platform. We will also quickly introduce to popular technologies available and that concurrently work well in SharePoint 2013 such as jquery.js, bootstrap.js or spservices.js

TRANSCRIPT

Page 1: Session 1   branding and site development in SharePoint

The 7th SharePoint Saturday Vietnam has been made possible because of a generous sponsorship

from the following friends

Page 2: Session 1   branding and site development in SharePoint

About Me Khoa Quach SharePoint Technologies MCTS, MCP CEO, Cofounder of NIFTIT

Brooklyn, New York based startup We empower users through nifty solutions www.niftit.com

@niftykhoa

@NIFTIT

Page 3: Session 1   branding and site development in SharePoint

Branding SharePointJump Start Session

Page 4: Session 1   branding and site development in SharePoint

Most SharePoint Intranet portals looks like this…

Page 5: Session 1   branding and site development in SharePoint

When they can display…

Page 6: Session 1   branding and site development in SharePoint

Tools and technologiesMicrosoft software and beyond.

Page 7: Session 1   branding and site development in SharePoint

Tools needed

• For SharePoint 2010:– SharePoint Designer 2010– Visual Studio 2010

• For SharePoint 2013:– SharePoint Designer 2013– Visual Studio 2012 –Web development tool/editor

(Dreamweaver, NotePad++…)

Page 8: Session 1   branding and site development in SharePoint

Technologies used

• HTML• CSS• JS• ASPX

• Optional Libraries:– Jquery.js – SPServices.js (Marc D. Anderson -> link)– Bootstrap.js– Angular.js (Jeremy Thake ->link)

Page 9: Session 1   branding and site development in SharePoint

Some basicsBranding essentials.

Page 10: Session 1   branding and site development in SharePoint

SharePoint Page Model

SharePoint uses templates to define and render the pages that a site displays.• Master pages define the shared framing elements

(AKA the chrome) for all pages in your site.• Page layouts define the layout for a specific class

of pages.• Pages are created from a page layout by authors

who add content to page fields.

RENDERED PAGE =

Master page + page layout + page (content)

Page 11: Session 1   branding and site development in SharePoint

Analyzing a design

Page 12: Session 1   branding and site development in SharePoint

Elements of the master page

Site Icon Search Bar

Global Navigation

Footer

Page 13: Session 1   branding and site development in SharePoint

Elements of the page layout

Page field Controls

Page 14: Session 1   branding and site development in SharePoint

Branding Methodologies

Development Flow

Page 15: Session 1   branding and site development in SharePoint

A look back: Designing your web site in SharePoint 2010

Comps

CSS, JS, etc.

HTML

Integrate

Ribbon

Master

Pages

Roll-up

control

s

Dreamweaver / Photoshop / etc.

SharePoint Designer

NavigationCusto

m Catalo

g

Catalog Integration

Page 16: Session 1   branding and site development in SharePoint

Designing your web site in SharePoint 2013

SharePoint

Dreamweaver / etc.

• Ribbon

• Placeholder

Main

• Minimal Maste

r • Navigation

• Web parts

• Controls

Auto Conve

rt

Snippet

Gallery

Add controls

UploadComps

CSS, JS, etc.

HTML

Page 17: Session 1   branding and site development in SharePoint

SharePoint 2010 & SharePoint 2013Key differences

Page 18: Session 1   branding and site development in SharePoint

What’s New in SharePoint 2013

No more tables! Design Manager Client Side As far as Authoring goes:• Cross site publishing• Managed navigation• Content Search Web Part

Page 19: Session 1   branding and site development in SharePoint

Design Manager

Access/Upload to assets and pages Convert HTML to ASP.NET master page Snippet Gallery Design Packages Device Channels Display templates (No more XSLT)

Page 20: Session 1   branding and site development in SharePoint

Mapping network drive

Access HTML directly

Recommend using VS or SP Designer

Page 21: Session 1   branding and site development in SharePoint

Snippet Gallery

• Site Icon• Global Navigation• Search Box• Site Title• Edit Mode• Trim Security• Device Channel Panel• Media and Content• OOB Web Parts• Custom ASP.Net Markup

Page 22: Session 1   branding and site development in SharePoint

Recommended Methods

Demo time

Page 23: Session 1   branding and site development in SharePoint

Recap for Master Page

• Analyze your design and define SP page model elements to be used

• For 2013:– Don’t simply copy and paste your HTML

markup into the master page– Segregate the master page elements

from the page layout(s)– Stick to one methodology: HTML or SP

Page 24: Session 1   branding and site development in SharePoint

Search-driven Web Parts and display templates

• Display templates control which managed properties appear in the search results of a search-driven Web Part and the styling and behavior of those search results.– Control display templates: control the

layout of search results and any elements common to all results such as paging, sorting, and other links

– Item display templates: which control how each search result is displayed and repeated for each result

Page 25: Session 1   branding and site development in SharePoint

SharePoint Mobile

The right way

Page 26: Session 1   branding and site development in SharePoint

Device Channels

• For content negotiations• Use to differentiate master page• Target different content with device

channel panels

Page 27: Session 1   branding and site development in SharePoint

Image Rendition

• Same content• Same page URL• Same site collection

Page 28: Session 1   branding and site development in SharePoint

Minimal Download Strategy

• New feature in SP 2013• Reduce Page Load time• Only send the difference when users

navigate to new page

Page 29: Session 1   branding and site development in SharePoint

Thank you