Issy-les-moulineaux, FR

20 JUIN 2013

Réunion Club UGSF 2013

Branding sous SharePoint 2013

Speaker33

MVP SharePoint@: nabil.babaci@azeo.comwww: http://dotnet4ever.fr CodePlex: https://www.codeplex.com/site/users/view/nabilbabaci

Agenda

1. 2013 et le Branding2. De la mobilité3. Niveaux (3) de Branding4. Conclusion

2013 et le branding

Browser (PC)Browser Supported Not supported

Internet Explorer 10 X

Internet Explorer 9 X  

Internet Explorer 8 X  

Internet Explorer 7   X

Internet Explorer 6 X

Mozilla Firefox (Latest version in-market)

 X

Google Chrome (Latest version in-market)

X

 

Safari (Latest version in-market)

X 

Browser (Mobile)Mobile device operating system

Operating system version Browser Smartphone

device

Windows Phone

Windows Phone 7.5 or later versions

Internet Explorer Mobile Supported

Windows Windows 7 or later versions Internet Explorer Not applicable

iOS 5.0 or later versions Safari Supported

Android 4.0 or later versions

Android Browser Supported

Design sous SP2010

Sketche

s

CSS

HTML

Integrate Ribbon

New

MasterpagesCustom Channel Management

Custom

Roll-up

control

Dreamweaver, MS Expression / etc. SharePoint Designer / Visual Studio

Custom Nav

provider

Custom

Catalog

Custom Catalog Integration

Design sous SP2013

Auto Convert

SnippetGallery

Channelsettings

Outils natifs SharePoint

Dreamweaver, MS expression Web / etc.

• Ribbon

• Placeholder Main

• Custom Minimal Master

• It just w

orks!• Navigation

• Catalog Integration

• Content Search Webparts

• Channel Panels

Sketches

CSS

HTML

Upload

De la mobilité

Mobile > Device Channel

Navigateurs & Périphériques Mobile :• Panneau de configuration de

canal périphérique• Agents / Configuration ( IE,

Firefox, Chrome etc..)• Changement de Master Page +

CSS• Périphérique ( Cible Publishing)

Mobile > Données adaptatives

Responsive Design

Css3 Media Queries

Version IE Firefox Chrome Safari OperaiOS Safari

Opera Mini

Android Browser

Blackberry Browser

2.1

2.2

6,0 3.2 2.3

7,0 4.0-4.1 3.0

8.0 4.2-4.3 4.0

9.0 20.0 26.0 5.1 5.0-5.1 4.1 7.0

Actuel 10.0 21.0 27.0 6.0 12.1 6.0-6.1 5.0-7.0 4.2 10.0

Future 11.0 22.0 28.0 7.0 15.0 7.0

Next 23.0 29.0

Wireframe

WireFrame avant tout

• Axure• Balsamiq• Mockingbird • Lovely Charts • Cacoo • Gliffy • Lumzy • Mockflow • Pencil Project • SimpleDiagrams • Denim

Retour en arrière

2007

2010

Niveau 1 de BrandingLow effort

Niveau 1 >Changement de look

Themes basés sur HTML 5• PowerPoint ( .THMX) plus necéssaire

Navigation basée sur le Term StoreImage (resizing)Inclus Master Page, Colors, Fonts, Background Image et Preview FileOutils : Adobe Dreamweaver, Microsoft Expression Web etc…

Niveau 1 >Vues composées

• Lié à votre thème• SharePoint Designer/

Color Palette Tool• SPCOLOR• SPFONT• /_catalogs/theme/

15/

Niveau 2 de BrandingMedium effort

Niveau 2 >Designer Manager > Conception

Design Manager• Pas à Pas – 9 étapes (Master Pages

/ Page Layout)• Prise en charge / HTML- CSS- JS• Injection de Code SharePoint

( Master Page)• Génération du .master• Mapping ( WEBDAV ) catalogs• SPDesigner est moins utile.

Niveau 2 >Designer Manager > Code Snippet

Fonctionnalités SharePoint :• Composants natifs• Code Snippet + Options• Simplicité d’utilisation – rendu

immédiat

Niveau 2 >Designer Manager > Packaging

Design Packages :• 1 fichier WSP• Intègre uniquement (Master Page

Gallery, Style Library, Theme Gallery, Device Channels list, Page content types, Pages)

• Les propriétés de Navigation ou les Term Store (Métadonnées)

Niveau 3 de BrandingHigh effort

Niveau 3 >Développement

• Comme sous 2010• Projets facilement migrable• Solution (modulaire)• Feature ( Site)• Module

( MasterPage,PageLayouts..)• _Layouts (Styles,Imaged,JS)• SiteDefinition

(Onet.xml,webtemp.xml)• Resources

©2012 Microsoft Corporation. All rights reserved. Content based on SharePoint 15 Technical Preview and published July 2012.

Demo

Visual Studio 2012http://brandingsp2013.codeplex.com/

Conclusion

Conclusion >Etapes

Atelier UsersMaquette / Prototye

(PSD)

Maquette HTML/ CSS

SharePoint Branding (1,2,3)

DéveloppementsTests

Solution Package

Production Package

Pour aller plus loin

https://ugsfdesignstarterkit.codeplex.com/

© 2011-2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows 7 and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted

to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.