Webcast realizado para el MUG (Grupo de Usuarios de Microsoft, Buenos Aires, Argentina) La temática giró alrededor del diseño y configuración de soluciones de Sharepoint.

1. Branding en Sharepoint 2010
Daniel Laco
Director Ejecutivo
daniell@vemn.com.ar

2. Agenda
 Branding
 Qué caminos tengo?
 Herramientas
 Tips & Tricks

9. http://spbuzz.it/sptopsites
http://spbuzz.it/bsdesigns

10. De que se trata?
 Arquitectura de la Información
 Diseño
 Esquemas (Wireframes)
 Branding
 Page Layouts
 Master Pages
 HTML, CSS, JavaScript

11. Conocimientos Necesarios
• SharePoint 2010
 Entender Master Pages, Page Layouts, etc.
• Conocimientos de Diseño Web
 HTML, CSS, JavaScript, XSLT, Silverlight y cualquier tecnolgóa de cliente que se pueda
utilizar
• Entender ASP.NET es un plus
• Manipulación de imágenes (Expression, Photoshop, Fireworks, etc.)

12. Herramientas de Personalización
Logo del Sitio, Formato, WebParts
fácil
Browser
Cambio de Colores, Backgrounds, Fonts
Editar archivo CSS
Cambiar Page Layout y Contenido
complejo
SharePoint
Editar Master Pages
Designer Editar Page Templates (solo SharePoint Server)
Compartir personalización con Otros
SPD + Build Themes y Definiciones de Sitios (Site Definitions)
Visual Studio

13. Que caminos tengo?
• Master Pages
Por Sharepoint • Page Layouts
(en el Server) • CSS Personalizadas
• HTML
Por HMTL • CSS
• JavaScript
Por • XLST
• WebParts
Características • ClientOM
de Sharepoint • Ribbon

14. Master Pages + Page Layouts

15. Master Page
Page Layout
Master Page

16. Master Pages
• Team site master page
v4.master • User content pages (listscontent pagesetc)
• _layouts pages (site settings, etc)
• Para apps tipo Search o Office Web Applications
minimal.master • Si no necesita Site Navigation, Ribbon
• Si se necesita espacio
simple.master • Para paginas de Errores o de Login
• Muestra el sitio con interfaces Legacy
default.master • Sin Ribbon, ni fluidez
http://startermasterpages.codeplex.com/

17. Content Placeholders
<asp:ContentPlaceholder ID="PlaceHolderLeftNavBar"> runat="server" />

18. Content Placeholders
Content Placeholder Description
Used to add extra components such as JavaScript, Jscript, and
PlaceHolderAdditionalPageHead
Cascading Style Sheets in the head section of the page.
The class of the body area. This placeholder is no longer used in
PlaceHolderBodyAreaClass
SharePoint 2010.
This placeholder does not appear as part of the interface but must be
PlaceHolderBodyLeftBorder
present for backward compatibility.
This placeholder does not appear as part of the interface but must be
PlaceHolderBodyRightMargin
present for backward compatibility.
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page.
PlaceHolderFormDigest The container where the page form digest control is stored.
PlaceHolderGlobalNavigation The global navigation breadcrumb control on the page.
PlaceHolderGlobalNavigationSiteMap
http://spbuzz.it/sp2010dcph
The list of sub-sites and sibling sites in the global navigation on the
page.
PlaceHolderHorizontalNav The navigation menu that is inside the top navigation bar.
PlaceHolderLeftActions The additional objects above the Quick Launch bar.
PlaceHolderLeftNavBar The Quick Launch navigation bar.
This placeholder does not appear as part of the interface but must be
PlaceHolderLeftNavBarBorder
present for backward compatibility.
The placement of the data source used to populate the left navigation
PlaceHolderLeftNavBarDataSource
bar.
PlaceHolderLeftNavBarTop The top section of the left navigation bar.
PlaceHolderMain The main content of the page.
This placeholder does not appear as part of the interface but must be
PlaceHolderMiniConsole
present for backward compatibility.
This placeholder does not appear as part of the interface but must be
PlaceHolderNavSpacer

19. CSS - SharePoint OOB (Out of the Box)
• Los links CSS de SharePoint son colocados en cada página
• No se pueden remover completamente todos los links a CSS
• Diferentes tipos de selectores
• Element (ej: h1, h1.extra)
• Class (e.g. brand - <div class=“brand”/>
• Id (ej: #logo - <div id=“logo”/>
• El mismo selector puede ser “sobreescrito” en un archivo css
• Recomentable “sobreescribir” los estilos OOB de Sharepoint en un
archivo propio.
• Muchas de las características OOB requieren todos los atributos desde los
selectores OOB

20. CSS - Agregando estilos personalizados
• Use el control CssRegistration
• Permite a los diseñadores controlar el orden en que se carga el CSS
• Provee el control sobre la cascada
• $SPUrl:~sitecollection reemplaza con el URL correcto en runtime
<SharePoint:CssRegistration
runat="Server"
name="<% $SPUrl:~sitecollection/Style Library/blueyonder/default.css%>"
after="corev4.css" />
<SharePoint:CssRegistration
runat="Server"
name="<% $SPUrl:~sitecollection/Style Library/blueyonder/layout.css%>"
after="<% $SPUrl:~sitecollection/Style Library/blueyonder/default.css%>"/>
<SharePoint:CssRegistration
runat="Server"
name="<% $SPUrl:~sitecollection/Style Library/blueyonder/blueyonder.css%>"
after="<% $SPUrl:~sitecollection/Style Library/blueyonder/layout.css%>"/>

21. CSS –SharePoint UI
• CSS es útil para ocultar UI de SharePoint
• PublishingWebControls:EditModePanel puede ser usado para efectos
similares
• Oculta el contenido cuando la página no está en Modo Edición
<style type="text/css">
body #s4-ribbonrow {
display: none;
}
</style>

22. Temas
12 colores, 2 Fonts
Controla el look and feel del sitio
Usa Temas de Office (.thmx)
Se pueden crear temas via PowerPoint

23. Que podemos hacer por HTML?
• HTML Element markup language (.html)
• Javascript programming language
• jQuery and other libraries housed in .JS files
• Cascading Style Sheets (.css)

24. JavaScript en SharePoint 2010
 3 formas de referenciar jQuery y otras librerias.JS en SharePoint
 Accediendo a <body onload=“funcion()”>
 _spBodyOnLoadFunctionNames.push(“funcion");

25. Fluent UI – Server Ribbon

26. Fluent UI – Dialogos, Status Bar y Notification Area
 SP.UI.ModalDialog
 SP.UI.Notify
 SP.UI.Status
Notification
Status
Bar

27. Using the JavaScript Client Object Model
JavaScriptControls and Logic
Server OM
Browser
JSON Response
ECMAScript OM
Client.svc
XML Request
Proxy
Content
database
SharePoint Server

28. Odata Services
Odata para Listas
 Requests go to ListData.svc
Sintáxis del Request
 /_vti_bin/ListData.svc/{Entity}[({identifier})]/[{Property}]
Ejemplo:
 /_vit_bin/ListData.svc/Projects(4)/BudgetHours
 Obtiene la columna llamada BudgetHours en el item con el id “4” en la lista
de Proyectos

29. Tips & Tricks Avanzados
Temas de Rendimiento Técnicas
• Output Caching
• Reducir el peso de la página • Blob Caching
• CSS Sprites
Herramientas • Consolidar archivos JS y CSS
• Yslow • Cache JS, CSS e imágenes en el
• Fiddler browser
• Wireshark • Minificar JS y CSS
• Acceso Anónimo para CSS, JS e
imágenes

30. Tips & Tricks Avanzados
Remover contenido de los resultados de búsqueda
<div class=“footer noindex”/>
<!--- footer content --->
</div>
Contenido controlado por Seguridad
<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="ManageWeb">
<!--- contenido --->
</Sharepoint:SPSecurityTrimmedControl>

31. Que más?
• Content Query Web Part
• Data view web part en SharePoint Designer
• XSLT templates
• SPServices
• http://spservices.codeplex.com/
• ClientOM
• Social networks
• Facebook (http://code.google.com/p/sharepoint-facebook-wall/)
• Twitter (http://code.google.com/p/sharepoint-twitter/)

32. En Resumen
 SharePoint 2010 tiene un sistema de branding potente
 Las Master Pages puede ser usadas para crear todo el look and
feel que sea necesario
 CSS puede ser usado para integrar con estilos (CSS) de
Sharepoint existentes
 Los Page Layouts permiten tener un control mas fino sobre las
páginas
 No olvidar que esto es HTML !!! (Mucho Jquery + CSS  )

33. Preguntas?

34. Muchas Gracias
Daniel Laco
Director Ejecutivo
daniell@vemn.com.ar

35. TE +54 11 4624-6012 (rot.) email info@vemn.com.ar web http://www.vemn.com.ar