WebCast Branding en MOSS 2007 – Creando MasterPage – Ciclo 24 MOSS

Me gustaría compartir con ustedes la primera demostración que hicimos en el webcast que dictamos con mi amigo y colega Juan Andrés Valenzuela sobre Breanding y diseño en la plataforma Sharepoint 2007. La idea de este artículo es un paso a paso de lo que realizamos ese día en vivo y brindarles a ustedes el código utilizado para esta demostración.
Los primero que tenemos que tenemos que hacer es habilitar la característica de la colección de sitios “Infraestructura de Publicación de Office Sharepoint Server” la cual nos creara una serie de bibliotecas y nos habilitara Webparts, hojas de estilo XSLT y workflows para el manejo de contenido. La misma deberá estar habilita a nivel de colección de sitio como comente anteriormente y en cada subsito que nosotros queremos tener el manejo de contenido habilitado, en la imagen 1 vemos esta característica habilitada.

[Imagen 1]
clip_image002

Una vez esta habilitado, nos vamos a conectar a nuestro sitio utilizando la herramienta Sharepoint Designer 2007, la cual nos va a brindar la facilidad de crear mucho del contenido que nosotros vamos a utilizar. Una vez conectados al sitio vamos a navegar por las carpetas y bibliotecas de nuestro sitio utilizando el panel izquierdo “Lista de Carpetas” para acceder a donde debemos colocar nuestra página maestra (Master Page), la ruta es _catalogs/masterpage. Ahí nos encontraremos una serie de paginas maestras ya creadas e instaladas que podremos usar, las mismas fueron creadas cuando habilitamos la característica anteriormente mencionada.

Para crear una nueva página maestra seleccionamos en el menú “Archivo” la opción nuevo y se nos va a desplegar una nueva ventana como podemos ver en la imagen 2.

[Imagen 2]
clip_image004

En esta nueva ventana, seleccionamos la opción “Pagina principal” y damos aceptar con lo cual se nos abrirá una nueva página con la extensión .master. No se preocupen por el nombre ahora, ya que después al presionar “Guardar” deberán proporcionar el mismo. Lo próximo que tenemos que hacer es colocar el código necesario para la nueva página maestra (Master Page), en la sección 2 encontraran el código utilizado en la demostración del Webcast, también al final del artículo tendrán un link donde podrán bajarse el código completo, las imágenes y la hoja de estilo utilizadas. Para el correcto funcionamiento de la página maestra deberán crearse dos bibliotecas adicionales para almacenar los recursos a ser utilizados. Pueden usar las bibliotecas que Sharepoint creo, pero deberán cambiar las rutas para que la página maestra que están creando funciones correctamente. Las bibliotecas que necesitan crear en la raíz del sitio son:

· Picture Library Branding – En esta biblioteca estarán todas las imágenes utilizadas.

· Style Library Branding – En esta biblioteca estará la hoja de estilo adicional.

Una vez esta todo pronto, lo próximo que debo hacer es guardar la página maestra, cuando se nos abra la ventana de dialogo, deberemos navegar hasta la biblioteca “masterpage” dado que la misma deberá ser guardada en esta biblioteca del sitio principal de nuestro Sharepoint. Le colocamos un nombre y presionamos el botón “Guardar”. Una vez guardada la misma, quedara en la biblioteca “masterpage” pero estará desprotegida, ya que el icono que presenta nuestra página maestra del lado izquierdo es un “check verde”. Lo próximo que debemos hacer es proteger nuestra página maestra para que el sistema de versionado de la biblioteca nos genere una copia y si no tenemos más modificaciones que hacerle y la queremos probar, lo que debemos hacer es seleccionar la opción publicar. Una vez demos aceptar, se nos preguntara si queremos aprobarla la publicación a lo cual debemos decir que si, si queremos usar la pagina maestra. Se abrirá una ventana del nuestro navegador, donde se nos presentara la vista de la biblioteca de paginas maestras y nuestra página estará listada en la parte superior, pendiente de aprobación. Acá lo único que debemos hacer es, desplegar el menú contextual del elemento y aprobar la misma. Una vez aprobada ya estamos en condiciones de poder utilizarla en el sito que deseemos.

[Sección 2]

<%@ Master language="C#" %>
<!DOCTYPE html Public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %>
<%@ Register TagPrefix="PublishingVariations" TagName="VariationsLabelMenu" src="~/_controltemplates/VariationsLabelMenu.ascx" %>
<%@ Register Tagprefix="PublishingConsole" TagName="Console" src="~/_controltemplates/PublishingConsole.ascx" %>
<%@ Register TagPrefix="PublishingSiteAction" TagName="SiteActionMenu" src="~/_controltemplates/PublishingActionMenu.ascx" %>
<html>
  <SharePoint:RobotsMetaTag runat="server"/>
   <head id="Head1" runat="server">
    <asp:ContentPlaceHolder runat="server" id="head">
<title><asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server" /></title>
    </asp:ContentPlaceHolder>   
    <Sharepoint:CssLink runat="server"/>
    <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />
    <SharePoint:CssLink runat="server"/>
<SharePoint:ScriptLink language="javascript" name="core.js" Defer="True" runat="server"/>
<link rel="stylesheet" type="text/css" href="/Style Library Branding/Branding.css" />
  </head>  
  <body onload="javascript:_spBodyOnLoadWrapper();">
    <form id="Form1" runat="server" onsubmit="Return _spFormOnSubmitWrapper();">
      <WebPartPages:SPWebPartManager runat="server"/>      
  <!– start header –>
<div id="login">
<div Class="ms-globalleft">
    <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server">
<asp:SiteMapPath SiteMapProvider="SPSiteMapProvider" id="GlobalNavigationSiteMap" RenderCurrentNodeAsLink="True" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>
   </asp:ContentPlaceHolder>
   </div>
<div  Class="ms-globalright">
<a href="javascript:TopHelpButtonClick(‘NavBarHelpHome’)" AccessKey="<%$Resources:wss,multipages_helplink_accesskey%>" id="TopHelpLink" title="<%$Resources:wss,multipages_helplinkalt_text%>" runat="server"><img id="Img1" align="absmiddle" border="0" src="/_layouts/images/helpicon.gif" alt="<%$Resources:wss,multipages_helplinkalt_text%>" runat="server" /></a>
</div>
<div  Class="ms-globalright">
<SharePoint:DelegateControl ControlId="GlobalSiteLink2" Scope="Farm" runat="server"/>
</div>
<div  Class="ms-globalright" style="height: 18px">
<SharePoint:DelegateControl ControlId="GlobalSiteLink1" Scope="Farm" runat="server"/>
</div>
<div Class="ms-globalright">
<wssuc:Welcome id="explitLogout" runat="server"/>
</div>
</div> 
<div id="header">
<div id="logo">
  <asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">
<h1>
<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle">
<SharePoint:ProjectProperty Property="Title" runat="server" />
   </SharePoint:SPLinkButton>
</h1>
<p>
  <SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyDescription">
<SharePoint:ProjectProperty Property="Description" runat="server" />
   </SharePoint:SPLinkButton>
</p>
</asp:ContentPlaceHolder>
</div>
<div id="menu">
<div Class="ms-banner ms-globalright">
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<SharePoint:AspMenu
  ID="TopNavigationMenu"
  Runat="server"
  DataSourceID="topSiteMap"
  EnableViewState="False"
  AccessKey="<%$Resources:wss,navigation_accesskey%>"
  Orientation="Horizontal"
  StaticDisplayLevels="2"
  MaximumDynamicDisplayLevels="1"
  DynamicHorizontalOffset="0"
  StaticPopoutImageUrl="/_layouts/images/menudark.gif"
  StaticPopoutImageTextFormatString=""
  DynamicHoverStyle-BackColor="#FFFFFF"
  SkipLinkText=""
  StaticSubMenuIndent="0">
<StaticMenuStyle/>
<StaticMenuItemStyle CssClass="" ItemSpacing="0px"/>
<StaticSelectedStyle CssClass=""  />
<StaticHoverStyle CssClass="" />
<DynamicMenuStyle  BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/>
<DynamicMenuItemStyle CssClass=""/>
<DynamicHoverStyle CssClass=""/>
<DynamicSelectedStyle CssClass=""/>
</SharePoint:AspMenu>
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource">
<Template_Controls>
<asp:SiteMapDataSource
  ShowStartingNode="False"
  SiteMapProvider="SPNavigationProvider"
  id="topSiteMap"
  runat="server"
  StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<div id="ConsolaPublicacion">
      <PublishingWebControls:AuthoringContainer id="authoringcontrols" runat="server"> <PublishingConsole:Console runat="server" />
      </PublishingWebControls:AuthoringContainer>
<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
<wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
</asp:ContentPlaceHolder>    
</div>
<div id="BreadCrumbArea" >
<div Class="ms-globalleft">
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/> &nbsp;
</asp:ContentPlaceHolder>
</div>
<div Class="ms-globalright2">
<PublishingSiteAction:SiteActionMenu runat="server"/>
</div>
</div>
<!– End header –>
<!– start page –>
<div id="page">
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />
</div>
<!– End page –>
<div id="footer">
<p>&copy;2008 All Rights Reserved. &nbsp;&#8226;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> &nbsp;&#8226;&nbsp; Power by <a href="http://www.mossca.org/Default.aspx">MOSSCA.ORG</a>.</p>
</div>  
      <asp:Panel ID="Panel1" visible="False" runat="server"
       <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea"  runat="server"/>
       <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"/>
       <asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server"/>
       <asp:ContentPlaceHolder ID="PlaceHolderBodyLeftBorder" runat="server"/>
       <asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server"/>
       <asp:ContentPlaceHolder ID="PlaceHolderTitleLeftBorder" runat="server"/>
       <asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" runat="server"/>
       <asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat ="server" />
       <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
       <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat ="server"/>
       <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat ="server"/>
       <asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat ="server"/>
       <asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server" />
       <asp:ContentPlaceHolder ID="PlaceHolderMiniConsole" runat="server"/>
       <asp:ContentPlaceHolder ID="PlaceHolderSearchArea" runat="server"/>
       <asp:ContentPlaceHolder ID="PlaceHolderTitleRightMargin" runat="server"/>      
      </asp:Panel>
    </form>
  </body>
</html>
 

En el siguiente link podrán descargar el código completo con todos sus recursos utilizados para la presentación del Webcast.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *