SSD: el síndrome de la Sharepoint dependencia

Sharepoint me proporciona seguridad y me hace sentir más fuerte. Las 10 cosas que más me gustan de Sharepoint.

10 puntos para entender a Project Server 2010

Microsoft Project es quizá la herramienta de gestión de proyectos más conocida y utilizada por los líderes de proyectos...

Diseño Gráfico en SharePoint

Serie de artìculos que nos ayudan a incorporar diseño gráfico en las implementaciones de SharePoint...

Revista CompartiMOSS

Artículos publicados en la revista especializada en SharePoint: CompartiMOSS.

Contacto

Enviame un correo :-)

miércoles, 14 de diciembre de 2011

Un poco de #branding en #SharePoint 2010

En este artículo voy a dar algunos ejemplos sencillos para cambiar el aspecto de nuestro sitio en SharePoint 2010. ¿Tunning? ¿Cirugía estética? Algo así.

La idea es llegar a un sitio como este:

image

Espero que les resulte útil.

1. Esquema de colores

En un primer paso vamos a crear un esquema de colores que se adapte a nuestras necesidades. Para ello utilizamos Power Point 2010. Los pasos a seguir son:

1) Ir a la sección DESIGN

2) Dentro de COLOR abrir el combo y elegir CREATE NEW THEME COLORS

3) Elegir los colores de acuerdo a nuestra necesidades:

image

4) Dentro de FONTS abrir el combo y elegir CREATE NEW THEME FONTS

image

5) Exportar el tema. Dentro de ALL THEMES elegir SAVE CURRENT THEME

6) Agregar el tema a nuestra colección de sitios dentro de THEME GALLERY.

7) Ir a nuestro sitio y seleccionar el nuevo tema creado.

 

2. CSS

En el segundo paso vamos a agregar nuestra hoja de estilos para hacer algunos cambios en el aspecto de nuestro sitio. Existen varios métodos para realizar esto, con o sin programación. En mi caso optaré por agregar una línea de código en la página maestra del sitio utilizando SharePoint Designer.

1) Creamos una nueva hoja de estilos con nuestro editor preferido y subimos el archivo “CSS” a la librería STYLE LIBRARY.

2) Abrimos nuestro sitio en SharePoint Designer. Dentro de la sección MASTER PAGES editamos V4.MASTER. Importante: no confundir, no editar DEFAULT.MASTER. Recuerden que se utiliza en los casos en que estemos migrando sitios desde la versión 2007 de SharePoint únicamente.

En nuestro caso vamos a agregar la siguiente línea de código:

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/SURPOINT.css %>" After="corev4.css" runat="server"/>

Esto puede variar de acuerdo a varios puntos. Les recomiendo leer está entrada de blog para definir la mejor variante para sus proyectos: http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html

Salvamos:

image

Y listo, nuestro sitio ya posee una hoja de estilos adicional. Ahora el próximo paso es empezar a “jugar” con los estilos.

 

3. Jugar con los estilos

Una de las maneras más sencillas para detectar las clases a modificar es utilizar las herramientas para el desarrollador de Internet Explorer. Presionar F12 y utilizar el selector de elementos para detectar estilos aplicados, tal como se ve en la imagen:

image

También pueden utilizar Firebug de Firefox:

image

Una vez que encuentre los estilos, sólo resta empezar a aplicarlos. A continuación les dejo algunos ejemplos de los estilos que he utilizado en este caso. Siempre tengan cuidado al usar estilos porque pueden estar afectando alguna funcionalidad estándar de SharePoint. Y lo que funciona en un sitio podría no funcionar en otro. Eso depende mucho de nuestra parametrización.

Si van a trabajar con la Ribbon, no olviden que tienen que utilizar la “contrabarra”. Más información en: http://surpoint.blogspot.com/2011/12/los-puntos-en-los-ids-de-la-ribbon-de.html.

/***************************************/
/* Ocultamiento de secciones en Ribbon */
/***************************************/

/* Edición de Página */
#Ribbon\.WebPartPage, #Ribbon\.WebPartPage-title {
    display: none;
}

/* Configuración de Lista */
#Ribbon\.List, #Ribbon\.List-title {
    display: none;
}

/* Configuración de Librería */
#Ribbon\.Library, #Ribbon\.Library-title {
    display: none;
}

/******************************/
/* LOOK & FEEL BARRA SUPERIOR */
/******************************/

/* Fondo*/
.s4-title {
    background-image: url("/SurPoint/Style%20Library/PS.png");
    background-repeat: no-repeat;
    background-position-x: 10px;
    background-position-y: 23px;
}

/* Ocultar logo */
.s4-titlelogo {
    display: none;
}

/* Posicionar título */
.s4-titletext {
    position: relative;
    left: 206px;
}

/* Posicionar descripción de la lista */
.ms-listdescription {
    position: relative;
    left: 2px;
    top: 1px;
    font-family: Arial !important ;
    font-size: 7pt !important;
}

/* Ocultar global navigation */
#zz16_TopNavigationMenuV4 {
    display: none
}

/* Ocultar búsqueda */
#s4-searcharea {
    display: none
}

/* Formato y posición del título del sitio */
.s4-title H1 A {
    font-family: Segoe UI Light;
    font-size: 35px;
    color: #547590
}
.s4-title H1 {
    position: relative;
    top: 12px;
}

/* Formato y posición del sub-título del sitio y los separadores*/
.s4-titlesep {
    position: relative;
    top: 3px;
}
.s4-title H2 {
    position: relative;
    top: 5px;
}
.s4-title H2 {
    font-size: 20px;
    font-family: Segoe UI Light;
}

/* Posición de iconos sociales */
.s4-socialdata-notif {
    position: relative;
    top: 15px;
}

/* Quitar línea que separa la global navigation del título del sitio */
body #s4-topheader2 {
    border-top-style: none;
}

/* Ocultar Site Settings*/
.ms-siteactionsmenu {
    display: none;
}

/*****************************/
/* LOOK & FEEL INICIO RAPIDO */
/*****************************/

/* Inicio rápido: fondo */
body #s4-leftpanel-content {
    background-color: #547590;
}

/* Formato de los ítems de primer nivel */
.s4-ql UL.root > LI > .menu-item {
    color: white;
    font-family: Segoe UI Light;
    font-size: 14px;
    font-weight: bold;
}

/* Formato de los ítems de segundo nivel */
.s4-ql UL.root UL > LI > A {
    color: white;
    padding-left: 20px;
    font-family: Segoe UI Light;
    font-size: 12px;
}

/* Ocultar view all site content*/
#ctl00_PlaceHolderLeftNavBar_PlaceHolderQuickLaunchBottom_PlaceHolderQuickLaunchBottomV4_idNavLinkViewAllV4 {
    display: none;
}

/* Formato de papelera */
#ctl00_PlaceHolderLeftNavBar_PlaceHolderQuickLaunchBottom_PlaceHolderQuickLaunchBottomV4_idNavLinkRecycleBin {
    color: white;
    font-family: Segoe UI Light;
    font-size: 12px;
    position: relative;
    top: 7px;
}
 
 
/********************/
/* LOOK & FEEL BODY */
/********************/

/* Derecha */
.ms-WPBorderBorderOnly, .ms-WPBorderBorderOnly .ms-alternating {
    background-color: #F2F0E7;
    border: none !important;
}
.ms-listviewtable .ms-vb2, .ms-listviewtable .ms-vb-user {
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.ms-WPBorderBorderOnly .ms-vh2-nograd, .ms-WPBorderBorderOnly .ms-viewheadertr .ms-vb {
    font-weight: bold;
}

/* Izquierda */
.s4-wpcell .s4-wpTopTable {
    border-top-color: #F2F0E7;
    border-right-color: #F2F0E7;
    border-bottom-color: #F2F0E7;
    border-left-color: #F2F0E7;
}

4. Cuando CSS no alcanza

Por supuesto encontrarán casos en las hojas de estilo y los temas no alcanzan. Aquí es muy común utilizar soluciones de jQuery y JavaScript, pero esto ya escapa al alcance de este artículo.

Hasta la próxima!

martes, 13 de diciembre de 2011

Los puntos en los IDs de la Ribbon de #SharePoint 2010 #CSS

Quizá en algún momento se preguntaron como ocultar controles de las Ribbon de SharePoint 2010 utilizando sólo CSS. Por supuesto que esto es posible y bastante simple, pero hay un pequeño detalle que puede llevar a la confusión: los IDs de la Ribbon contienen puntos.

Por ejemplo:

<span class="ms-cui-ctl-large " id="Ribbon.ListItem.New.NewListItem-Large" aria-describedby="Ribbon.ListItem.New.NewListItem_ToolTip" unselectable="on" mscui:controltype="">

Entonces, el detalle, es que hay que usar la contrabarra antes del punto dentro de la CSS. Por ejemplo

#Ribbon\.ListItem\.New\.NewListItem-Large
{
display:none;
}
Gracias al post de Doug Ware por poner algo de luz sobre este tema. Pueden leerlo en: http://online.appdev.com/edge/blogs/doug_ware/archive/2011/08/02/hiding-a-sharepoint-ribbon-button-with-css.aspx
Hasta la próxima!

jueves, 8 de diciembre de 2011

HTML en una columna dentro de una vista de #SharePoint con #JavaScript o #jQuery

Hace unos días preguntaban en un foro cómo agregar HTML dentro de una columna para generar cierto comportamiento en una vista. Hay varias soluciones y creo que dependen un poco del objetivo que se persiga.

Mi primera recomendación es el método mediante el cual se escribe el código HTML en una columna calculada y luego de hace el render mediante JavaScript o jQuery. Se usó mucho durante un tiempo, creo que por su facilidad de implementación y su potencial. La famosa HTML calculated column. Acá los enlaces:

http://blog.pathtosharepoint.com/2008/09/01/using-calculated-columns-to-write-html/

http://www.pathtosharepoint.com/HTMLcc/default.aspx

https://www.nothingbutsharepoint.com/sites/eusp/Pages/jquery-for-everyone-html-calculated-column-plugin.aspx

Si queremos profundizar un poco más, otras soluciones que no necesitan ser instaladas en el servidor pueden implementarse con jQuery o Client Object  Model. Un script muy básico de jQuery que se puede usar para tomar de base y luego hacerlo todo lo complejo que necesitemos se encuentra en: http://www.sharepointkings.com/2010/04/sharepoint-custom-so-called-kpi.html

Client Object Model es quizá lo más potente. Sólo funciona en SharePoint 2010. Acá les dejo una introducción: http://surpoint.blogspot.com/2011/10/introduccion-al-modelo-de-objetos-de.html

Espero que les sea útil. Pueden ver la discusión en el foro en este enlace: http://social.msdn.microsoft.com/Forums/es-ES/mossdeves/thread/42671890-3f5c-49ee-b432-17282c1e3e5a/ (Html en una custom list)

Hasta la próxima!

lunes, 5 de diciembre de 2011

Aplicaciones de servicio en SharePoint 2010

Tres artículos más que interesantes de tres que saben:

Juan Carlos González
Gustavo Vélez
Fabián Imaz

Les dejo los enlaces:

Qué los disfruten!