SharePoint 2007 optimizado para dispositivos móviles

Hola muy buenas, me llamo Mario Rivero y soy becario del CIIN. LLevo ya unos meses trabajando sobre todo con SharePoint y su personalización. Este es mi primer post, espero que os guste.


El objetivo de este post es mostrar la manera de realizar dentro de un mismo sitio Web de SharePoint dos formas de visualización: una para PC’s y otra optimizada para dispositivos móviles. Para ello nos vamos a valer de las Variations, una funcionalidad que ofrece Microsoft Office SharePoint Server 2007 para construir sitios multilenguaje.


Los pasos que vamos a seguir van a ser los siguientes:


·         Configurar las variations en MOSS 2007


·         Creación de una master page optimizada para dispositivos móviles


·         Redireccionamiento automático del sitio


·         Reducir el tiempo de descarga de las páginas


Configuración de las Variations en MOSS 2007


·        Activar las Variations


Para poder construir un sitio multilenguaje desde cero hay que activar en MOSS 2007 las Variations, justo después de haber creado un nuevo site. Para ello nos vamos a Site Actions->Site Settings->Modify All Site Settings y en la columna de Site Collection Administration pinchamos en Variations. Nos aparecerá una venta como la siguiente:


 


Figura 1: Página de configuración de las Variations


En el campo Location tenemos que indicar cuál va a ser la raíz del sitio. Esta página raíz va a estar oculta al usuario ya que sólo se van a cargar en el navegador los sitios creados como Variations Labels. Por defecto viene que la raíz sea /. Lo dejamos tal cual.


Marcamos la casilla “Automaticaly create site and page variations”  para que el proceso de creación de las Variations sea automático y le damos a OK.


·        Definir las Variations Labels


A continuación vamos a crear los dos sitios (Uno para plataforma PC y otro para plataforma móvil) con las Variations Labels. Cada Variation Label se corresponde con un sitio. Podemos crear cuantos sitios queramos, pero siempre va haber uno principal del cual se van a replicar todos los demás sitios. Para acceder a las Variations Labels nos vamos a la columna Site Collection Administration y pinchamos en Variation Labels. Para crear una nueva Variation Label hacemos clic sobre New Label apareciéndonos la siguiente ventana:



Figura 2: Página para la creación de Variation Label


 


Ahora vamos a crear el sitio principal del cual se repliquen todos los demás. En esta ventana rellanamos los campos Label Name Y Display Name con el nombre que le queramos dar. Como este va a ser el sitio principal le damos el valor Home .El campo Locale sirve para elegir el idioma del nuevo sitio que se va a crear. En nuestro caso da exactamente igual debido a las modificaciones que haremos posteriormente. Además hay que marcar la casilla “Set this variation to be the source variation” para que este sitio sea la fuente de la jerarquía, o sea, que cada sitio nuevo creado con las variations se replicará de este sitio. En el combo de debajo tenemos que elegir la plantilla de publicación que queremos para el sitio. Cuando están activas las Variations, SharePoint solo nos deja elegir entre “Publishing Site with WorkFlows” y “Publishing Site”. Elegimos ésta última ya que no vamos a hacer uso de los WorkFlows. Le damos a OK.


Con esto ya estamos listos para crear cuantos sitios queramos y con el idioma que queramos, que se replicaran del sitio creado en el paso anterior. En nuestro caso solo necesitamos crear uno, que será el sitio para plataformas de dispositivos móviles. Seguimos los pasos anteriores para crear una nueva Variation Label y nos aparecerá una ventana como la anterior. En esta ventana rellenamos los campos Label Name Y Display Name con el valor Movil y elegimos otro idioma cualesquiera. Damos a OK.


Ya tenemos creados los dos sitios, uno para vista normal y otra para vista móvil. Ahora, cada vez que creemos en nuestro sitio “Home” (que hemos hecho que sea el principal) una página o un sub-sitio, estos se replicarán en el sitio “Movil” (El tiempo de espera para que se replique una página o un sub-sitio es de 1 minuto desde su publicación).


El último paso es crear la estructura necesaria para que funcionen los dos sitios. Para ello, en la ventana de las Variations Labels pinchamos sobre Create Hierachies. Esto hará que se cree una jerarquía entre el sitio raíz definido al principio y los dos nuevos sitios creados.



Figura 3: Página de configuración de las Variation Labels


 


Ya estamos listos para crear contenido en el sitio Home y ver como se replica automáticamente en el sitio Movil.


Nota: Para que todo funcione correctamente hay que añadir la IP de la maquina donde se está ejecutando SharePoint como un acceso alternativo. Esto se hace en la administración central de SharePoint. Hay que ir a Operations y en la sección Global Configuration pinchar sobre Alternate Access Mappings. Dentro de la ventana que nos sale pinchamos sobre Edit Public URLs y en la siguiente ventana rellenamos el campo Internet con la dirección IP de nuestra máquina. Le damos a Save y listo, ya podemos navegar correctamente desde cualquier sitio externo a nuestra máquina.


Creación de una Master Page optimizada para  dispositivos móviles.


Cuando activamos las Variations, SharePoint nos da la opción de cambiar la Master Page de cada sitio, por lo que podemos tener una Master Page diferente para cada sitio creado. En nuestro caso sólo vamos a cambiar la Master Page del sitio “Movil”.


Ahora vamos a crearnos una Master Page adecuada para su visualización en dispositivos móviles. Nosotros empezamos a crearla a partir de una minimal master page que se puede encontrar en http://msdn2.microsoft.com/en-us/library/aa660698.aspx. Si queremos que nuestra Master Page cumpla las normas de accesibilidad de la W3C hay que echarle un vistazo a dos guías publicadas por ellos: CSS Mobile Profile 2.0 y Mobile Web Best Practices 1.0.


 Una vez hecho esto, hay que abrir el sitio con SharePoint Designer y guardar la Master Page creada en la carpeta  _catalogsmasterpage. Con esto estamos guardando la Master Page en la base de datos de la Web Application con lo que una vez publicada estará disponible para los dos sitios creados.


Para cambiar de Master Page en el sitio “Movil” nos dirigimos a Site Actions->Site Settings->Modify All Site Settings y en la columna Look and Feel pinchamos sobre Master page.



 


Figura 4: Página para cambiar la Master Page


 


Elegimos la Master Page creada en al paso anterior y damos a OK.


Llegados a este punto, ya tenemos creado nuestros dos sitios con el mismo contenido y sus respectivas  Master Page.


 


Redireccionamiento automático del Sitio


 


La principal característica de las Variations es que dependiendo del idioma seleccionado en el navegador que usemos se cargará un sitio u otro. Por ejemplo, si el navegador está en español se cargara el sitio “Home” puesto que le habíamos definido el idioma “Spanish”, y si el navegador está en el idioma que seleccionamos para el sitio “Movil” pues se cargará este último.


 


Pero este no es el comportamiento que queremos para nuestro sitio. Lo que queremos es que dependiendo de la plataforma con la que se acceda se cargue un sitio u otro, y además que lo haga de forma automática, sin ningún tipo de intervención por parte del usuario. Si accedemos desde una plataforma Windows, Mac, Linux, etc. se cargará el sitio “Home” y si accedemos desde una plataforma WinCE, Palm OS, BlackBerry, etc. se cargará el sitio “Movil”.


Para conseguir esto tenemos que modificar el comportamiento de las Variations. La primera página que se carga cuando están activas las Variations es VariationRoot.aspx que tiene como plantilla a la página VariationRootPageLayout.aspx que se encuentra en la carpeta _catalogasmasterpages en la base de datos de  la Web Application. El código de esta página es el siguiente:







<%@ Register TagPrefix=”Publishing” TagName=”VariationsRootLanding” src=”~/_controltemplates/VariationsRootLanding.ascx”%>


<Publishing:VariationsRootLanding runat=”server” id=”VariationsRootLanding1″/>


<html xmlns:mso=”urn:schemas-microsoft-com:office:office” xmlns:msdt=”uuid:C2F41010-65B3-11d1-A29F-00AA00C14882″><head>


<META name=”WebPartPageExpansion” content=”full”>


<!–[if gte mso 9]><xml>


<mso:CustomDocumentProperties>


<mso:ContentType msdt:dt=”string”>Page Layout</mso:ContentType>


<mso:PublishingAssociatedContentType msdt:dt=”string”>;#Redirect Page;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900F


D0E870BA06948879DBD5F9813CD8799;#</mso:PublishingAssociatedContentType>


<mso:PublishingHidden msdt:dt=”string”>true</mso:PublishingHidden>


</mso:CustomDocumentProperties>


</xml><![endif]–>


<title>Variations Root Page</title></head>



Como podemos observar en las líneas de color rojo, se está haciendo referencia a un control ASP.Net llamado VariationsRootLanding.ascx. Este control se encuentra en una carpeta del servidor cuya ruta es:







C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATECONTROLTEMPLATES


 


En este control se encuentra todo la lógica necesaria para que el sitio se redireccione automáticamente dependiendo del idioma del navegador. El método que realiza esta tarea es:







private string GetRedirectTargetUrl()


Este método devuelve el valor de una variable llamada matchedUrl que contiene la URL, en formato string, de la página que se tiene que cargar. Por la tanto es aquí donde tenemos que meter el código para cambiar el comportamiento del componente y conseguir que al cargar la URL de nuestro sitio en el navegador, se redireccione automáticamente dependiendo de la plataforma en la que estemos trabajando. Para ello nos vamos a valer de una ServerVarible llamada HTTP_USER_AGENT que contiene información sobre el tipo de navegador, el tipo de plataforma, etc. El código a introducir en el método GetRedirectTargetUrl (justo al final del método, sustituyendo a la línea return (string.IsNullOrEmpty(matchedUrl) ? sourceLabelUrl : matchedUrl);) para detectar la plataforma es el siguiente:







string UserAgent;


UserAgent = Request.ServerVariables[“HTTP_USER_AGENT”];


if (UserAgent.Contains(“Palm”) || UserAgent.Contains(“CE”) || UserAgent.Contains(“BlackBerry”))


                {


                               matchedUrl=”<URL  del sitio Movil>”;


                }


                else       


                {


                               matchedUrl=”<URL  del sitio Home>”;


                }


                return matchedUrl;


Si queremos añadir más plataformas de dispositivos móviles, tan solo tenemos que añadir el nombre de la plataforma como un “or” en la sentencia if.


Reducir el tiempo de descarga de las páginas


Siguiendo los pasos anteriores, tenemos un sitio realizado en SharePoint que  se redirecciona automáticamente a un sitio optimizado para móviles  cuando se accede desde un dispositivo móvil. Pero ahora nos enfrentamos a un problema, las páginas realizadas con SharePoint suelen ser bastante pesadas debido a la descarga de un script llamado Core.js, lo que hace que la navegación por las páginas en dispositivos móviles, con un ancho de banda reducido, sea muy lenta. 


Este script se encarga entre otras cosas de la autentificación de los usuarios para que aparezca el menú Site Actions, por lo que no lo podemos quitar de cualquier manera. Hay un método para optimizar las descargas de las páginas que consiste en descargar al cliente el script Core.js después de que se halla visualizado la página, mientras  se está navegando por ella. Esto solo ocurre para los usuarios anónimos. Para los usuarios autentificados el script Core.js se descarga de manera normal.


Antes de empezar a explicar este método hay tres requerimientos que se deben cumplir para poder aplicarle correctamente:


·         Hay que asegurarse de que la Site Master Page es diferente a la System Master Page. Esto se puede comprobar en Site Actions->Site Settings->Modify All Site Settings y en la columna Look and Feel pinchamos sobre Master Page.


·         Hay que asegurarse de que la Site Master Page elegida no contenga ningún control que requiera el script Core.js que sea visible por un usuario anónimo.


·         Hay que asegurarse de que la Site Master Page elegida no contenga ningún control ScrptLink referenciando al Core.js.


 Los pasos a seguir son los siguientes:


1.      Hay que crear una DLL, a la cual llamaremos PerfTools.dll con el siguiente código:







using System;


using System.Collections.Generic;


using System.ComponentModel;


using System.Text;


using System.Web;


using System.Web.UI;


using System.Web.UI.WebControls;


using Microsoft.SharePoint;


 


namespace WebControls


{


    [DefaultProperty(“Text”)]


    [ToolboxData(“<{0}:RegisterCoreWhenAuthenticatedControl runat=server></{0}:RegisterCoreWhenAuthenticatedControl>”)]


    public class RegisterCoreWhenAuthenticatedControl : WebControl


    {


        protected override void OnInit(EventArgs e)


        {


            if (HttpContext.Current.Request.IsAuthenticated)


            {


                Microsoft.SharePoint.WebControls.ScriptLink.RegisterCore(this.Page, true);


            }


            base.OnInit(e);


        }


    }


}


Esta DLL hay que añadirla en la GAC del servidor. Es importante no olvidarse de firmarla, ya que si no lo hacemos no podremos añadirla a la GAC.


2.      Modificar el archivo web.config de la Web Application con el siguiente código:







<SafeControls>


<SafeControl Assembly=”PerfTools, Version=1.0.0.0, Culture=neutral, PublicKeyToken=3ec1cbf2475be08c” Namespace=”WebControls” TypeName=”*” Safe=”True” />


</SafeControls>


Asegurarse de poner el PublicKeyToken correcto.


3.      Crear una nueva página aspx llamada CorePreLoad.aspx con el siguiente código:







<%@ Register Tagprefix=”SharePoint” Namespace=”Microsoft.SharePoint.WebControls” Assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>


<html>


<head>


<title>Pre-Load Core.js</title>


</head>


<body>


<SharePoint:ScriptLink name=”core.js” runat=”server” />


 


<script language=”javascript”>


 DisableRefreshOnFocus();


</script>


 


</body>


</html>


Guardar la página en el directorio _layouts del servidor.


 


 


4.      Ahora hay que modificar todas las Page Layouts del directorio _catalogsmasterpage, incluida la PageLayoutTemplate.aspx. De este modo todas las Page Layouts que se creen nuevas vendrán ya con el código que vamos a insertar dentro del tag con ID PlaceHolderAdittionalPageHead (Si no existe habrá que crearlo):







<SharePointWebControls:ScriptLink runat=”server”/>


<PerfTools:RegisterCoreWhenAuthenticatedControl runat=”server”/>


Además habrá que registrar la DLL creada en el paso 1:







<%@ Register TagPrefix=”PerfTools” Namespace=”WebControls” Assembly=”PerfTools, Version=1.0.0.0, Culture=neutral, PublicKeyToken=3ec1cbf2475be08c ” %>


Y por último, al final del código hay que insertar el siguiente control:







<asp:Content ContentPlaceholderID=”PlaceHolderBottomIFrame” runat=”server”>


<iframe src=”http://<Nombre de la máquina>/_layouts/CorePreLoad.aspx” style=”display:none”/>


</asp:Content>


5.      En todas las Master Page de nuestro sitio hay que poner el siguiente PlaceHolder entre los tags </form> y </body>:







</form>


    <asp:ContentPlaceHolder id=”PlaceHolderBottomIFrame” runat=”server” />


  </body>


6.      El último paso es publicar todas las páginas que hayan sido modificadas.


 


 


Con este método se consigue reducir aproximadamente un 50 % el tamaño de la página a descargar, lo cual es una buena optimización. De esta forma la navegación por las páginas del sitio será mucho más fluida. 


 


Bibliografía


·         Más sobre el archivo VariationRootLanding.ascx:


http://msdn2.microsoft.com/en-us/library/ms562040.aspx


 


·         El método del Core.js explicado en inglés:


http://blogs.msdn.com/ecm/archive/2007/02/21/building-a-new-page-layout-which-does-not-reference-core-js-but-downloads-it-while-the-page-is-being-viewed-thereby-optimizing-response-time.aspx


 

14 comentarios en “SharePoint 2007 optimizado para dispositivos móviles”

  1. Hey Mario …
    q buen paso a paso, me trae recuerdos de las 1ras configuraciones que haciamos para Mobile en las Betas de Moss.

    Me parece perfecto que alguien se acuerde de nombrar que MOSS esta preparado para publicar contenidos en Mobile, porque mucha gente no lo sabe y por desconocimiento no lo aplica !!!

    Felicitaciones again 😀

    Saludos

  2. Mario, muy interesantes los artículos que estais últimamente escribiendo.

    El Lunes si Dios quiere, creo que nos veremos por allí otra vez, así que aprovecharé para saludaros. 🙂

  3. Gracias a los tres por los comentarios, la semana que viene seguramente publique otro post relacionado también con SharePoint y los dispositivos móviles. Además estoy ahora trabajando con el tema de la accesibilidad en SharePoint y si saco algo en claro del asunto(MOSS2007 y la accesibilidad no se llevan muy bien) puede que también publique un post.
    Saludos

  4. No logro que me aparezca las opciones mencionadoas de “Variations” en

    “Site Actions->Site Settings->Modify All Site Settings y en la columna de Site Collection Administration pinchamos en Variations”

    Como se activan? Hay que configurar alguna cosa en Administracion Central?el Que?

    Gracias

  5. Hola Xevi, ¿te aparece la columna Site Collection Administration?. Si no te aparece puede ser q no tengas permisos para ver estas opciones, o no estes en la raiz del sitio.

    Saludos

  6. Si que me aparece, con estas opciones :

    Administración de sitios

    Configuración regional
    Bibliotecas y listas del sitio
    Informes de uso del sitio
    Alertas de usuario
    RSS
    Visibilidad de la búsqueda
    Áreas de trabajo y sitios
    Características del sitio
    Eliminar este sitio
    Configuración de ámbito de vínculos relacionados
    Caché de resultados de sitio
    Contenido y estructura

  7. No, esa no es la columna donde se encuentra las Variations. Estas se encuntran en la columna “Administración de la colección de sitios” q esta a la derecha de la columna “Administracion de sitios”. Si no te sale, seguramente sea debido a q no tienes los permisos necesarios.

    Saludos

  8. GRACIAS!!! Es así, con e lusuario Administrador si que aparece esta nueva columna “Administración de la colección de sitios ” con dichas opciones. Disculpen mi error.

    Y gracias de nuevo

  9. Pues no, esto no funciona con WSS debido a que no tiene implementado las variations.En WSS tienes disponible una vista movil(también en MOSS) que te muestra las listas y librerias de tu sitio. Con solo poner /m detrás del nombre de tu servidor, accedes a ésta vista móvil. Si lo que quieres es personalizar ésta vista hechale un vistazo a http://geeks.ms/blogs/ciin/archive/2007/06/08/personalizaci-243-n-de-las-plantillas-para-la-vista-m-243-vil-en-sharepoint.aspx

    Saludos

Deja un comentario

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