• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Branding en Sharepoint 2010
 

Branding en Sharepoint 2010

on

  • 1,645 views

Webcast realizado para el MUG (Grupo de Usuarios de Microsoft, Buenos Aires, Argentina)

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.

Statistics

Views

Total Views
1,645
Views on SlideShare
1,645
Embed Views
0

Actions

Likes
0
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Branding en Sharepoint 2010 Branding en Sharepoint 2010 Presentation Transcript

    • Branding en Sharepoint 2010 Daniel Laco Director Ejecutivo daniell@vemn.com.ar
    • Agenda Branding Qué caminos tengo? Herramientas Tips & Tricks
    • http://spbuzz.it/sptopsiteshttp://spbuzz.it/bsdesigns
    • De que se trata? Arquitectura de la Información Diseño Esquemas (Wireframes) Branding Page Layouts Master Pages HTML, CSS, JavaScript
    • 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.)
    • Herramientas de Personalización Logo del Sitio, Formato, WebParts fácilBrowser Cambio de Colores, Backgrounds, Fonts Editar archivo CSS Cambiar Page Layout y Contenido complejoSharePoint 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
    • 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
    • Master Pages + Page Layouts
    • Master Page Page LayoutMaster Page
    • 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 fluidezhttp://startermasterpages.codeplex.com/
    • Content Placeholders <asp:ContentPlaceholder ID="PlaceHolderLeftNavBar"> runat="server" />
    • Content PlaceholdersContent Placeholder Description Used to add extra components such as JavaScript, Jscript, andPlaceHolderAdditionalPageHead Cascading Style Sheets in the head section of the page. The class of the body area. This placeholder is no longer used inPlaceHolderBodyAreaClass SharePoint 2010. This placeholder does not appear as part of the interface but must bePlaceHolderBodyLeftBorder present for backward compatibility. This placeholder does not appear as part of the interface but must bePlaceHolderBodyRightMargin 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 bePlaceHolderLeftNavBarBorder present for backward compatibility. The placement of the data source used to populate the left navigationPlaceHolderLeftNavBarDataSource 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 bePlaceHolderMiniConsole present for backward compatibility. This placeholder does not appear as part of the interface but must bePlaceHolderNavSpacer
    • 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
    • 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%>"/>
    • 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>
    • Temas12 colores, 2 FontsControla el look and feel del sitioUsa Temas de Office (.thmx)Se pueden crear temas via PowerPoint
    • 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)
    • JavaScript en SharePoint 2010 3 formas de referenciar jQuery y otras librerias.JS en SharePoint Accediendo a <body onload=“funcion()”>  _spBodyOnLoadFunctionNames.push(“funcion");
    • Fluent UI – Server Ribbon
    • Fluent UI – Dialogos, Status Bar y Notification Area SP.UI.ModalDialog SP.UI.Notify SP.UI.Status Notification Status Bar
    • Using the JavaScript Client Object Model JavaScriptControls and Logic Server OMBrowser JSON Response ECMAScript OM Client.svc XML Request Proxy Content database SharePoint Server
    • 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
    • Tips & Tricks AvanzadosTemas de Rendimiento Técnicas • Output Caching• Reducir el peso de la página • Blob Caching • CSS SpritesHerramientas • 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
    • Tips & Tricks AvanzadosRemover 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>
    • 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/)
    • 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  )
    • Preguntas?
    • Muchas Gracias Daniel Laco Director Ejecutivo daniell@vemn.com.ar
    • TE +54 11 4624-6012 (rot.) email info@vemn.com.ar web http://www.vemn.com.ar