branding effort under sharepoint 2013
DESCRIPTION
Branding effort under SharePoint 2013TRANSCRIPT
![Page 1: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/1.jpg)
Issy-les-moulineaux, FR
20 JUIN 2013
Réunion Club UGSF 2013
![Page 2: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/2.jpg)
Branding sous SharePoint 2013
![Page 3: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/3.jpg)
Speaker33
MVP SharePoint@: [email protected]: http://dotnet4ever.fr CodePlex: https://www.codeplex.com/site/users/view/nabilbabaci
![Page 4: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/4.jpg)
Agenda
1. 2013 et le Branding2. De la mobilité3. Niveaux (3) de Branding4. Conclusion
![Page 5: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/5.jpg)
2013 et le branding
![Page 6: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/6.jpg)
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
![Page 7: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/7.jpg)
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
![Page 8: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/8.jpg)
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
![Page 9: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/9.jpg)
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
![Page 10: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/10.jpg)
De la mobilité
![Page 11: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/11.jpg)
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)
![Page 12: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/12.jpg)
Mobile > Données adaptatives
![Page 13: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/13.jpg)
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
![Page 14: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/14.jpg)
Wireframe
![Page 15: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/15.jpg)
WireFrame avant tout
• Axure• Balsamiq• Mockingbird • Lovely Charts • Cacoo • Gliffy • Lumzy • Mockflow • Pencil Project • SimpleDiagrams • Denim
![Page 16: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/16.jpg)
Retour en arrière
![Page 17: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/17.jpg)
2007
![Page 18: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/18.jpg)
2010
![Page 19: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/19.jpg)
Niveau 1 de BrandingLow effort
![Page 20: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/20.jpg)
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…
![Page 21: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/21.jpg)
Niveau 1 >Vues composées
• Lié à votre thème• SharePoint Designer/
Color Palette Tool• SPCOLOR• SPFONT• /_catalogs/theme/
15/
![Page 22: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/22.jpg)
Niveau 2 de BrandingMedium effort
![Page 23: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/23.jpg)
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.
![Page 24: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/24.jpg)
Niveau 2 >Designer Manager > Code Snippet
Fonctionnalités SharePoint :• Composants natifs• Code Snippet + Options• Simplicité d’utilisation – rendu
immédiat
![Page 25: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/25.jpg)
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)
![Page 26: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/26.jpg)
Niveau 3 de BrandingHigh effort
![Page 27: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/27.jpg)
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
![Page 28: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/28.jpg)
©2012 Microsoft Corporation. All rights reserved. Content based on SharePoint 15 Technical Preview and published July 2012.
Demo
Visual Studio 2012http://brandingsp2013.codeplex.com/
![Page 29: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/29.jpg)
Conclusion
![Page 30: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/30.jpg)
Conclusion >Etapes
Atelier UsersMaquette / Prototye
(PSD)
Maquette HTML/ CSS
SharePoint Branding (1,2,3)
DéveloppementsTests
Solution Package
Production Package
![Page 31: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/31.jpg)
Pour aller plus loin
https://ugsfdesignstarterkit.codeplex.com/
![Page 32: Branding Effort under SharePoint 2013](https://reader036.vdocument.in/reader036/viewer/2022070318/5577facfd8b42a24198b516e/html5/thumbnails/32.jpg)
© 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.