eryem camp 03 2014 - website branding
DESCRIPTION
ERYEM Camp de Mars 2014 >> Comment personnaliser un site aux couleurs de votre marque ? 1- Outils grand public 2- Les moyens de l'intégrateur web 3- Accès avancé G.CarlanderTRANSCRIPT
ERYEM Camp
« Branding d’un sitesur SharePoint online»
G.Carlander 2
@GuiLandRover
Guillaume CARLANDER
La passion d’une SharePinte 2013, sans pression
Présentation
Notre problème
G.Carlander 3
Comment réussir à transformer ce site par défaut…
G.Carlander 4
Comment réussir à transformer ce site par défaut…
… En un site vrombissant
Notre problème
G.Carlander 5
Transformer la partie contenu du site
Le contenu
⁺ Changement des WebParts⁺ Editeur HTML inclus
⁻ Aucun accès au style (CSS)⁻ Pas de Javascript
G.Carlander 6
Le design… grand public
G.Carlander 7
Le design… grand public
Aspect• Un changement rudimentaire
G.Carlander 8
Le design… grand public
Aspect• Un changement rudimentaire
Look & Feel• Un design simple, accessible, mais très
limité.
G.Carlander 9
Le design… grand public
Aspect• Un changement rudimentaire
Look & Feel• Un design simple, accessible, mais très
limité.
G.Carlander 10
Le design… grand public
Aspect• Un changement rudimentaire
Look & Feel• Un design simple, accessible, mais très
limité.
• Création d’un nouveau thème
G.Carlander 11
Le design… grand public
Aspect• Un changement rudimentaire
Look & Feel• Un design simple, accessible, mais très
limité.
• Création d’un nouveau thème
<?xml version="1.0" encoding="utf-8"?><s:colorPalette isInverted="true" previewSlot1="BackgroundOverlay"previewSlot2="BodyText" previewSlot3="AccentText"xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="FFFFFF" /><s:color name="SubtleBodyText" value="568F80" /><s:color name="StrongBodyText" value="FFFFFF" /><s:color name="DisabledText" value="4E6262" /><s:color name="SiteTitle" value="79D1B3" /><s:color name="WebPartHeading" value="79D1B3" /><s:color name="ErrorText" value="F73344" />
…
G.Carlander 12
Le design… grand public
Aspect• Un changement rudimentaire
Look & Feel• Un design simple, accessible, mais très
limité.
• Création d’un nouveau thème
<?xml version="1.0" encoding="utf-8"?><s:colorPalette isInverted="true" previewSlot1="BackgroundOverlay"previewSlot2="BodyText" previewSlot3="AccentText"xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="FFFFFF" /><s:color name="SubtleBodyText" value="568F80" /><s:color name="StrongBodyText" value="FFFFFF" /><s:color name="DisabledText" value="4E6262" /><s:color name="SiteTitle" value="79D1B3" /><s:color name="WebPartHeading" value="79D1B3" /><s:color name="ErrorText" value="F73344" />
…
G.Carlander 13
Le design… grand public
Aspect• Un changement rudimentaire
Look & Feel• Un design simple, accessible, mais très
limité.• Création d’un nouveau thème• « SharePoint Color Palette Tool »
G.Carlander 14
Le design… façon intégrateur
G.Carlander 15
Le design… façon intégrateur
Rendu• Intégration de CSS / JS
• Facilement modifiable
G.Carlander 16
Le design… façon intégrateur
Rendu• Intégration de CSS / JS
• TROP facilement modifiable• Endroit imposé• Page par page
G.Carlander 17
Le design… façon geek!
G.Carlander 18
Le design… façon geek!
MasterPage -VS- Page• Savoir placer son code en fonction de sa portée
• Page > « PlaceHolderAdditionalPageHead »• Master > « head »
Placement• Attention au placement• Vraiment attention au placement• Vraiment attention au placement
Définition des fichiers• CSS : <SharePoint:CssRegistration />• JS : <SharePoint:ScriptLink />
Pour une master, on travaille sur une COPIE
<SharePoint:ScriptLink language="javascript" name=“MyLibrary/JS/jquery-1.3.2.min.js" Defer="true" runat="server"/><SharePoint:ScriptLink language="javascript" name=“MyLibrary/JS/MyScript.js" Defer="true" runat="server"/>
<SharePoint:CssRegistration ID="CDGCSS" name="<% $SPUrl:~SiteCollection/CdgRessources/css/cdg60.css %>" After=" corev15.css" runat="server"/>
G.Carlander 19
Deep into CSS - JS
Ecrire son CSS• Attention aux ID / Classes
Ecrire son JS• Possibilité de « rétro-changement »
G.Carlander 20
Deep into CSS - JS
Ecrire son CSS• Attention aux ID / Classes
Ecrire son JS• Possibilité de « rétro-changement »• Faire appel au JS Display Template
function StatusFieldViewTemplate(ctx) {var _statusValue = ctx.CurrentItem.Status;
if (_statusValue == 'Completed'){
return "<span style=’background-color : green’>” + _statusValue + “</span>";
}
if (_statusValue == 'In Progress'){
return "<span style='background-color : yellow’>" + _statusValue + "</span>";
}
}
G.Carlander 21
Du responsive design !
Solution SharePoint > http://responsivesharepoint.codeplex.com/
? !
G.Carlander 22
Merci