Issy-les-moulineaux, FR
20 JUIN 2013
Réunion Club UGSF 2013
Branding sous SharePoint 2013
Speaker33
MVP SharePoint@: [email protected]: 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.
