Herramienta para dimensionar SharePoint 2010

Les dejo esta interesante herramienta que les puede resultar útil para dimensionar SharePoint 2010:

http://h71019.www7.hp.com/activeanswers/Secure/548230-0-0-225-121.html

Se llama HP Sizer for Microsoft SharePoint. 

Leer más...

Relaciones de Maestro Detalle en SharePoint 2007 con jQuery (simple y efectivo)

Introducción

Un requerimiento que siempre surge en SharePoint tiene que ver con manejar relaciones de maestro-detalle. He visto y utilizado diferentes formas, con ventajas y desventajas que siempre dependen del escenario en que nos encontremos. En este artículo vamos a mostrar un ejemplo para WSS 3.0 que utiliza programación del lado del cliente.

Funcionalidades que necesitamos

En esta lista detallo lo que necesitamos. A lo largo del artículo veremos cómo implementaremos cada caso:

· ¿Cómo vincular en las listas al padre y al hijo?

· ¿Cómo mostrar los hijos de un padre?

· ¿Cómo tener un botón que dispare la creación un hijo para el padre seleccionado?

· ¿Cómo crear un hijo sin tener que completar manualmente los datos del padre?

· ¿Cómo ocultar los datos del padre en el momento de editar el hijo?

¿Cómo vincular en las listas el padre y al hijo?

Para vincular, yo prefiero usar el campo ID del padre como referencia en el hijo. No creo que ese campo necesite ser de tipo “búsqueda”, con lo cual, simplemente creamos en el hijo un campo con estas características:

· Nombre = Padre (o lo que se adapte mejor a nuestro caso)

· Tipo = Texto

· Obligatorio

¿Cómo mostrar los hijos de un padre?

Una forma sencilla para evitar programación es usar las conexiones entre elementos web. Con lo cual, simplemente creamos una página de elementos web en donde:

· Agregamos en la parte superior una lista del padre

· Agregamos en la parte inferior la lista con los hijos

· Conectamos los dos elementos web, vinculando el ID del elemento web de arriba con el Padre del elemento web de abajo.

¿Cómo tener un botón que dispare la creación un hijo para el padre seleccionado?

Para disparar la creación de un hijo, vamos a agregar un botón llamado “Nuevo” en cada fila de la lista padre. Este botón puede ser simplemente un enlace. En principio existen al menos tres enfoques para agregar este botón:

· Mediante un flujo de trabajo

· Mediante un manejador de eventos

· Mediante código JavaScript

En este caso vamos a trabajar con código JavaScript. ¿Por qué? Porque las dos primeras opciones son asincrónicas y puede generar la necesidad de que el usuario tenga que actualizar la pantalla luego del alta del padre, para poder ver el botón “Nuevo”. Esto es difícil de explicar al usuario final.

Nuestro enfoque consistirá en:

· Un elemento web de edición de contenido (CEWP) que ejecute código Java Script que reemplace la columna ID por el nuevo botón.

· Para ello trabajaremos con jQuery

· El contenido de la CEWP lo almacenaremos en un archivo en una librería, para facilitar futuros cambios: maestro_dedalle_boton_nuevo.html

A continuación vemos el código necesario.

 

<script type="text/javascript">

// Agregar esta CEWP debajo de la vista de la lista Padre

// Parámetros importantes

// Posición en que se encuentra la columna ID

var posicion_id = 3;

// Nombre de la lista hija

var lista_hija = "Registros SP";

// Texto para el botón o imagen

var texto_boton = "<img style='border: none;' src='/_layouts/images/itann.gif'/ title='Agregar registro' >";

// Estilo del botón nuevo

var estilo_boton = "";

// Título columna

var titulo_columna = "Agregar";

// Fin de Parámetros importantes

// Id de ítem

var identificador;

// URL del sitio

var sitio= window.location.href;

var origen = encodeURIComponent(sitio);

var posicion_listas = sitio.indexOf("Lists/");

sitio = sitio.substring(0, posicion_listas);

// URL de nuevo elemento en el hijo

var nuevo_hijo = sitio + "Lists/" + lista_hija + "/NewForm.aspx?source=" + origen + "&padre=";

// Cambiar Título de columna

$(".ms-listviewtable > tbody > tr > th #diidSortID").text(titulo_columna);

// Cambiar columna

// Asumo que la lista usa la vista standar que posee la clase .ms-listviewtable

$(".ms-listviewtable > tbody > tr > td:nth-child("+posicion_id+")").each(function( index ) {

// Obtengo el ID del elemento

identificador = $( this ).text();

// Cambio el ID por el botón nuevo

$( this ).html("<a style='" + estilo_boton + "' href='" + nuevo_hijo + identificador + "'>" + texto_boton + "</a>") ;

});

</script>

En la imagen, podemos ver cómo se ve la lista antes y cómo se ve luego:

¿Cómo crear un hijo sin tener que completar manualmente los datos del padre?

Dentro de la pantalla NewForm vamos a realizar lo siguiente:

· Completar el valor del campo Padre

· Ocultar el campo Padre (la fila completa)

A continuación el código necesario:

<script type="text/javascript">

// Agregar esta CEWP en la parte de abajo de la pantalla NewForm.aspx

// Para que se abra el editor, utilizar ?toolpaneview=2

// Parámetros importantes

// Nombre del campo Padre

var campo_padre = "ID.";

// Fin de Parámetros importantes

// Completamos el valor del campo Padre

var valor_padre = url_param("padre");

$('input[title="' + campo_padre + '"]').attr("value",valor_padre);

$('input[title="' + campo_padre + '"]').parent().parent().parent().css("display","none");

// Función para leer un valor de parámetro de URL

function url_param ( name ){

name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

var regexS = "[\\?&]"+name+"=([^&#]*)";

var regex = new RegExp( regexS );

var results = regex.exec( window.location.href );

if( results == null )

return "";

else

return results[1];

}

</script>

¿Cómo ocultar los datos del padre en el momento de editar el hijo?

Esto aplica tanto a la pantalla de edición, como a la pantalla de display. A continuación el código requerido:

Para la pantalla DispForm:

<script type="text/javascript">

// Agregar esta CEWP en la parte de abajo de la pantalla DispForm.aspx

// Para que se abra el editor, utilizar ?toolpaneview=2

// Parámetros importantes

// Nombre del campo Padre

var campo_padre = "ID_x002e_";

// Fin de Parámetros importantes

// Ocultar la fila

$('a[name="SPBookmark_' + campo_padre + '"]').parent().parent().parent().css("display","none");

</script>

 

Para la pantalla EditForm:

<script type="text/javascript">

// Agregar esta CEWP en la parte de abajo de la pantalla EditForm.aspx

// Para que se abra el editor, utilizar ?toolpaneview=2

// Parámetros importantes

// Nombre del campo Padre

var campo_padre = "ID.";

// Fin de Parámetros importantes

// Ocultar la fila

$('input[title="' + campo_padre + '"]').parent().parent().parent().css("display","none");

</script>

Conclusión

Hemos visto un método bastante simple y efectivo para crear relaciones de maestro detalle en SharePoint 2007. No requiere programación del lado del servidor y soporta cambios futuros a las listas al no requerir la programación de pantallas a medida.

Espero les resulte útil. Hasta la próxima.

Leer más...

La plantilla que ha elegido no es válida o no se encuentra

En el momento de intentar crear un sitio a partir de una plantilla obtenemos el siguiente error:

En inglés: The template you have chosen is invalid or cannot be found

Luego, analizando los logs, se observa un poco más de detalle:

• Failed to mark site-scoped features active in site …
• Failed to apply template "Template v_15.stp" to web at URL …
• La plantilla que ha elegido no es válida o no se encuentra.

Una posible causa a este problema es que el sitio esté tratando de hacer uso de una característica inexistente. Esto puede darse cuando la plantilla se creó en un ambiente y luego se intenta crear el sitio en otro ambiente.

Utilizando el programa STP inspector, se puede analizar la plantilla y detectar que características generan el problema.

• Enlace de descarga: http://stpinspector.codeplex.com/releases/view/38429
• Enlace de librería adicional: http://stpinspector.codeplex.com/releases/view/18552

Un vez que detectan las características problemáticas pueden buscar un poco más de información. En mi caso busqué en este enlace: http://blogs.msdn.com/b/ketaanhs/archive/2009/06/29/sharepoint-2007-wss-3-0-feature-list-with-guid.aspx y detecté a través de los nombres, que se trataban de características del paquete de las 40 aplicaciones fabulosas de SharePoint. Con lo cual, en este caso puntual, el problema se resolvió instalando:

• El core de estas aplicaciones: http://www.microsoft.com/en-us/download/details.aspx?id=5958
• Y la plantilla en particular: http://www.microsoft.com/es-es/download/details.aspx?id=4579

Si esto no soluciona el problema, pueden modificar el STP en forma manual, tal como se explica en este artículo: http://sharepointbox.blogspot.com.ar/2010/05/template-you-have-chosen-is-invalid-or.html (esta última solución no la he probado)

Espero les resulte útil, hasta la próxima!

Leer más...

Trucos para vincular dos listas en SharePoint Designer

Les dejo un par de trucos para vistas sobre orígenes combinados de listas en SharePoint Designer. Si nunca armaron una de estas vistas, en este enlace pueden encontrar un paso a paso de cómo crearlas:

http://www.codeproject.com/Articles/194252/How-to-Link-Two-Lists-and-Create-a-Combined-Ciew-i

Truco 1: vincular dos listas a través de un campo de búsqueda

La forma más sencilla de hacerlo, sin meterse en XLST, es agregar el ID del elemento padre como columna a mostrar en el campo de búsqueda (nueva funcionalidad en SP 2010) y armar el join con ese campo. Este muy bien explicado en este enlace:

http://deannaschneider.wordpress.com/2011/11/11/joined-subviews-with-linked-datasources-in-sharepoint-2010/

Truco 2: vincular tareas creadas por un flujo de trabajo

¿Qué pasa si queremos mostrar las tareas asociadas a un ítem de lista creadas por un flujo de trabajo? En este caso se utiliza el campo WorkflowLink. ¿Pero cómo hacemos para desarmar este campo y que sólo me muestre el ID de la tarea? Con un poco de XLST, muy bien explicado en este artículo:

http://deannaschneider.wordpress.com/2012/07/25/joining-the-task-list-with-related-content-in-a-dvwp/

Espero les haya resultado útil. Hasta la próxima!

Leer más...

MVP SharePoint Server 2013

Por tercer año consecutivo recibo el premio MVP por parte de Microsoft, por mis aportes a la comunidad en relación a SharePoint, unas de mis tecnologías favoritas. Realmente me pone muy feliz y lo agradezco. No hay mucho más qué decir, tan sólo animar a los futuros MVPs en trabajar en recibir este premio, es un camino difícil, pero posible. Vale la pena.

Nos estamos viendo :-)

Más información en: mvp.microsoft.com

Leer más...

Problemas con campos de búsqueda en un flujo de trabajo

Los campos de búsqueda en SharePoint a veces traen algunos problemas. ¿Por qué? Porque utilizan distintos componentes HTML (Input o Select) según si tienen más o menos de 20 elementos. Pero hay un pequeño detalle adicional. Esto sólo sucede en Internet Explorer, el comportamiento es distinto en Chrome o FireFox.

Un detalle como preguntarse por la condición vacía dentro de un flujo de trabajo para un campo de búsqueda, debe contemplar esto, comparando por vacío o por 0;#

Les dejo una imagen para clarificar:

Leer más...

No llega el mail de las notificaciones en la lista de tareas

Supongamos el escenario en que tenemos una lista de Tareas con la opción de enviar una notificación a la persona a la que se le asigna la tarea. Este correo no está funcionando, no llega a destino. Sin embargo otros correos, como los envíados por un flujo de trabajo, sí llegan. Una posible solución, que me ha funcionado es: configurar "No" en estas notificaciones, salvar, luego configurar "Si" y volver a salvar. Espero que les sea útil!

Leer más...

¿Cómo editar en hoja de datos en SharePoint 2010 si no tengo instalado Office?

En caso que requieran editar en "hoja de datos" los ítems de una lista en SharePoint 2010 y no posean instalado Office, recibirán un error.

Una solución sencilla es instalar los "2007 Office System Driver: Data Connectivity Components" que pueden descargar desde: http://www.microsoft.com/en-us/download/details.aspx?id=23734

Fuentes:

• http://amatterofdegree.typepad.com/a_matter_of_degree/2010/11/fix-for-datasheet-view-issue-error-in-sharepoint-2010.html
• http://community.bamboosolutions.com/blogs/sharepoint_blank/archive/2011/05/26/the-list-cannot-be-displayed-in-datasheet-view-message-when-attempting-to-edit-in-datasheet-in-sharepoint-2010.aspx

Leer más...

Error inesperado al agregar un usuario en SharePoint

En el momento de agregar un usuario en SharePoint 2010, seguimos estos pasos:

1. Ir a la sección de permisos: /_layouts/user.aspx
2. Usar la opción "Conceder permisos"
3. Abrir la libreta de direcciones vía "examinar"
4. Buscar un usuario y agregarlo.

En el momento de presionar "Aceptar", aparece un "Error desconocido".

En el log podemos ver la siguiente información la siguiente información:

System.InvalidOperationException: Namespace prefix 'xsd' is not defined.    at System.Xml.Serialization.XmlSerializationReader.ToXmlQualifiedName(String value, Boolean decodeName)     at Microsoft.Xml.Serialization.GeneratedAssembly.XmlSerializationReaderDictionaryEntryArray.Read1_Object(Boolean isNullable, Boolean checkType)     at Microsoft.Xml.Serialization.GeneratedAssembly.XmlSerializationReaderDictionaryEntryArray.Read2_DictionaryEntry(Boolean checkType)     at Microsoft.Xml.Serialization.GeneratedAssembly.XmlSerializationReaderDictionaryEntryArray.Read3_ArrayOfDictionaryEntry() c4460fbb-9ea1-4ac0-a344-cacc0c9d9456

Se trata de un problema de incompatibilidad entre SharePoint y las versiones 9 y 10 de Internet Explrorer. Las 2 soluciones:

1. Usar F12 y pasar a IE8 (temporal)
2. Modificar una página maestra según indico a continuación:

La página a modificar es "pickerdialog.master".
Se encuentra ubicada en "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS"
Agregar la siguiente línea de código (la resaltada en rojo) dentro del <head>

<head>
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />

Fuente de la solución: http://saiabhilash.blogspot.com.ar/2012/12/people-picker-to-add-users-to.html

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...