#SPC2012 : Creating your brand in SharePoint 2013 on-premise or in the cloud

Session de 9h à 10h15 animée par Randy Drisgill et John Ross (MVPs)

Petit résumé:

Un tour d’horizon des options de branding des sites SharePoint 2013. Composed looks, design manager, O365, publishing.

Pas de révolution côté WCM à part les display templates. Le design manager est un outil pas mal, pour convertir son html en master page, mais il est pas magique non plus.

Coté collaboratif, les composed looks vont beaucoup plus loin que les vieux thèmes SharePoint 2010, les clients devraient apprécier d’avoir quelque chose encore plus sur mesure à portée de clic.

Coté O365, le publishing est actif lorsqu’on est sur un enterprise plan. Pour les small business plan, un public website est disponible.

// introduction

On commence par un historique du branding qui remonte au branding des vaches lorsque les cowboys devaient retrouver leur troupeau… Je pensais pas qu’on parlerait cowboys ce matin…

Concernant le web en général, le branding parle de couleurs, des logos, etc.

Concernant SharePoint, le sujet de ce matin, on parle plutôt de master pages, layouts, css, web parts, etc.

Ca devrait donc parler a nos amis de Plaza design.

Intro sur office 365:

Small business plan : pas de publishing disponible

Enterprise plan : le publishing est disponible, on peut activer la feature.

On va prendre une approche en 3 parties :

Les 3 parties sur SharePoint 2010 etaient celles ci :

  • low effort : thème et edition des pages
  • medium : custom css, SharePoint designer
  • full : custom master page, layouts, xslt

Sur 2013, on aura plutôt ça :

  • low : composed looks et edition des pages
  • medium : design manager for publishing sites, css
  • full : custom master page, layouts, display templates

// low effort branding

  • page editing
  • Pas trop de nouveauté de ce côté ci. Les icônes sont juste revampée en windows 8 style.
  • composed looks

Out of the box, le moteur de thème à évolué. Les thèmes 2010 n’étaient pas vraiment utilisés.

Le nouveau concept de composed looks inclus une master, des couleurs, fonts, background image et un preview. On a toujours un système de gallerie de composed looks.

Ils nous font une démo et vont changer le composed looks par les sites settings (change the look), on balaye la gallerie, il nous montre qu’on peut glisser déposer une image de font, on peut choisir les couleurs.

Il met une image en background et change son logo (pour changer le logo, plus besoin de l’url, on a un bouton « parcourir ») Ca rend plutot bien avec une image de fond sans taper une ligne de css.

De mon point de vue, les composed looks par defaut sont bof mais en adaptant avec des images de fond liés au business, on peut avoir des rendus pas mal, les clients devraient aimer.

// medium effort branding

  • design manager

La feature publishing doit être active (pas dans Sp foundation du coup, et pour O365, il faut le plan enterprise) pour avoir le design manager.

Ce qui est pratique avec ce design manager, c’est qu’on upload son html pour le convertir en masterpage. SharePoint designer ne doit plus être utilise pour designer son site (note pour moi : y en a qui utilisent SPD pour brander un site ?)

On peut utiliser l’outil que l’on veut pour faire son html : dreamweaver, notepad++, expression, etc. Son choix se porte sur notepad++ 🙂

Avec le design manager, on peut lier un html et une master page, quand on change le html, la master est automatiquement modifiée en fonction.

  • la snippet gallery

Des bouts de code à intégrer en copier coller à sa master en construction (search box, navigation, bienvenue xxx, etc.).

  • design package

Design manager peut creer comme un grand un wsp avec master page, layouts, css, etc… Plus besoin de visual studio pour créer le wsp. La wsp créée est en mode sandbox, prêt pour O365.

Si on veut un wsp farm pour appliquer la master sur plein de collection de site, il faudra retourner sur visual studio.

  • démo du design manager

(tout ce qui est device channel est volontairement ignoré, il faudra checker d’autres sessions)

Upload design files : 

il map sa master page gallery sur un disque réseau.

Il utilise ce disque pour copier et uploader tous ses html, css, image, font, dans un sous répertoire de sa master page gallerie.

Edit master page :

Il sélectionne « convert html file to master page »

Il sélectionne son sous repertoire puis son fichier html

Et hop : son html apparait dans la liste des master et la conversion a été faite.

Il publie sa master en version majeure.

Il applique sa master à son site, on voit que le design est appliqué mais tout le contenu est en bas.

En fait, tous les content placeholder sont par defaut placés en bas. Il faudra les déplacer et les positionner dans sa page.

Il utilise maintenant la snippet gallerie pour copier coller les differents snippets.

Il reprend son repertoire mappé et edit le fichier html uploadé pour coller les snippet.

Et voilà, son exemple avec la search box est facile.

  • CSS

On a 2 options : surcharger les classes de la css SharePoint. Ou du css custom sur une content editor webpart, sur une custom master page ou un alternate css.

CoreV15 a encore plus de lignes de CSS !! 13000 lignes.

Pas de nouveauté, ils recommandent firebug ou F12 sur IE comme outil.

//  full effort branding

Cettte partie, c’est tout le reste.

Il nous montre des sites avec design en SharePoint : renova, energizer, …

On peut avoir une charte qui masque complètement SharePoint.

C’est awesome pour eux !

Mouais, pas nouveau.

Il nous montre le process pour créer des sites avec charte sur mesure, stroyboards, design, integration, etc. Bref, le process classique utilisé sur les projets web et en particuliers sur les projets SharePoint MCNEXT / plaza design, pas de révolution au niveau process.

Custom master page :

On peut utiliser la startermasterpages.codeplex.com

Concernant les nouveautés WCM:

La content search webpart est basée sur des display templates. Ceux ci sont basés sur du html/css situé dans la master page gallery.

// SharePoint online branding

Sur les small business plan :

On a un public facing website à disposition sur son O365. Il nous fait une démo de celui ci.

On a dans le ribbon des actions en plus pour changer le logo, on peut éditer la css. Il y a une gestion du footer qu’on peut éditer, c’est une zone texte basique. Plutot pas mal pour les small business pour faire son site internet, basique mais bien.

Aussi dispo sur les enterprise plan si j’ai bien compris mais pour ceux ci, le publishing est activé donc on peut aller plus loin.

Fabien

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s