SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
Branding & Design in
SharePoint Server
2013
  Marius Constantinescu
  Lead Consultant, blue-infinity
  marius.constantinescu@b-i.com
  http://nettitude.wordpress.com
in brief
•   350+ employees
•   headquartered in Geneva
•   founded in 1995
•   international culture
•   multi-national clients
•   integrated solutions
•   microsoft managed partner
Agenda

 New Branding opportunities


                               Agenda
 Other considerations
Branding in
History
What brought us here today?
What is Branding?

The "name, term, design, symbol, or any other
feature that identifies one seller's good or
service as distinct from those of other sellers”
(Wikipedia)

   Initial a labeling process by
    applying distinctive marks
   Became a symbol of
    quality, marketing
    term, advertising
   Branding is all about Identity , it
    is the Mark & it is most valuable
    fixed asset of an organization
Modern Web, Responsive sites

   Responsive design is a Philosophy, not a Technology



   Business enablers for Response Design


   Responsive design is not without obstacles
Branding the Web

                              Web sites SharePoint
       •CSS Styles (Colors, Fonts, Overlays)    •Master pages (way too many),
       •Logos, Icons, Shims, Backgrounds         Pages (Page Layouts, Application
       •Widgets (content sliders, navigation     Pages, Cloud-App Pages *)
        menus)                                  •3rd-party Controls, Ribbon, ECB
       •FX and Animations                        Menus
                                                •Navigation (Quick Launch, Top-Bar,
                                                 Suite-links*)
                                                •Web parts (and XSLT), App-Parts*
                                                •List Views, Custom Fields



Should Information Architecture be included as part of “Branding” efforts?
Composite
Looks
The new and improved theming engine
Themes in SharePoint 2010

 Binary files (.thmx)
 Only Editable via
  PowerPoint 2010
 Allowed changes of                       Online Site




                         Publishing Site
Composed Looks in SharePoint
2013
What are Composed looks 1/4

 No longer a single binary file

 Made up of




 Edit existing or Create new
What are Composed Looks 2/4

.SPCOLOR File Type


                                        Online Site




                      Publishing Site
What are Composed Looks 3/4

.SPFONT File Type
What are Composed Looks 4/4

 Creating new Composed Looks

    [ReplaceFont(themeFont:"title")]
 font-family:"Segoe UI", Tahoma, Arial,Sans-serif
    [ReplaceColor(themeColor:"SiteTitle")]
 color:#262626




 Limitations
1.       Create or reuse a .master
                                         page
                                         For NEW .master page ensure
                                          existence of .preview file
                                2.       Create/Update a .spfont file
                                3.       Create/Update a .spcolor file
                                4.       Create a new item n the
                                         Composed Looks list
Create your own Composed Look            pointing to these files

Demo
Design Manager
Next step in SharePoint branding
SharePoint Page Model
(Publishing)



      Master pages define the shared framing elements, the chrome
      Page layouts define the layout for a specific class of pages
       (associated to a Content Type)
      Pages are created from a page layout by authors
         Add content to page fields
         Add web parts (Data-View, Content Query, Content Search)


Source: http://msdn.microsoft.com/en-us/library/jj191506(v=office.15)
Working with Design Manager 1/2

 Import design artifacts



                                                   Online Site
 Create/Edit Master Pages and
 Page Layouts



                                 Publishing Site
Working with Design Manager 2/2

 Create/Edit Master Pages and Page Layouts



 Limitations
Custom
branding
SharePoint branding and more…
Packaging branding artifacts

   The need for a branding-package
   Wider support for complex business needs




   Reusability & Maintainability




   Other considerations
Anatomy of a Branding package

   Event receivers


   Other requirements
UX for SharePoint
Apps
Introducing SharePoint App Model

 Everything in a SharePoint site is an
  app
 https://spclub-bf473b5225nn0f.sharepoint.com/sharepointapptitle



 SharePoint applications no longer
  live in SharePoint
Branding SharePoint Apps
                         Provider-Hosted App
                                                                            SharePoint
                         “Bring your own server hosting infrastructure”                          Your Hosted Site
                                                                               Web
                         (could be PHP, ASP.NET MVC, Ruby, etc.)
Cloud-based Apps
Get remote events from
SharePoint               Auto-hosted App                                                         Windows Azure
                                                                            SharePoint
Use CSOM/REST +          Windows Azure + SQL Azure provisioned invisibly                           Websites
                                                                               Web
OAuth to work with SP    as apps are installed


                      Provisioned in an isolated sub-web on a parent
                      web                                                   SharePoint
                                                                               Web
                           Able to reuse web content
SharePoint-Hosted App      (lists, files, out-of-box web parts)                                     App Web
                           Cannot execute server code, only client-                                (from WSP)
                           side, e.g. JavaScript calls for business logic
                           & UX

    App-pages are displayed either in Full-screen
    In IFrame as App-Parts (equivalent of Page Viewer web-part for SharePoint-Apps) or SharePoint Dialog-box
Branding SharePoint Apps

Design options for the Apps displayed
in a Full Page




All artifacts are referenced from the host SharePoint site for styling
other html elements.
Branding SharePoint Apps

Design options for Apps running in
IFrame
App parts and SharePoint dialog boxes do not display full-
screen and cannot leverage the Chrome control.
Referencing styling resources is the way to go!
    Page display via an App part
    Step 1: Add a Client Web Part to your SharePoint 2013 app project
    Step 2: Configure the client web part's Content Source in the Element.xml to
     correct page and pass the appropriate contextual information through the URL
    Step 3: Include script on app part pages to inject a new style sheet link element
     into the head of the page referencing the /_layouts/15/defaultcss.ashx
     resource from the host SharePoint site
    Page displayed in the SharePoint dialog
    Step 1: Add a UI Custom Action (Host Web) to the SharePoint 2013 app project
    Step 2: Configure the UrlAction in the Element.xml to correct page and pass the
     appropriate contextual information through the URL and set
     HostWebDialog="true" on the Custom Action (HostWebDialogHeight and
     HostWebDialogWidth should also be set)
    Step 3: Include script on the dialog pages to inject a new style sheet link
     element into the head of the page referencing the /_layouts/15/defaultcss.ashx
     resource from the host SharePoint site
Branding & Styling SharePoint Apps

Demo
Other considerations

Client-Side Rendering
   For all new controls, data is written to the controls in a client-
    side JSON array
   Designers can choose to display content using
    JavaScript, CSS, and display templates
   Full control over how content is rendered on the page
Display Templates

What are display templates?
   Re-usable Styles Files for your Content-Query based &
    Content-Search Results Web-Parts
   Each display template consists of two files:



•   Stored in the "Master Page" gallery under "Display
    Templates" folder
Why new concepts?
•   No more XSLT editing every time a particular look & feel
    is needed
•   Client-side "templating" techniques represent today's
    trend
    (see libraries such as Knockout, Kendo UI, Razor also
    heavily used in MVC applications) – rely on JSON back-
    end data
Instant benefits with Client-Side Rendering (CSR)

Demo
Branding & Design Opportunities/Challenges with SharePoint 2013

Más contenido relacionado

La actualidad más candente

SharePoint 2010 Introduction
SharePoint 2010 IntroductionSharePoint 2010 Introduction
SharePoint 2010 IntroductionVishal Gupta
 
Sharepoint 2013 upgrade process
Sharepoint 2013 upgrade processSharepoint 2013 upgrade process
Sharepoint 2013 upgrade processLiquidHub
 
Introduction To SharePoint 2010
Introduction To SharePoint 2010Introduction To SharePoint 2010
Introduction To SharePoint 2010Rishu Mehra
 
The SharePoint 2013 App Model
The SharePoint 2013 App ModelThe SharePoint 2013 App Model
The SharePoint 2013 App ModelSPC Adriatics
 
Introduction to SharePoint 2013 WCM-DM-ECM for Business Users and Developers
Introduction to SharePoint 2013 WCM-DM-ECM for Business Users and DevelopersIntroduction to SharePoint 2013 WCM-DM-ECM for Business Users and Developers
Introduction to SharePoint 2013 WCM-DM-ECM for Business Users and DevelopersNetwoven Inc.
 
Share point 2010 overview
Share point 2010 overviewShare point 2010 overview
Share point 2010 overviewMJ Ferdous
 
SharePoint 2013 Site Administration
SharePoint 2013 Site AdministrationSharePoint 2013 Site Administration
SharePoint 2013 Site AdministrationLearning SharePoint
 
Ofc216 Shah German Webcms
Ofc216 Shah German WebcmsOfc216 Shah German Webcms
Ofc216 Shah German WebcmsPunk Rock
 
Microsoft SharePoint 2010 Overview Session 1
Microsoft SharePoint 2010 Overview Session 1Microsoft SharePoint 2010 Overview Session 1
Microsoft SharePoint 2010 Overview Session 1Sourav Nayyar
 
Share point 2013 introd session 2
Share point 2013 introd session 2Share point 2013 introd session 2
Share point 2013 introd session 2Vishal Gupta
 
Jordan Remix - SharePoint 2010
Jordan Remix - SharePoint 2010Jordan Remix - SharePoint 2010
Jordan Remix - SharePoint 2010Jordan Remix
 
SharePoint 2013 for Administrators and IT Pro's
SharePoint 2013 for Administrators and IT Pro'sSharePoint 2013 for Administrators and IT Pro's
SharePoint 2013 for Administrators and IT Pro'sLearning SharePoint
 
Advanced SharePoint 2013 Site Administration
Advanced SharePoint 2013 Site AdministrationAdvanced SharePoint 2013 Site Administration
Advanced SharePoint 2013 Site AdministrationLearning SharePoint
 
Designing SharePoint solutions – Big Decisions for Big Success
Designing SharePoint solutions – Big Decisions for Big SuccessDesigning SharePoint solutions – Big Decisions for Big Success
Designing SharePoint solutions – Big Decisions for Big SuccessSPC Adriatics
 
1 introduction
1   introduction1   introduction
1 introductionicdesktop
 
Microsoft Ignite 2018 - SharePoint Related News & Announcements
Microsoft Ignite 2018 - SharePoint Related News & AnnouncementsMicrosoft Ignite 2018 - SharePoint Related News & Announcements
Microsoft Ignite 2018 - SharePoint Related News & AnnouncementsCameron Dwyer
 
Microsoft Ignite 2018 - SharePoint Related News & Announcements (with roadmap...
Microsoft Ignite 2018 - SharePoint Related News & Announcements (with roadmap...Microsoft Ignite 2018 - SharePoint Related News & Announcements (with roadmap...
Microsoft Ignite 2018 - SharePoint Related News & Announcements (with roadmap...Cameron Dwyer
 

La actualidad más candente (20)

SharePoint 2010 Introduction
SharePoint 2010 IntroductionSharePoint 2010 Introduction
SharePoint 2010 Introduction
 
Sharepoint 2013 upgrade process
Sharepoint 2013 upgrade processSharepoint 2013 upgrade process
Sharepoint 2013 upgrade process
 
Introduction To SharePoint 2010
Introduction To SharePoint 2010Introduction To SharePoint 2010
Introduction To SharePoint 2010
 
The SharePoint 2013 App Model
The SharePoint 2013 App ModelThe SharePoint 2013 App Model
The SharePoint 2013 App Model
 
Share point overview
Share point overviewShare point overview
Share point overview
 
Introduction to SharePoint 2013 WCM-DM-ECM for Business Users and Developers
Introduction to SharePoint 2013 WCM-DM-ECM for Business Users and DevelopersIntroduction to SharePoint 2013 WCM-DM-ECM for Business Users and Developers
Introduction to SharePoint 2013 WCM-DM-ECM for Business Users and Developers
 
Share point 2010 overview
Share point 2010 overviewShare point 2010 overview
Share point 2010 overview
 
SharePoint 2013 features overview
SharePoint 2013 features overviewSharePoint 2013 features overview
SharePoint 2013 features overview
 
SharePoint 2013 Site Administration
SharePoint 2013 Site AdministrationSharePoint 2013 Site Administration
SharePoint 2013 Site Administration
 
Ofc216 Shah German Webcms
Ofc216 Shah German WebcmsOfc216 Shah German Webcms
Ofc216 Shah German Webcms
 
Microsoft SharePoint 2010 Overview Session 1
Microsoft SharePoint 2010 Overview Session 1Microsoft SharePoint 2010 Overview Session 1
Microsoft SharePoint 2010 Overview Session 1
 
Share point 2013 introd session 2
Share point 2013 introd session 2Share point 2013 introd session 2
Share point 2013 introd session 2
 
Jordan Remix - SharePoint 2010
Jordan Remix - SharePoint 2010Jordan Remix - SharePoint 2010
Jordan Remix - SharePoint 2010
 
SharePoint 2013 for Administrators and IT Pro's
SharePoint 2013 for Administrators and IT Pro'sSharePoint 2013 for Administrators and IT Pro's
SharePoint 2013 for Administrators and IT Pro's
 
Advanced SharePoint 2013 Site Administration
Advanced SharePoint 2013 Site AdministrationAdvanced SharePoint 2013 Site Administration
Advanced SharePoint 2013 Site Administration
 
Designing SharePoint solutions – Big Decisions for Big Success
Designing SharePoint solutions – Big Decisions for Big SuccessDesigning SharePoint solutions – Big Decisions for Big Success
Designing SharePoint solutions – Big Decisions for Big Success
 
1 introduction
1   introduction1   introduction
1 introduction
 
(28.04) MOSSCA Invita - Bienvenidos a la casa de Sharepoint - Visión técnica
(28.04) MOSSCA Invita - Bienvenidos a la casa de Sharepoint - Visión técnica(28.04) MOSSCA Invita - Bienvenidos a la casa de Sharepoint - Visión técnica
(28.04) MOSSCA Invita - Bienvenidos a la casa de Sharepoint - Visión técnica
 
Microsoft Ignite 2018 - SharePoint Related News & Announcements
Microsoft Ignite 2018 - SharePoint Related News & AnnouncementsMicrosoft Ignite 2018 - SharePoint Related News & Announcements
Microsoft Ignite 2018 - SharePoint Related News & Announcements
 
Microsoft Ignite 2018 - SharePoint Related News & Announcements (with roadmap...
Microsoft Ignite 2018 - SharePoint Related News & Announcements (with roadmap...Microsoft Ignite 2018 - SharePoint Related News & Announcements (with roadmap...
Microsoft Ignite 2018 - SharePoint Related News & Announcements (with roadmap...
 

Destacado

Designing for the Office 365 Experience
Designing for the Office 365 ExperienceDesigning for the Office 365 Experience
Designing for the Office 365 ExperienceCathy Dew
 
2013 Advanced Formulas Excel Certificate
2013 Advanced Formulas Excel Certificate2013 Advanced Formulas Excel Certificate
2013 Advanced Formulas Excel CertificateDanie Meiring
 
INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT– II (Show 2.1 to 2.4)
INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT– II (Show 2.1 to 2.4)INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT– II (Show 2.1 to 2.4)
INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT– II (Show 2.1 to 2.4)Gautam Shah
 

Destacado (6)

Designing for the Office 365 Experience
Designing for the Office 365 ExperienceDesigning for the Office 365 Experience
Designing for the Office 365 Experience
 
2013 Advanced Formulas Excel Certificate
2013 Advanced Formulas Excel Certificate2013 Advanced Formulas Excel Certificate
2013 Advanced Formulas Excel Certificate
 
False ceiling 6th sem
False ceiling 6th sem False ceiling 6th sem
False ceiling 6th sem
 
False ceiling
False ceilingFalse ceiling
False ceiling
 
FALSE CEILING
FALSE CEILINGFALSE CEILING
FALSE CEILING
 
INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT– II (Show 2.1 to 2.4)
INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT– II (Show 2.1 to 2.4)INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT– II (Show 2.1 to 2.4)
INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT– II (Show 2.1 to 2.4)
 

Similar a Branding & Design Opportunities/Challenges with SharePoint 2013

SharePoint 2013 Sneak Peek
SharePoint 2013 Sneak PeekSharePoint 2013 Sneak Peek
SharePoint 2013 Sneak PeekK.Mohamed Faizal
 
Introduction to the new SharePoint 2013 App Model
Introduction to the new SharePoint 2013 App ModelIntroduction to the new SharePoint 2013 App Model
Introduction to the new SharePoint 2013 App ModelNoorez Khamis
 
SharePoint 2010 as a Development Platform, Ayman El-Hattab MVP
SharePoint 2010 as a Development Platform, Ayman El-Hattab MVPSharePoint 2010 as a Development Platform, Ayman El-Hattab MVP
SharePoint 2010 as a Development Platform, Ayman El-Hattab MVPAyman El-Hattab
 
Share Point For Beginners V1
Share Point For Beginners V1Share Point For Beginners V1
Share Point For Beginners V1MJ Ferdous
 
Introduction To Microsoft SharePoint 2013
Introduction To Microsoft SharePoint 2013Introduction To Microsoft SharePoint 2013
Introduction To Microsoft SharePoint 2013Vishal Pawar
 
Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...
Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...
Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...Richard Calderon
 
You got Microsoft Teams! Now let's build modern intranet on SharePoint - Team...
You got Microsoft Teams! Now let's build modern intranet on SharePoint - Team...You got Microsoft Teams! Now let's build modern intranet on SharePoint - Team...
You got Microsoft Teams! Now let's build modern intranet on SharePoint - Team...Chirag Patel
 
Sp2013 overview biwug
Sp2013 overview biwugSp2013 overview biwug
Sp2013 overview biwugBIWUG
 
Sp2013 overview
Sp2013 overviewSp2013 overview
Sp2013 overviewBIWUG
 
Intro to SharePoint for Developers
Intro to SharePoint for DevelopersIntro to SharePoint for Developers
Intro to SharePoint for DevelopersRob Wilson
 
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClassECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClassEuropean Collaboration Summit
 
Ep structured share point development - v.4
Ep   structured share point development - v.4Ep   structured share point development - v.4
Ep structured share point development - v.4Ivan Sanders
 
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...Bill Ayers
 
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...SPS Paris
 
SharePoint 2013 - What's new for Devs - Belgian IT Bootcamp 2012
SharePoint 2013 - What's new for Devs - Belgian IT Bootcamp 2012SharePoint 2013 - What's new for Devs - Belgian IT Bootcamp 2012
SharePoint 2013 - What's new for Devs - Belgian IT Bootcamp 2012Joris Poelmans
 
Microsoft Share Point Branding & Customization
Microsoft Share Point Branding & CustomizationMicrosoft Share Point Branding & Customization
Microsoft Share Point Branding & Customizationyeschandana
 
SharePoint Development(Lesson 5)
SharePoint Development(Lesson 5)SharePoint Development(Lesson 5)
SharePoint Development(Lesson 5)MJ Ferdous
 
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - referenceChris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - referenceChris O'Brien
 

Similar a Branding & Design Opportunities/Challenges with SharePoint 2013 (20)

Share point 2013 cop v4
Share point 2013 cop v4Share point 2013 cop v4
Share point 2013 cop v4
 
SharePoint 2013 Sneak Peek
SharePoint 2013 Sneak PeekSharePoint 2013 Sneak Peek
SharePoint 2013 Sneak Peek
 
Introduction to the new SharePoint 2013 App Model
Introduction to the new SharePoint 2013 App ModelIntroduction to the new SharePoint 2013 App Model
Introduction to the new SharePoint 2013 App Model
 
SharePoint 2010 as a Development Platform, Ayman El-Hattab MVP
SharePoint 2010 as a Development Platform, Ayman El-Hattab MVPSharePoint 2010 as a Development Platform, Ayman El-Hattab MVP
SharePoint 2010 as a Development Platform, Ayman El-Hattab MVP
 
Share Point For Beginners V1
Share Point For Beginners V1Share Point For Beginners V1
Share Point For Beginners V1
 
Introduction To Microsoft SharePoint 2013
Introduction To Microsoft SharePoint 2013Introduction To Microsoft SharePoint 2013
Introduction To Microsoft SharePoint 2013
 
Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...
Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...
Better, Faster, Stronger! Boost Your Team-Based SharePoint Development Using ...
 
You got Microsoft Teams! Now let's build modern intranet on SharePoint - Team...
You got Microsoft Teams! Now let's build modern intranet on SharePoint - Team...You got Microsoft Teams! Now let's build modern intranet on SharePoint - Team...
You got Microsoft Teams! Now let's build modern intranet on SharePoint - Team...
 
Sp2013 overview biwug
Sp2013 overview biwugSp2013 overview biwug
Sp2013 overview biwug
 
Sp2013 overview
Sp2013 overviewSp2013 overview
Sp2013 overview
 
SharePoint Programming Basic
SharePoint Programming BasicSharePoint Programming Basic
SharePoint Programming Basic
 
Intro to SharePoint for Developers
Intro to SharePoint for DevelopersIntro to SharePoint for Developers
Intro to SharePoint for Developers
 
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClassECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
 
Ep structured share point development - v.4
Ep   structured share point development - v.4Ep   structured share point development - v.4
Ep structured share point development - v.4
 
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...
 
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...
 
SharePoint 2013 - What's new for Devs - Belgian IT Bootcamp 2012
SharePoint 2013 - What's new for Devs - Belgian IT Bootcamp 2012SharePoint 2013 - What's new for Devs - Belgian IT Bootcamp 2012
SharePoint 2013 - What's new for Devs - Belgian IT Bootcamp 2012
 
Microsoft Share Point Branding & Customization
Microsoft Share Point Branding & CustomizationMicrosoft Share Point Branding & Customization
Microsoft Share Point Branding & Customization
 
SharePoint Development(Lesson 5)
SharePoint Development(Lesson 5)SharePoint Development(Lesson 5)
SharePoint Development(Lesson 5)
 
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - referenceChris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
 

Más de Marius Constantinescu [MVP]

MIcrosoft experiences - SharePoint 2016 : architecture, déploiement et topol...
MIcrosoft experiences  - SharePoint 2016 : architecture, déploiement et topol...MIcrosoft experiences  - SharePoint 2016 : architecture, déploiement et topol...
MIcrosoft experiences - SharePoint 2016 : architecture, déploiement et topol...Marius Constantinescu [MVP]
 
Rapidly building data-driven modern Office 365 Cloud Business add-ins with Li...
Rapidly building data-driven modern Office 365 Cloud Business add-ins with Li...Rapidly building data-driven modern Office 365 Cloud Business add-ins with Li...
Rapidly building data-driven modern Office 365 Cloud Business add-ins with Li...Marius Constantinescu [MVP]
 
SP24 online conference April 17, 2014 > Real-live experience using cross-site...
SP24 online conference April 17, 2014 > Real-live experience using cross-site...SP24 online conference April 17, 2014 > Real-live experience using cross-site...
SP24 online conference April 17, 2014 > Real-live experience using cross-site...Marius Constantinescu [MVP]
 
Building Product Centric sites using Cross-Site publishing and Search [Swiss ...
Building Product Centric sites using Cross-Site publishing and Search [Swiss ...Building Product Centric sites using Cross-Site publishing and Search [Swiss ...
Building Product Centric sites using Cross-Site publishing and Search [Swiss ...Marius Constantinescu [MVP]
 
Office 365 Saturday Europe - Self-Service Business Intelligence with Power BI
Office 365 Saturday Europe - Self-Service Business Intelligence with Power BIOffice 365 Saturday Europe - Self-Service Business Intelligence with Power BI
Office 365 Saturday Europe - Self-Service Business Intelligence with Power BIMarius Constantinescu [MVP]
 
Cross-site publishing & how to Create Product catalogs with SharePoint 2013
Cross-site publishing & how to Create Product catalogs with SharePoint 2013Cross-site publishing & how to Create Product catalogs with SharePoint 2013
Cross-site publishing & how to Create Product catalogs with SharePoint 2013Marius Constantinescu [MVP]
 
TechDays11 Geneva - Going Further with SharePoint 2010 Search
TechDays11 Geneva - Going Further with SharePoint 2010 SearchTechDays11 Geneva - Going Further with SharePoint 2010 Search
TechDays11 Geneva - Going Further with SharePoint 2010 SearchMarius Constantinescu [MVP]
 

Más de Marius Constantinescu [MVP] (8)

MIcrosoft experiences - SharePoint 2016 : architecture, déploiement et topol...
MIcrosoft experiences  - SharePoint 2016 : architecture, déploiement et topol...MIcrosoft experiences  - SharePoint 2016 : architecture, déploiement et topol...
MIcrosoft experiences - SharePoint 2016 : architecture, déploiement et topol...
 
Rapidly building data-driven modern Office 365 Cloud Business add-ins with Li...
Rapidly building data-driven modern Office 365 Cloud Business add-ins with Li...Rapidly building data-driven modern Office 365 Cloud Business add-ins with Li...
Rapidly building data-driven modern Office 365 Cloud Business add-ins with Li...
 
SP24 online conference April 17, 2014 > Real-live experience using cross-site...
SP24 online conference April 17, 2014 > Real-live experience using cross-site...SP24 online conference April 17, 2014 > Real-live experience using cross-site...
SP24 online conference April 17, 2014 > Real-live experience using cross-site...
 
Building Product Centric sites using Cross-Site publishing and Search [Swiss ...
Building Product Centric sites using Cross-Site publishing and Search [Swiss ...Building Product Centric sites using Cross-Site publishing and Search [Swiss ...
Building Product Centric sites using Cross-Site publishing and Search [Swiss ...
 
Office 365 Saturday Europe - Self-Service Business Intelligence with Power BI
Office 365 Saturday Europe - Self-Service Business Intelligence with Power BIOffice 365 Saturday Europe - Self-Service Business Intelligence with Power BI
Office 365 Saturday Europe - Self-Service Business Intelligence with Power BI
 
Cross-site publishing & how to Create Product catalogs with SharePoint 2013
Cross-site publishing & how to Create Product catalogs with SharePoint 2013Cross-site publishing & how to Create Product catalogs with SharePoint 2013
Cross-site publishing & how to Create Product catalogs with SharePoint 2013
 
What's new for Developers in SharePoint 2013
What's new for Developers in SharePoint 2013What's new for Developers in SharePoint 2013
What's new for Developers in SharePoint 2013
 
TechDays11 Geneva - Going Further with SharePoint 2010 Search
TechDays11 Geneva - Going Further with SharePoint 2010 SearchTechDays11 Geneva - Going Further with SharePoint 2010 Search
TechDays11 Geneva - Going Further with SharePoint 2010 Search
 

Último

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Último (20)

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

Branding & Design Opportunities/Challenges with SharePoint 2013

  • 1. Branding & Design in SharePoint Server 2013 Marius Constantinescu Lead Consultant, blue-infinity marius.constantinescu@b-i.com http://nettitude.wordpress.com
  • 2. in brief • 350+ employees • headquartered in Geneva • founded in 1995 • international culture • multi-national clients • integrated solutions • microsoft managed partner
  • 3. Agenda  New Branding opportunities Agenda  Other considerations
  • 5. What is Branding? The "name, term, design, symbol, or any other feature that identifies one seller's good or service as distinct from those of other sellers” (Wikipedia)  Initial a labeling process by applying distinctive marks  Became a symbol of quality, marketing term, advertising  Branding is all about Identity , it is the Mark & it is most valuable fixed asset of an organization
  • 6. Modern Web, Responsive sites  Responsive design is a Philosophy, not a Technology  Business enablers for Response Design  Responsive design is not without obstacles
  • 7. Branding the Web Web sites SharePoint •CSS Styles (Colors, Fonts, Overlays) •Master pages (way too many), •Logos, Icons, Shims, Backgrounds Pages (Page Layouts, Application •Widgets (content sliders, navigation Pages, Cloud-App Pages *) menus) •3rd-party Controls, Ribbon, ECB •FX and Animations Menus •Navigation (Quick Launch, Top-Bar, Suite-links*) •Web parts (and XSLT), App-Parts* •List Views, Custom Fields Should Information Architecture be included as part of “Branding” efforts?
  • 8. Composite Looks The new and improved theming engine
  • 9. Themes in SharePoint 2010  Binary files (.thmx)  Only Editable via PowerPoint 2010  Allowed changes of Online Site Publishing Site
  • 10. Composed Looks in SharePoint 2013
  • 11. What are Composed looks 1/4  No longer a single binary file  Made up of  Edit existing or Create new
  • 12. What are Composed Looks 2/4 .SPCOLOR File Type Online Site Publishing Site
  • 13. What are Composed Looks 3/4 .SPFONT File Type
  • 14. What are Composed Looks 4/4  Creating new Composed Looks [ReplaceFont(themeFont:"title")] font-family:"Segoe UI", Tahoma, Arial,Sans-serif [ReplaceColor(themeColor:"SiteTitle")] color:#262626  Limitations
  • 15. 1. Create or reuse a .master page  For NEW .master page ensure existence of .preview file 2. Create/Update a .spfont file 3. Create/Update a .spcolor file 4. Create a new item n the Composed Looks list Create your own Composed Look pointing to these files Demo
  • 16. Design Manager Next step in SharePoint branding
  • 17. SharePoint Page Model (Publishing)  Master pages define the shared framing elements, the chrome  Page layouts define the layout for a specific class of pages (associated to a Content Type)  Pages are created from a page layout by authors  Add content to page fields  Add web parts (Data-View, Content Query, Content Search) Source: http://msdn.microsoft.com/en-us/library/jj191506(v=office.15)
  • 18. Working with Design Manager 1/2  Import design artifacts Online Site  Create/Edit Master Pages and Page Layouts Publishing Site
  • 19. Working with Design Manager 2/2  Create/Edit Master Pages and Page Layouts  Limitations
  • 21. Packaging branding artifacts  The need for a branding-package  Wider support for complex business needs  Reusability & Maintainability  Other considerations
  • 22. Anatomy of a Branding package  Event receivers  Other requirements
  • 24. Introducing SharePoint App Model  Everything in a SharePoint site is an app https://spclub-bf473b5225nn0f.sharepoint.com/sharepointapptitle  SharePoint applications no longer live in SharePoint
  • 25. Branding SharePoint Apps Provider-Hosted App SharePoint “Bring your own server hosting infrastructure” Your Hosted Site Web (could be PHP, ASP.NET MVC, Ruby, etc.) Cloud-based Apps Get remote events from SharePoint Auto-hosted App Windows Azure SharePoint Use CSOM/REST + Windows Azure + SQL Azure provisioned invisibly Websites Web OAuth to work with SP as apps are installed Provisioned in an isolated sub-web on a parent web SharePoint Web Able to reuse web content SharePoint-Hosted App (lists, files, out-of-box web parts) App Web Cannot execute server code, only client- (from WSP) side, e.g. JavaScript calls for business logic & UX  App-pages are displayed either in Full-screen  In IFrame as App-Parts (equivalent of Page Viewer web-part for SharePoint-Apps) or SharePoint Dialog-box
  • 26. Branding SharePoint Apps Design options for the Apps displayed in a Full Page All artifacts are referenced from the host SharePoint site for styling other html elements.
  • 27. Branding SharePoint Apps Design options for Apps running in IFrame App parts and SharePoint dialog boxes do not display full- screen and cannot leverage the Chrome control. Referencing styling resources is the way to go!  Page display via an App part  Step 1: Add a Client Web Part to your SharePoint 2013 app project  Step 2: Configure the client web part's Content Source in the Element.xml to correct page and pass the appropriate contextual information through the URL  Step 3: Include script on app part pages to inject a new style sheet link element into the head of the page referencing the /_layouts/15/defaultcss.ashx resource from the host SharePoint site  Page displayed in the SharePoint dialog  Step 1: Add a UI Custom Action (Host Web) to the SharePoint 2013 app project  Step 2: Configure the UrlAction in the Element.xml to correct page and pass the appropriate contextual information through the URL and set HostWebDialog="true" on the Custom Action (HostWebDialogHeight and HostWebDialogWidth should also be set)  Step 3: Include script on the dialog pages to inject a new style sheet link element into the head of the page referencing the /_layouts/15/defaultcss.ashx resource from the host SharePoint site
  • 28. Branding & Styling SharePoint Apps Demo
  • 29. Other considerations Client-Side Rendering  For all new controls, data is written to the controls in a client- side JSON array  Designers can choose to display content using JavaScript, CSS, and display templates  Full control over how content is rendered on the page
  • 30. Display Templates What are display templates?  Re-usable Styles Files for your Content-Query based & Content-Search Results Web-Parts  Each display template consists of two files: • Stored in the "Master Page" gallery under "Display Templates" folder Why new concepts? • No more XSLT editing every time a particular look & feel is needed • Client-side "templating" techniques represent today's trend (see libraries such as Knockout, Kendo UI, Razor also heavily used in MVC applications) – rely on JSON back- end data
  • 31. Instant benefits with Client-Side Rendering (CSR) Demo

Notas del editor

  1. Composed Looks - Give designers the ability to combine a number of SharePoint pieces together into one look.You can create a composed look using the existing or custom pieces. You can even create variations by using different Themes (.spcolor), Font Schemes (.spfont), and images (intended for backgrounds, but you can be creative!) with the same master page. This is a nice change from the .thmx theming engine used previously, which was clumsy to implement for the most part.Parts of a Composed Look - Title*, Name*, Master Page (.master), Theme (.spcolor),Font Scheme (.spfont), PreviewImage (.jpg, .png, .gif, etc.)
  2. Composed Looks - Give designers the ability to combine a number of SharePoint pieces together into one look.You can create a composed look using the existing or custom pieces. You can even create variations by using different Themes (.spcolor), Font Schemes (.spfont), and images (intended for backgrounds, but you can be creative!) with the same master page. This is a nice change from the .thmx theming engine used previously, which was clumsy to implement for the most part.Parts of a Composed Look - Title*, Name*, Master Page (.master), Theme (.spcolor),Font Scheme (.spfont), PreviewImage (.jpg, .png, .gif, etc.)
  3. Composed Looks - Give designers the ability to combine a number of SharePoint pieces together into one look.You can create a composed look using the existing or custom pieces. You can even create variations by using different Themes (.spcolor), Font Schemes (.spfont), and images (intended for backgrounds, but you can be creative!) with the same master page. This is a nice change from the .thmx theming engine used previously, which was clumsy to implement for the most part.Parts of a Composed Look - Title*, Name*, Master Page (.master), Theme (.spcolor),Font Scheme (.spfont), PreviewImage (.jpg, .png, .gif, etc.)
  4. Composed Looks - Give designers the ability to combine a number of SharePoint pieces together into one look.You can create a composed look using the existing or custom pieces. You can even create variations by using different Themes (.spcolor), Font Schemes (.spfont), and images (intended for backgrounds, but you can be creative!) with the same master page. This is a nice change from the .thmx theming engine used previously, which was clumsy to implement for the most part.Parts of a Composed Look - Title*, Name*, Master Page (.master), Theme (.spcolor),Font Scheme (.spfont), PreviewImage (.jpg, .png, .gif, etc.)