SHAREPOINT WEB SITES PETER CARSON MARCH 10, 2015

SharePoint Web
Sites
Peter Carson

March 10, 2015

Gold Sponsor

Silver Sponsors

Peter Carson

  President, Envision IT
  SharePoint MVP
  Virtual Technical Specialist,
   Microsoft Canada
  peter@envisionit.com
  http://blog.petercarson.ca
  www.envisionit.com
  Twitter @carsonpeter
  VP Toronto SharePoint User
   Group

Envision IT
 Public      Intranets /     Extranets /
Websites    Staff Portals   Member Portals

Extranet User Manager

Extranet User Manager

• Easy delegation of user management to business
• Self-registration, approvals, forgotten password
  reset
• Simplified login for both internal and external users

Agenda

Web Site Gallery

   Envision Shakespeare Project

     What's New in WCM

     Search

     Adaptive Web Design

   Open Source Tools

REST Search and Handlebars

Web Site Gallery

OMA Insurance

Media Experts

The Travel Corporation

Shakespeare Reference Project

 www.envisionit.com/shakespeare
 Download the zip file for all the artifacts
      MindMap
      Axure wireframe
      Word Functional Spec
      Visual Studio projects
      PowerShell deployment scripts
      Term store export/import tool and XML data
      Term store navigation control
      Content

Links

   www.envisionit.com                      www.transamerica.ca
   blog.petercarson.ca                     www.collegeofece.ca
   www.envisionit.com/shakespeare          www.samuel.com
   https://Shakespeare.envisionit.com      www.thewaterfrontproperties.ca
   www.bgccan.com                          www.shopsatdonmills.ca
   www.problemgambling.ca                  www.future.sherwaygardens.ca
   www.russelmetals.com                    www.publichealthontario.ca
   www.tarion.com

What’s New in Web
      Content
  Management

Easier Page Authoring With Cut and Paste

Drag and Drop Files

 Drag and drop files from Windows Explorer into the browser,
  or the other way
 Doesn’t support folders or document sets
 Open in Windows Explorer still works best for this
 Requires IE10 or current versions of Chrome, Safari or Firefox
     IE8 and 9 supported with Office 2013 installed

Image Renditions

 Display uploaded images in
  predefined sizes, widths,
  and crops
 Multiple renditions stored
  in document sets
 Content author can create
  renditions (including crops)
  in the browser

Design Manager

                                          Automatically
                                                          Package into
New way to     SharePoint     Edit and     creates the
                                                            a Design
build master   Designer no   preview in    associated
                                                          Package WSP
 pages and       longer      any HTML     master page
                                                               for
  layouts       required       editor       and .aspx
                                                           deployment
                                             layouts

Snippet Gallery

                                                     Changes
    Select                                         synched to
                                   Paste the
 components                                       actual master
                                  snippet into                    Can be used by
such as search   Configure its                     pages and
                                  your HTML                       any web design
    box or        properties                        layouts to
                                 master page or                        tool
  navigation                                       convert to
                                     layout
   control                                         SharePoint
                                                  components

Device Channels

                                  Page layouts
Map channels       Alternate
                                 can include or
 to mobile        master pages
                                    exclude
 devices or         can be
                                 content based
 browsers          assigned
                                   on channel

Display Templates

                                       Three templates
    Used to                            • Control – Overall
                                         structure of search
 customize the                           results
                     No more XSLT!!!
presentation of                        • Group – Show
 search results                          groups of results
                                       • Item – How each
                                         result is presented

Navigation and Friendly URLs

 Site navigation driven by managed metadata
 Term store used for navigation and SEO-friendly URLs
 Connect site navigation to business concepts rather than site
  structure
 Server side control outputs HTML for top nav, left nav, and
  breadcrumb
 Plan is to convert to client-side to support Office 365

Term Store Setup

 Two groups used to separate metadata from navigation
 Metadata group setup globally
     Static GUIDs consistent through all environments
 Navigation group setup at the site collection level
     Allows multiple copies for multiple sites on the farm

Search

 Search is new and different from all previous versions of SharePoint
 The platform has been consolidated
      Built on a combination of FAST Search and SharePoint Search components, as well as new development work – it is the
       same from Foundation to Server
      Foundation Search is intended to replace WSS Search, Microsoft Search Server and Search Server Express from previous
       versions of SharePoint

 It’s used pervasively throughout the product now in many different
  ways, in different features
      eDiscovery, navigation, topic pages, Internet facing business sites, etc.

Search in SharePoint 2013

 Single Extensible Platform
     FAST Engine
     SharePoint Crawler
     Best of both!
 Same Search Platform in both SharePoint and Exchange

Enterprise Search

 Search Page
      Web parts added to a publishing page
 Catalogs
      Cross-site publishing
 Library search
      Executes in place on the library
 Site Search
      _layouts/15/osssearchresults.aspx
      Specifies the site and search parameters
 Search Centre
      Basic Search Center - SharePoint Foundation 2013
      Enterprise Search Center - SharePoint Server 2013

Content Search Web Part

   Similar in concept to the Content Query Web Part
   Many advantages
   Can go across sites, site collections, web apps, even farms
   Leverages the search index -> very scalable
   Query Builder makes it easy to define your results
   Use Display Templates to customize the look and feel
       No more XSLT
 Part of the Enterprise CAL

Pre-Configured CSWPs

 Popular Items
      Shows items that have been recently viewed by many users
 Recently Changed Items
      Shows items that have been modified recently. This can help site users
       track the latest activity on a site or a library
 Recommended Items
      Show content recommendations based on usage patterns for the current
       page
 All of these can be further configured by editing their properties,
  and changing the search criteria

Search Results Web Part

   Similar functionality to the Content Search Web Part
   Doesn’t allow property mapping in the web part configuration
   Mapping is controlled in the Display Template
   Part of the Standard CAL

Catalogs

Category Page                    Item Page

                     www.contoso.com/products/Audio-Liware2g

Catalogs

                   Results

            Manage      No need
Consistent                           No need Metadata
           content in   to create
 Displays                           to format Navigation
           one place      pages

Cross-Site Publishing

 Reuse content between different sites, including site
  collections and farms
 Catalogs can surface lists into publishing sites onto a
  category page and item pages
 Can be surfaced through the Content Search Web
  Part
 No need to create and publish web pages
 Create custom, friendly URLs
 Metadata based navigation base

Cross Site Publishing

                                      Job Posting

                                      Job Posting

Job Posting
                                      Job Posting

Simcoe County District School Board

   50,000 students
   Over 6,000 employees
   Board office in Barrie
   Bordered by the Holland Marsh in the south, the Trent-Severn
    Waterway in the east, Grey County in the west and Muskoka in the
    north

Simcoe County District School Board

 119 schools and centres
      87 elementary
      16 secondary
      6 learning centres
      10 alternative
 Each needs their own web site
      Being built on SharePoint 2013
      Elementary panel first
      Each has their own unique URL
      Content authored both at the school and centrally from the board
 www.scdsb.on.ca
      Pre-existing SharePoint 2010 site
      Future goal is to rebuild in SharePoint 2013

Business Challenge

   100+ public web sites
   No standardization on style, technology, or content
   No ability for the board to push content to the school sites
   Outdated sites
   Not mobile or AODA compliant

Site Features

   Fully Adaptive/mobile design
   Robust Search functionality
   Template makes it fast and efficient to add new school sites
   News and events can be targeted by the Board to any number of
    school sites
       Target by panel, weather zone, trustee, language
       Presented in a blended view with the school news and events
 Home page rotator, links, hours, content pages all managed by the
  school staff
 SEO-friendly URLs

News

 School news entered by school
  staff
 Board news entered in the board
  site
 Rendered using cross-site
  publishing
 High-priority alerts can be
  flagged to highlight on the site
      Bus or school cancellations

Events

 Single and multi-day events
 School and board managed like
  news
 Adaptive calendar

School Picker

 Used to pick which schools to
  target news and events to
 Schools are tagged through the
  term store
 Target by panel, weather zone,
  trustee, language
 Can override and add or remove
  individual schools

Search

Catalogs

 Three main steps
     Enabling lists or libraries as catalogs
     Creating the catalog connection
     Building the page layouts to display the category rollups or item
      detail pages

Enabling Catalogs

 Doesn’t have to be a list, can be a document, Images, or Pages library
      Experimenting using a Pages library
      This gives us draft and published states that lists don’t support
      Preview and editing is easier
 Fairly simple script to do this
 Catalog connections are more complex
      Create the connection
      Fix up the Term Store
      Create the Category and Item page layouts and pages

SEO Enhancements

 Friendly URLs
 Home page redirects
 XML sitemaps
  automatically generated
  and updated
 Custom SEO properties

Usage Analytics

 Built for scale from the ground up
      Detail data rolled up every 15 days & anonymized
      Daily events purged every 15 days; monthly events after 3 years
      Lifetime counts always retained
 Counts views & unique items/day
      Shows recent (2-weeks) and lifetime count
      Trims least visited content
      Pushes aggregate data to reporting database
 Drives recommendations capabilities on content
      Calculations injected into search index as sortable managed properties
      Deep integration with search engine
      Can influence search relevance based on content usage

Variations and Multi-Lingual

 Export and import content for translation in XLIFF format
     Pages
     Labels
     List items
     Navigation
 Bing translation service comes with active SharePoint 2013
  license

Adaptive Web Design

Adaptive vs. Responsive

Adaptive                                         Responsive
     Fixed breakpoints                                 No fixed breakpoints
       ‒   Desktop > 980 px                             Design fluidly adapts to whatever
       ‒   Table portrait > 768 px                       width the browser is
       ‒   Phone to tablet
           > 480 px < 768 px
       ‒   Smartphone < 480 px

             We generally do a hybrid approach, with responsive design in the under
             768 pixel situation

Design Approaches in SharePoint

Adaptive Design through CSS media                Device Channels
queries                                                SharePoint specific approach
      Broader standards approach used outside         Assign different master pages to different
       of SharePoint                                    device channels
      Keeps a single master page and CSS              Rules define what devices use which
      Some unnecessary components may still            channels
       be loaded                                       Device Channel Panels can also target
                                                        content to channels

           Hybrid here can also make sense. Device channels can be used to
           remove unnecessary items from the page payload.

Our Adaptive Approach

 Built using the Twitter Boostrap CSS framework
     twitter.github.com/bootstrap/
     Provides a responsive design framework for supporting PC, Mac, tablet,
      and mobile
     We enhanced to provide better touch navigation support
     Can be leveraged in the master page, page layouts, and display templates
 Incorporated into the SharePoint 2013 Design Master
     HTML based master page that can be edited with any tool
     SharePoint converts to a master page when uploaded or saved

Additional Open Source Tools and Resources

 HTML, CSS, JavaScript, jQuery
       http://www.w3schools.com/
   http://getbootstrap.com/
   http://handlebarsjs.com/
   http://knockoutjs.com/
   https://angularjs.org/
   http://momentjs.com/

Content Search Web Part

 Web part is configured to return search results
 Executed as client-side code in the browser
 Pair of display templates map the data returned to HTML
     Control template for the overall structure
     Item template for each item returned
     HTML Designer Manager files are compiled to JavaScript

REST Search and Handlebars

 Search is accessible through REST calls
     http://siteurl/_api/search/query
 Returns results as a JSON array
 Handlebars is a templating engine to format that
     Conceptually similar to display templates, with control and item
      sections
 jQuery glues this all together

Steps to Experiment

   F12 to get into Developer Toolbar
   Set a breakpoint where the REST URL is determined
   Copy the value
   Paste into the REST Search test window
   Experiment with the query
   Adjust the Handlebars template appropriately

Search Setup

 Content Sources to define and schedule the crawls
 Crawl logs to review success
 Search Schema to define the managed properties

Reusable Content

 Snippets of HTML that can be reused throughout the site
 JavaScript can be intelligent and use the URL to determine its
  behaviour
 Makes it easy for content authors to drop pre-configured
  dynamic content onto pages

Topic Pages

 Shows all items that match a topic
 Could be hundreds of virtual pages
 Only one template page
 Easily customizable and SEO friendly (each topic appears to be its
  own page)
 Content by search web part open search against a query or result
  source
 May be able to surface the topic pages themselves as site search
  results

Public Health Ontario

http://www.publichealthontario.ca/en/BrowseByTopic/Pages/Topic.aspx?k=Influenza%20InformationByTopic:%22Influenza%22

Ontario Association of Childrens Aid Societies

Other Topics

 Site Design                              Starting a new project
      Information architecture            Managing content authoring
      Wireframes                          Site Improve tool
      Creative designs – Mobile first
                                           SEO Optimizations
 Catalogs deep dive
                                           Analytics options
 Site build PowerShell scripts
                                           Retaining Page Ranks with
 Team Foundation Server and                permanent redirects (301)
  Application Lifecycle
                                           Azure SharePoint Hosting
  Management

Q&A

Session Evaluations

 Go to Evaluations on the home page of www.collabcon.org
 It is important to get your feedback
 Please fill out evaluations for all the sessions you attend
 Following the conference, a random drawing from all
  completed evaluations will be selected
 The winner will receive a $250 Future Shop gift card, valid
  online or in store