Diseño Gráfico en SharePoint Foundation 2010 Parte 3.

Introducción

En artículos anteriores hicimos una introducción acerca de cómo incorporar en SharePoint 2010 los estilos creados por un diseñador gráfico. Nos basamos en algunas hipótesis como el uso de SharePoint Foundation, páginas maestras, hojas de estilo y modelo de objetos de cliente para JavaScript. Se recomienda leer la parte 1 y la parte 2 antes de continuar. También les recomiendo leer los ejemplos de CAML con Client Object Model, porque los utilizo para obtener datos de listas.

En esta tercera etapa, vamos a trabajar con dos casos puntuales:

· Botonera gráfica en reemplazo del Inicio Rápido

· Tablero de control con indicadores gráficos

Qué lo disfruten!

 

Botonera gráfica en reemplazo del Inicio Rápido

Lo primero que vamos a mostrar es cómo agregar una botonera con imágenes que reemplace al tradicional Inicio Rápido. Esta botonera se verá en todas las páginas. Para ello modificamos la página maestra y agregamos algunos estilos. El resultado final se ve en esta imagen:

Imagen 1 – Botonera gráfica en reemplazo de Inicio Rápido

 

El siguiente código muestra el agregado de la botonera en la página maestra

<div id="botonera_izquierda">

<div id="menu">

<ul id="nav">

<li><a href="/"><img src="/internal/nav_inicio_static.jpg" width="90" height="90"></a></li>

<li><a href="/Lists/Noticias"><img src="/internal/nav_noticias_static.jpg" width="90" height="90"></a></li>

<li><a href="/Lists/Personal"><img src="/internal/nav_nuestras_static.jpg" width="90" height="92"></a></li>

<li><a href="/Polticas"><img src="/internal/nav_politicas_static.jpg" width="90" height="91"></a></li>

<li><a href="/Formularios"><img src="/internal/nav_formularios_static.jpg" width="90" height="91"></a></li>

<li><a href="/Lists/Busquedas"><img src="/internal/nav_busquedas_static.jpg" width="90" height="91"></a></li>

<li><a href="/Lists/Menu"><img src="/internal/nav_menu_static.jpg" width="90" height="91"></a></li>

<li><a href="/Revistas/"><img src="/internal/nav_revista_static.jpg" width="90" height="91"></a></li>

<li><a href="/"><img src="/internal/nav_remises_static.jpg" width="90" height="91"></a></li>

<li><a href="/Capacitaciones"><img src="/internal/nav_capacitaciones_static.jpg" width="90" height="92"></a></li>

</ul>

</div>

</div>

 

El código debe ser agregado justo antes de esta línea:

<div id="s4-leftpanel-content">

 

Por otro lado, agregamos los siguientes estilos en nuestra hoja de estilos:

#s4-leftpanel { width: 95px !important;}

#s4-leftpanel-content { display: none; }

.s4-ca { margin-left: 95px; }

 

Un detalle más, queremos que los botones cambien a otra imagen en el momento en que pasamos el mouse por sobre ellos (hover), tal como se ve en la siguiente imagen:

Imagen 2 – Efecto Hover en la botonera

 

Con ese fin agregamos en la página maestra, el siguiente código jQuery:

<script type="text/javascript">

$('#nav a img').hover(

function() {

$(this).attr('src', $(this).attr('src').replace('static', 'over') );

},

function() {

$(this).attr('src', $(this).attr('src').replace('over', 'static') );

}

);

</script>

Tablero de control con indicadores gráficos

Cómo segundo ejemplo del día, vamos a agregar unos indicadores gráficos que se vean como los de la siguiente imagen:

Imagen 3 – Ejemplo de Tablero de Control

Estos indicadores serán generados a partir de información en listas usando CAML. En este caso usaremos una página de aplicación en C# con código de servidor por un tema de rendimiento, pero también podría ser JavaScript con Cliente Object Model.

Dentro de nuestra página ASP.Net llamaremos a una hoja de estilos además de crear el DIV “contenido”:

<asp:Content ID="Main" runat="server" contentplaceholderid="PlaceHolderMain" >

<div runat="server" ID="contenido" />

<link href="agea_telefonia_dashboard.css" type="text/css" rel="stylesheet" id="stylesheet" />

</asp:Content>

<asp:Content ID="PageTitle" runat="server" contentplaceholderid="PlaceHolderPageTitle" >

Panel de Control

</asp:Content>

<asp:Content ID="PageTitleInTitleArea" runat="server" contentplaceholderid="PlaceHolderPageTitleInTitleArea" >

Panel de Control

</asp:Content>

 

Leeremos la información vía CAML. No voy a mostrar en el código la lectura de información porque está muy relacionada con la lógica del negocio y no es más que lecturas típicas en CAML. Lo que si mostraré es cómo incorporar esos valores dentro de dos DIVs pensados para estructurar la información:

· DIV dash01 para el valor del indicador 1

· DIV dash01_detalle para el detalle del indicador 1

· Y así sucesivamente…

 

contenido.InnerHtml = "<div class='semaforos'>";

contenido.InnerHtml += "<div id='dash01' class='" + luz_indicador_1 + " dash'><p class='titulo'>CALENDARIO</p><p class='valor'>" + x_equipos_sin_linea + "</p><p class='leyenda'>Tiempos del Proyecto</p></div>";

contenido.InnerHtml += "<div id='dash02' class='" +

Continuar el armado de DIVs para el resto de los indicadores.

contenido.InnerHtml += "</div>";

contenido.InnerHtml += "<div id='dash01_detalle' class='detalle'>" + detalle_indicador_1 + "</div>";

contenido.InnerHtml += "<div id='dash02_detalle' class='detalle'>" +

Continuar el armado de DIVs de detalle para el resto de los indicadores.

 

Agregaremos además algo de código jQuery para que al presionar sobre un indicador, nos muestre la información de detalle. Para ello llamamos a los scripts correspondientes de ASPX:

Page.ClientScript.RegisterClientScriptInclude("dash_jquery", ResolveUrl("./jquery-1.8.2.min.js"));

Page.ClientScript.RegisterClientScriptInclude("dash_script", ResolveUrl("./dashboard.js"));

Page.ClientScript.RegisterStartupScript(this.GetType(), "dash_script", "asignar_botones();", true);

 

Y este es nuestro código jQuery “dashboard.js”:

function asignar_botones () {

$( document ).ready(function() {

$(".dash").click(function() {

var panel = "#" + $(this).attr('id') + "_detalle";

$(".detalle").css("display","none");

$(panel).slideDown( "slow" ).css("overflow","visible");

$(".dash").removeClass("dash_selected");

$(this).addClass("dash_selected");

});

});

 

Por último nos queda incorporar nuestra hoja de estilo, cuidando que el diseño sea responsive y se adapte al ancho de la pantalla, como se ve en esta imagen (en una pantalla más angosta que la anterior):

Imagen 4 – Ejemplo de Tablero de Control con un ancho de pantalla más angosto

 

.dash { border: solid white 2px; }

.dash_selected { border: solid #333333 2px; }

.semaforos div {

float: left;

width: 22%;

margin: 3px;

padding: 15px 15px 10px 15px ;

}

.semaforos {

font-family: tahoma;

text-align: center;

cursor: pointer;

}

.verde { background-color: #8CC152; }

.rojo {background-color: #E9573F; }

.amarillo { background-color: #F6BB42;}

.gris{ background-color: #C8C8C; }

.valor {

color: #fff;

font-weight: 500;

font-size: 36px;

margin-top: 20px;

margin-bottom: 10px;

}

.titulo {

color: #fff;

font-size: 17px;

font-weight: 500;

}

.leyenda {

border-top: solid white 5px;

padding-top: 12px;

color: #fff;

font-size: 12px;

height: 65px;

}

.verde .leyenda { border-top-color: #76AD3E;}

.rojo .leyenda { border-top-color: #D1462C;}

.amarillo .leyenda { border-top-color: #E0A52C; }

.gris .leyenda { border-top-color: #737373; }

.detalle {

border-left: solid #E6E9ED 10px;

width: 95%;

height: 200px;

margin: 5px;

padding: 5px;

font-size: 11px;

font-family: tahoma;

clear: both;

display:none;

}

.detalle span {

font-size: 11px;

font-family: tahoma;

}

.detalle a {

padding: 5px;

font-size: 11px;

}

Conclusión

Esta fue la tercera entrega de esta colección de artículos dedicada a demostrar cómo se puede trabajar en SharePoint junto a un diseñador gráfico profesional. En mi opinión, esto es muy valorado por los clientes.

Les presento otra imagen del resultado final, ya vieron una en el artículo anterior. Espero como siempre que haya sido útil y cualquier duda me consultan. Saludos!

Imagen 5 – Diseño Gráfico aplicado a la página de inicio de SharePoint (caso 2)

 

Juan Pablo Pussacq Laborde

SharePoint MVP

Blog: http://surpoint.blogspot.com/

Facebook: http://facebook.com/surpointblog/

Twitter: http://twitter.com/jpussacq/

 

Publicado originalmente para revista COMPARTIMOSS

Leer más...

Diseño Gráfico en SharePoint Foundation 2010 Parte 2

Introducción

En el artículo anterior hicimos una introducción acerca de cómo incorporar en SharePoint 2010 los estilos creados por un diseñador gráfico. Nos basamos en algunas hipótesis como el uso de SharePoint Foundation, páginas maestras, hojas de estilo y modelo de objetos de cliente para JavaScript. Se recomienda leer la parte 1 antes de continuar.
En esta segunda etapa, vamos a trabajar con algunos aspectos más específicos. Se trata de ciertas situaciones puntuales que se nos pueden presentar y los enfoques de desarrollo propuestos en cada caso.
Qué lo disfruten!

Ocultar Inicio Rápido salvo excepciones

Supongamos que necesitamos ocultar el inicio rápido (y el espacio que ocupa) en todas las pantallas, excepto en aquellas que trabajan con vistas de calendario. Una forma de resolverlo es agregar este código a la hoja de estilos.

#s4-leftpanel, .ms-quicklaunchouter { display: none; }

.s4-ca { margin-left: 0px; }

Con el primero ocultamos la barra de inicio rápido y en particular los elementos que no son de calendario. Con el segundo estilo, quitamos el espacio que ocupa la barra de inicio rápido.

Además, agregamos el siguiente código en nuestra página maestra, justo antes de "</body>:

<script type="text/javascript">

var x = document.getElementById("Ribbon.Calendar");

if (x != null) {

 // Existe la Ribbon de Calendario, por lo tanto se necesita la Quick Launch

 document.getElementById('s4-leftpanel').style.display='inline';

 document.getElementById('MSO_ContentTable').style.marginLeft='155px';

 }

</script>

Este código detecta si se trata de una página de tipo calendario. En caso que así sea, vuelve a hacer visible el Inicio Rápido, pero sólo mostrarán las opciones de calendario tal como se ve en esta imagen:

Imagen 1 – Inicio Rápido sólo visible en Calendario

Referenciar la CSS dentro de la Master Page en un subsitio
SharePoint Foundation no soporta $SPUrl:~sitecollection tal como lo soporta la versión Server. Esto genera problemas para referenciar a una hoja de estilos, especialmente si nos encontramos en un subsitio y queremos evitar incluir el nombre del subsitio en la página maestra.
Para resolverlo hacemos uso de ASP:literal y de SharePoint:ProjectProperty, lo que nos permite construir en forma dinámica la URL de la hoja de estilos. Más abajo dejo un enlace en donde está explicado en detalle. El código es el siguiente:

<asp:literal runat="server" Text="&lt;link href='"/>

 <SharePoint:ProjectProperty Property="SiteUrl" runat="server" />

 <asp:literal runat="server" Text="/Internal/Intranet.css' rel='stylesheet' type='text/css'/&gt;"/>

Agregar enlaces en el pie de página dentro de la master page
Supongamos que tenemos que agregar enlaces en el pie de página en un subsitio y no conocemos la dirección del sitio, entonces podemos utilizar el siguiente código, haciendo uso de le _spPageContextInfo:

<a href="' + window.location.protocol + '//' + window.location.host + retornar_sitio() + '/Contenido/Historia.aspx' + '">Calidad</a>

Para ello, hemos creado previamente una función llamada retornar_sitio:

<script type="text/javascript">

function retornar_sitio() {

 if ( _spPageContextInfo.siteServerRelativeUrl == '/') { 

 return ""; 

 }

 else {

 return (_spPageContextInfo.siteServerRelativeUrl);

 }

}

</script>

Nota: este mismo truco puede ser utilizado también en la barra de vínculos superior!
Dar estilo a una vista de Noticias
Vamos a salir ahora de la página de inicio. Imaginemos que tenemos una lista de SharePoint con Noticias. Creamos una vista estándar con los siguientes campos:

• Imagen destacada
• Título (vinculado al elemento)
• Fecha
• Resumen

Ahora queremos darle algo de estilo a la lista, pero sin perder las funcionalidades de SharePoint. Es decir que no queremos crear una página a medida, sino utilizar las opciones de SharePoint para crear vistas desde el navegador.
Entonces optamos por el enfoque de agregar una CEWP que modifique el estilo de esta vista. En este ejemplo, vamos a asumir que la vista tiene estas opciones:

• Sin edición incluida / Con vista tabular
• Con estilo Boletín sin líneas

En una primer parte, trabajamos todo con estilos, dejaremos para el final algunos scripts para puntos que no podemos manejar con CSS. Nuestros estilos son:

<style>

/* Oculto la tabla mientras trabajo */

body { display: none; }

/* Oculto la fila con los nombres de los campos */

.ms-listviewtable .ms-viewheadertr { display: none; }

/* Minimizo el ancho de la columna que tiene la foto */

.ms-listviewtable > tbody > tr > td:first-child { width: 1%; }

/* alternado de filas */

.ms-vb2, .ms-vb-tall, .ms-newsletteralt td { background-color: white !important; }

/* Bordes */

.ms-listviewtable td { border-color: white !important; }

/* Imagen*/

.noticia_general_left_img_sharepoint {

 border-left: solid 8px #297AD3;

}

/* Título */

.noticia_general_right_title_sharepoint {

 font-size: 25px;

 font-weight: lighter;

 padding-left: 15px !important;

 font-family: "Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif;

 width: 500px;

}

.noticia_general_right_title_sharepoint a {

 color: #000 !important;

 height: 20px;

}

/* Fecha */

.noticia_general_right_date_sharepoint {

 color: #297ad3;

 width: 200px;

}

.noticia_general_right_date_sharepoint_sep {

 border-bottom: 1px solid #d3dcf3;

 padding-bottom: 3px;

 margin-left: -5px;

}

/* Resumen */

.noticia_general_right_gray_sharepoint {

 color: #999999;

 font-size: 15px;

 line-height: 19px;

 font-family: "Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif;

 overflow: hidden;

}

/* Separador */

.noticia_general_divisor_sharepoint {

 border-bottom: 1px dashed #797979;

 padding-top: 50px;

 padding-bottom: 3px;

}

</style>

En una segunda parte, trabajamos con jQuery para agregar los estilos definidos en donde corresponda y modificar algunos anchos, de acuerdo al tipo de noticia:

<script type="text/javascript" src="./../../Internal/jquery-1.9.1.js"></script>

<script type="text/javascript">

 lista_ini = window.location.href.indexOf("/Lists/") + 7;

 lista = window.location.href.substr(lista_ini);

 lista_fin = lista.indexOf("/");

 lista = lista.substr(0, lista_fin);

 $(document).ready(function () {

 // Formato de la imagen

 $('.ms-listviewtable > tbody > tr > td:nth-child(1) img[src*="noticias"]').addClass('noticia_general_left_img_sharepoint');

 // Formato del título

 $('.ms-listviewtable > tbody > tr > td:nth-child(2)').addClass('noticia_general_right_title_sharepoint');

 $('.noticia_general_right_title_sharepoint').prepend('> ');

 // Formato del resumen

 $('.ms-listviewtable .ms-rtestate-field').addClass('noticia_general_right_gray_sharepoint');

 // Formato de la fecha

 $('.ms-listviewtable > tbody > tr > td:nth-child(3)').addClass('noticia_general_right_date_sharepoint');

 $('.noticia_general_right_date_sharepoint').append('<br/><div class="noticia_general_right_date_sharepoint_sep"></div>');

 // Formato de la línea de división

 $('.ms-vb-tall').append('<br/><div class="noticia_general_divisor_sharepoint"></div>');

 // Formatos variables según la página

 if (lista == 'Noticias') {

 $('.noticia_general_left_img_sharepoint').css('width', '371px').css('height', '233px');

 $('.noticia_general_right_gray_sharepoint').css('margin-top', '-190px').css('height', '175px').css('margin-left', '400px');

 }

 else if (lista == 'Noticias_Centros') {

 $('.noticia_general_left_img_sharepoint').css('width', '182px').css('height', '107px');

 $('.noticia_general_right_gray_sharepoint').css('margin-top', '-65px').css('height', '100px').css('margin-left', '213px');

 }

 else if (lista == 'Noticias_Perfiles') {

 $('.noticia_general_left_img_sharepoint').css('width', '154px');

 $('.noticia_general_right_gray_sharepoint').css('margin-top', '-121px').css('height', '100px').css('margin-left', '184px');

 }

 else {

 alert('Página no soportada. Contace a su administrador.');

 }

 $("body").fadeIn("slow");

 }); 

</script>

Evitar que un estilo aparezca en una pantalla de diálogo
Y finalmente, un último truco que siempre nos puede sacar de apuro...
Si queremos evitar que una porción de nuestro código aparezca en una ventana de diálogo, por ejemplo el pie de página, simplemente agregamos la clase "s4-notdlg":

<div id="footer" class="s4-notdlg">

Conclusión
Esta fue una segunda parte del artículo para incorporar estilos gráficos en SharePoint Foundation 2010. Por supuesto hay mucho más material y muchas formas distintas de resolver los problemas. En mi opinión, a la hora de elegir el mejor enfoque de desarrollo, debemos pesar todas las variables. A veces lo más limpio desde el punto de vista de desarrollo puede generar un mayor costo de mantenimiento futuro o hacer perder algunas opciones de configuración fuera de la caja de SharePoint. Cada escenario es distinto. Lo importante es encontrar la forma de convivencia adecuada entre el desarrollador SharePoint y el diseñador gráfico y obtener un resultado como el que se ve en la imagen:

Imagen 2 – Diseño Gráfico aplicado a la página de inicio de SharePoint

Bibliografía
A guide to Branding and SharePoint Foundation - Part 2
Understanding the _spPageContextInfo variable in SharePoint 2010
Diseño Gráfico en SharePoint Foundation 2010

Juan Pablo Pussacq Laborde

SharePoint MVP

Blog: http://surpoint.blogspot.com/

Facebook: http://facebook.com/surpointblog/

Twitter: http://twitter.com/jpussacq/

Leer más...

Diseño Gráfico en SharePoint Foundation 2010.

Resumen:
En este artículo se detalla un enfoque de desarrollo orientado a aplicar diseño creado por un diseñador gráfico en SharePoint Foundation 2010. Al final del camino, se busca un sitio como el siguiente:

Imagen 1 – Ejemplo de página de inicio con diseño gráfico

Dentro de los objetivos perseguidos, hay dos que se consideran los más importantes:

• Separar dentro de lo posible el trabajo del diseñador gráfico del trabajo del desarrollador
• Facilitar la mantenibilidad del sistema, evitando utilizar funciones menos conocidas por los desarrolladores, como crear una página maestra desde cero o utilizar código de servidor.

Principales lineamientos:

• La plataforma es Foundation, no Server.
• El diseño es de un ancho fijo, diferente al estándar de SharePoint que ocupa el ancho total de la pantalla.
• Se busca preservar la ribbon porque posee funcionalidad muy importante, pero tratando de que no ocupe tanto el centro de atención.
• Existen elementos de cabecera que se repiten en todas las páginas, lo que incluye una imagen, el usuario conectado y un menú horizontal. También un pie de página.
• La imagen de cabecera es más alta que la ribbon de SharePoint.
• Existen elementos que sólo se ven en la home page, como la efemérides, la fecha del día y el contenido en sí.
• El contenido de la home page, posee un diseño gráfico, muy diferente al estándar de SharePoint.

Enfoque técnico

• Se busca maximizar el uso de CSS
• Se busca minimizar el uso de la Página Maestra
• Se crea el contenido propio de la home con Cliente Object Model (Java Script) para poder formatearlo con mayor facilidad

Página Maestra
El primer paso consiste en crear nuestra propia página maestra. En muchos casos se parte desde un página maestra básica (starter), pero nosotros preferimos copiar la estándar. Para ello debemos completar los siguientes pasos:

1. Abrimos nuestro sitio desde SharePoint Designer y nos ubicamos en la sección “Master Pages”
2. Copiamos la página “v4.master” y le ponemos un nombre como “intranet.master”
3. Luego elegimos la opción “Set as default master page“

Página de inicio con diferente diseño
Supongamos que necesitamos una página de inicio con tres o cuatro columnas. Si bien, desde SharePoint 2010, es posible elegir cualquier página como home page, vamos a optar por un método que nos dé mayor flexibilidad, siguiendo estos pasos:

1. Crear una librería de documentos llamada “Internal”
2. Creamos una archivo llamado “Intranet_Home.htm”
3. Agregar una CEWP en la home que llame a ese archivo

Ese archivo contendrá scripts y estilos que sólo se apliquen en la home page. Puro HTML, JavaScript, jQuery y CSS.
Hoja de estilos
Creamos un archivo llamado “Intranet.css” para definir los estilos que sobre-escriban los de SharePoint. Este archivo podemos almacenarlo en la librería “Internal”.
Luego modificamos la página maestra (en SharePoint Server no sería necesario modificar la página maestra), agregando el siguiente código antes del “</head>”:
<SharePoint:CssRegistration name="/sites/TUSITIO/Internal/Intranet.css" After="corev4.css" runat="server"/>
Así queda nuestra nueva librería Internal y la librería de páginas maestras:

Imagen 2 – Librerías Internal y Master Pages

También modificamos la página maestra para agregar el pie de página, siendo esta nuestra última modificación, ubicada luego de SharePoint:DeveloperDashboard:
<div id="intranet_footer">LA EMPRESA - RECURSOS HUMANOS - PROYECTOS - NOTICIAS</div>
Lo importante, teniendo en cuenta uno de los objetivos, es que apenas hicimos dos simples cambios en la página maestra.
Estilos generales
En el siguiente código, se muestran los estilos generales que buscan:

• Crear una cabecera con diseño
• Preservar la ribbon

Este estilo se ubica dentro de Intranet.css:
/* -------------------------------------------------
Ocultamiento de secciones
------------------------------------------------- */
/* Oculto Acciones del Sitio */
.ms-siteactionsmenu { display: none; }
/* Ocultar Icono de navegación hacia arriba */
.s4-breadcrumb-anchor { display: none; }
/* -------------------------------------------------
Ajustes estéticos
------------------------------------------------- */
/* Seteo el color de fondo */
body { background-color: #828282; }
/* Aplico un ancho fijo, no 100% */
#s4-ribbonrow, #s4-workspace
{
max-width: 1100px;
margin: 0 auto;
padding: 0px;
background-color: white;
}
/* -------------------------------------------------
Imagen de cabecera
------------------------------------------------- */
/* Agrando la Ribbon porque la imagen es más alta */
#s4-ribbonrow { padding-top:37px; min-height: 133px !important; }
/* Oculto la fila de título y navegación */
#s4-titlerow { margin-top: -88px; }
/* Subo las solapas de la Ribbon para que no molesten a la imagen, especialmente si hay un logo a la izquierda */
.ms-cui-topBar2 { margin-top: -37px; }
.ms-cui-tabContainer { border-top: #B8BABD 1px solid; background-color: white; padding-top: 20px; }
.ms-cui-tabBody { padding-bottom: 17px; background-image: none; }
/* Elimino el fondo del título y del top navigator */
.s4-title { background: none; }
/* Seteo mi imagen de cabecera en la ribbon row */
#s4-ribbonrow { background-image: url('/sites/TUSITIO/Internal/header.png'); }
/* Saco el fondo de la ribbon que molesta a la imagen */
#s4-ribboncont { background: none !important; }
/* Posiciono en forma fija al top navigation */
.menu-horizontal { position: fixed !important; top: 134px !important; }
/* Subo el menú de usuario */
#RibbonContainer-TabRowRight { margin-top: -10px; }
/* Elimino el borde superior de la ribbon */
.ms-cui-topBar2 { border: 0px; }
/* Ajustes de algunos bordes */
#s4-topheader2 { border-top: 0px !important; background: white !important; }
/* Borde derecho a la izquierda de la scrollbar molesta */
#s4-titlerow { border-right: 0px; }
/* -------------------------------------------------
Estilos en barra superior
------------------------------------------------- */
/* Menú de bienvenida*/
.ms-welcomeMenu A:link {
color: #8F8F8F;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
/* Colores de solapas de la ribbon, tratando de que no sean tan visibles */
.ms-cui-tt-a, .ms-cui-cg-t { color: #B8BABD !important; }
.ms-cui-cg-t, .ms-cui-ct-ul { background: none !important; }
.ms-cui-ct-ul, .ms-cui-cg-i, .ms-cui-cg, .ms-cui-tt-a {border-color: #F4F3F9 !important; }
.ms-cui-cg-i {border-color: transparent !important; }
.ms-cui-cg {border-color: transparent !important; }
/* -------------------------------------------------
Estilos en Top Navigation
------------------------------------------------- */
/* Efecto de margen izquierdo */
.s4-tn .menu-horizontal {
margin-left: 200px;
}
/* Estilo de los links */
.s4-tn .menu-item-text {
color: #FCFCFC;
font-size: 11px;
border-right: #FCFCFC solid 1px;
padding-right: 25px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
/* Estilo del link seleccionado */
.s4-tn .selected {
font-weight: bold;
}
.s4-tn .selected .menu-item {
background: none !important;
border: none !important;
}
/* Estilo del link hover */
.s4-tn .menu-item:hover {
text-decoration: none !important;
}
/* -------------------------------------------------
Footer
------------------------------------------------- */
#intranet_footer {
background-color: #ACACAD;
margin-top: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: white;
text-align: center;
padding: 4px;
clear: both;
border-top: white solid 40px;
}
En la siguiente imagen, puede observarse la forma que adquiere la Ribbon:

Imagen 3 – Ejemplo de ribbon con el diseño gráfico aplicado

Sobre la imagen de cabecera
La imagen de cabecera posee algunas características importantes:

• Ocupa todo el ancho fijo: 1100px
• Debe ser de la altura 170px (si se cambia, hay que ajustar la CSS)
• Posee un sombreado en la parte superior (como parte de la imagen)
• Posee el logo a la izquierda, dejando algo de espacio en blanco para la botonera (solapas) de la ribbon
• La zona de abajo es el fondo de los links de la Top Navigation

La imagen de cabecera ejemplo es:

Imagen 4 – Ejemplo de imagen para la cabecera

La home page
En la home page, trabajamos sobre estos aspectos principales:

• Nombre de usuario
• Efeméride
• Botón de subsitio
• Contenido de la home

Buscamos algo como lo siguiente:

Imagen 5 – Particularidades de la página de inicio

Nombre de usuario
El nombre de usuario se ve a la izquierda con el agregado del “Bienvenido” y “> > >”. Para ello trabajamos con una técnica jQuery que nos permite insertar HTML:

$('#zz15_Menu span').prepend('Bienvenido ');

$('#zz15_Menu span').append(' > > > ');

Efeméride

A la derecha, arriba, agregamos:

• La fecha actual obtenida con JavaScript
• La efeméride obtenida con Cliente Object Model

Para obtener la fecha actual, usamos código javascript.

Para obtener la Efeméride, consultamos los datos de una lista usando Cliente Object Model, tal como lo expliqué en un artículo previo, que pueden encontrar en: http://surpoint.blogspot.com.ar/2011/10/introduccion-al-modelo-de-objetos-de.html

Para insertar la efeméride (ítem extraído de una lista), usamos:

ExecuteOrDelayUntilScriptLoaded(cargar_efemeride, "sp.js");

$('.ms-cui-ribbonTopBars').append($('#efemeride'));

Dentro del código que lee la efeméride (cargar_efemeride), se cargó previamente un div de la siguiente forma:

document.getElementById("efemeride").innerHTML = strHtml;

El div debe existir en Intranet_Home.htm:

<div id="efemeride"></div>

Botón de subsitio

Este es un simple botón que agregamos en nuestro HTML de la siguiente forma:

<table id="subsitio_contenedor">

 <tr>
 <td width="990px"></td>
 <td width="100px">
 <a id="subsitio" href="/sites/blablabla.aspx">Subsitio</a>
 </td>
 </tr>
</table>

Resultado

Imagen 6 – Botón de acceso a un subsitio

El contenido de la home

Siguiendo el enfoque de las efemérides, cargamos todo el contenido de la home. Lo primero que hacemos es crear una tabla para nuestro contenido, con el diseño que más nos guste. Este es un ejemplo:

<table id="super_contenedor">
 <tr>
 <td>
 <table class="cumples-tabla">
 <thead>
 <tr>
 <th>Para compartir</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><div id="cumples"></div></td>
 </tr>
 </tbody>
 </table>
 </td>
 <td><strong>Zona reservada para noticias</strong>: Lorem ipsum ad ... </td>
 </tr>
 <tr>
 <td><strong>Zona reservada para anuncios</strong>: Lorem ipsum ad ... </td>
 <td><strong>Zona reservada para noticias en las sedes</strong>: Lorem ipsum ad his scripta blandit partiendo... </td>
 </tr>
</table>

Ocultamos la zona de webparts de la derecha:

$('#ctl00_MSO_ContentDiv table table td:first').width("100%");

Y luego insertamos con client object model los datos que consultamos desde listas de SharePoint, asociando las clases para aplicar  los estilos que nos proporcionó el diseñador gráfico.

Obtenemos algo como lo siguiente:

Imagen 7 – Ejemplo de información obtenida con Client Object Model

Los estilos de la home

Habrán notado que algunas cosas son distintas en la home, como el ocultamiento de la ribbon o la ubicación del nombre de usuario. Para ello aplicamos estilos propios:

<style>
/* -------------------------------------------------
 Ajustes generales
 ------------------------------------------------- */
/* Ocultar Inicio Rápido */
#s4-leftpanel { display: none; }
.s4-ca { margin-left: 0px; }
/* Ocultar solapas de Ribbon*/
.ms-cui-tts { display: none; }
/* Y el borde de la top navigation */
#s4-topheader2 { border-bottom: 0px !important; }
/* Nombre de usuario a la izquierda */
#RibbonContainer-TabRowRight { float: left; }
/* Efeméride a la derehca */
#efemeride {
 color: #03935F;
 font-weight: bold;
 text-transform: uppercase;
 font-size: 11px;
 font-family: Arial, Helvetica, sans-serif;
 float: right;
 margin-top: -39px;
 margin-right: 10px;
}
/* Fecha actual a la derecha*/
#fecha {
 font-size: 11px;
 font-family: Arial, Helvetica, sans-serif;
 color: #8F8F8F;
 font-weight: normal;
 text-transform: none;
}
/* Botón de llamada a un subsitio */
#subsitio {
 font-size: 18px;
 font-family: Arial, Helvetica, sans-serif;
 color: white;
 background-color: #F9B10F;
 border: solid 4px white;
 border-right: none;
 padding: 5px 10px;
 text-align: center;
}
#subsitio_contenedor {
 position: fixed;
 top: 91px;
}
/* -------------------------------------------------
 Contenedor de partes
 ------------------------------------------------- */
/* Estilo de la Tabla que contiene cada una de las partes (contenido) */
#super_contenedor {
 width: 100%;
}
#super_contenedor td {
 padding: 10px;
 vertical-align: top;
}
/* -------------------------------------------------
 Para compartir (estilos para mostrar cumpleaños)
 ------------------------------------------------- */
.cumples-tabla th {
 background-color: #288BCE;
 color: white;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 font-weight: bold;
}
.cumples-tabla td {
 background-color: #CBE9F6;
}
</style>

Conclusión

En este artículo explicamos un camino para incorporar diseño gráfico a SharePoint. Existen diferentes formas de encarar esta tarea. En este caso buscamos una que no requiera demasiados conocimientos específicos de SharePoint, que no “desarme” funcionalidades como la ribbon, pero que a la vez permita personalizar el diseño haciendo que no se parezca a “SharePoint”.

Hasta la próxima!

Bibliografía

Real World Branding with SharePoint 2010 Publishing Sites
SharePoint Branding 101: Branding Master Pages
SharePoint 2010 branding. A beginners guide
10 Worst Mistakes in SharePoint Branding
SharePoint Ribbon CSS Tips and Tricks
SharePoint 2010 CSS Reference Chart

Juan Pablo Pussacq Laborde
SharePoint MVP
Blog: http://surpoint.blogspot.com/
Facebook: http://facebook.com/surpointblog/
Twitter: http://twitter.com/jpussacq/

Leer más...