Para aquellos que alguna vez se han enfrentado a la construcción de un sitio de publicación, sabrán lo complicado que es hacer algo “vistoso”, y habrá escuchado de su cliente, en más de una ocasión, la frase: “que soso queda, le falta algo”.

Y que demonios!! levan razón! hacer algo vistoso, no es algo que Sharepoint lleve “out of the box», así que requiere de bastante conocimiento y horas de desarrollo. Afortunadamente, jQuery ha facilitado la tarea, permitiendo que la inserción de “efectos visuales”, sea más sencilla.

Antes de seguir, y por aquello de poner el caramelo en la boca, aquí tenéis una lista de los mejores sites hechos con Sharepoint del 2009:

http://www.topsharepoint.com/top-rated-sharepoint-sites-for-2009

En este post, vamos a ver cómo podemos insertar un efecto jQuery, dentro de Sharepoint. En concreto vamos a usar el “image slide menu”, que podéis ver funcionando en: http://jquerystyle.com/2009/05/07/image-menu-with-jquery

Y lo vamos a complicar un poco, para que las imágenes a mostrar, las saque de una biblioteca de imágenes de Sharepoint, de esta forma, las imágenes pueden cambiarse de forma fácil, sin entrar en código.

Llamada asíncrona al web service de Listas de Sharepoint

Antes de nada, vamos a recuperar el listado de imágenes que queremos incluir en el efecto, y para ello, haremos una llamada asíncrona al web service de Sharepoint, que maneja Listas:

http://Nombre_servidor/sitio/_vti_bin/lists.asmx

Para ello, lo más sencillo, es añadir una nueva página .aspx dentro de una biblioteca de documentos, desde Sharepoint Designer. Editamos el código fuente y añadimos, dentro del ContentPlaceHolder “PlaceHolderAdditionalPageHead”:

1) Los scripts jQuery necesarios.

2) La llamada, se hace usando la función Ajax, de jQuery:

El parámetro “data”, corresponde al xml del SOAP envelope, que le indica, el método del webservice que debe invocar, y los parámetros que le pasa. Si lo que queremos es obtener los elementos de una lista, el soap de entrada, sería:

El parámetro “complete”, indica la función que se ejecutará de retorno de la llamada asíncrona.

Procesando resultado de la llamada asíncrona

Una vez finalizada la llamada asíncrona al web service, procesamos el mensaje SOAP devuelto.

[TIP]: Como truquillo, tanto para sacar el mensaje SOAP de llamada a una función del webservice (SOAP request), como para ver el resultado de esa función (SOAP response), os recomiendo que os creéis un sencillo cliente con Visual Studio (una app de consola, por ejemplo), agreguéis la referencia al web service que queréis usar, y utilicéis el proxy que te genera el VS para invocar al web method que queráis, (así tendréis el intellisense y el tipado de datos). A esto, le añadimos el uso del Fiddler, que nos sacará las tripas de la llamada al web service, y su resultado. Fijaros en la imagen:

A mano derecha, aparecen todas las llamadas que se han hecho al servidor en la petición (varias imágenes, hojas de estilos, etc). Una de esas llamadas es las del webservice (lists.asmx). Si la seleccionamos, en la zona superior izquierda, podemos ver la información de la petición. Si ponemos la vista de XML, podemos ver el SOAP request, y si hacemos lo mismo en la zona inferior, veremos la respuesta del servidor. Si ponemos la vista “TextView”, podemos copiar y pegar el SOAP, para luego meterlo dentro de nuestra página de Sharepoint.

Una vez tenemos claro, cuál es el mensaje de respuesta a nuestra llamada, se trata de parsear con jQuery, el XML resultante.

Antes de eso, vamos a meter un DIV en nuestra página, que será el contenedor del HTML que compondremos desde jQuery. Lo insertamos dentro dentro del ContentPlaceHolder “PlaceHolderMain”:

Ahora ya podemos inyectar el HTML. Para ello

1. Recorremos todos los nodos del XML, que corresponden a los items de la lista (las imágenes que queremos mostrar).
2. Sacamos la URL de la imagen
3. Montamos los elementos <li> necesarios, con los estilos necesario, para que los scripts de jQuery, hagan el efecto visual.

El código sería algo como:

Añadiendo efectos visuales con jQuery

Hasta ahora, lo único que hemos hecho es montar el HTML del efecto, con los estilos necesarios, y sacando las imágenes de forma dinámica. Ahora nos falta añadir el jQuery necesario para los efectos de “slide” de las imágenes.

Para ello, utilizamos el siguiente código, dentro de la misma función retorno de la llamada asíncrona (justo después del código anterior):

El resultado final !!

Y así queda el efecto, dentro de nuestra página de Sharepoint:

y si editamos la lista de imágenes y añadimos una nueva, automáticamente nos aparece en el menú:

Algunas consideraciones y posibles mejoras

• Este ejemplo está adaptado a las imágenes utilizadas. Si quieres usar otro tamaño de imágenes, tendrás que jugar con los estilos de la CSS y el jQuery, para adaptarlo.
• A pesar que el ejemplo está hecho para cargar las imágenes de una biblioteca, hay que aclarar que no tiene mucho sentido colocar muchas imágenes, ya que no cabrán en el div principal “.jimgMenu”. Digamos que este efecto está pensado para el típico “menú destacado” que aparece en la parte superior de la Home (por debajo de la cabecera).
• En el ejemplo no lo hemos hecho, pero se podría mejorar, si el link al que redirige la imagen, se toma de una columna de la lista.

Nada más, espero que os sea de utilidad. Ya me contareis.

Saludos!!!

Hace unos años, recuerdo un anuncio del Atlético de Madrid, en el que un niño, le preguntaba a su padre:, «Papá, ¿Por qué somos del Atleti?» (sin entrar en batallas futboleras, por aquel entonces, el Atleti estaba, al menos deportivamente, peor que ahora). Ante tal pregunta, el padre lanzaba la mirada al horizonte y ponía cara de «menuda preguntita hijo!!, la madre que te…, y yo que sé hijo…»

http://www.youtube.com/watch?v=8CWQEcs5R7g

Pues bien, la verdad es que hace algún tiempo, que tengo la misma sensación que ese niño, pero llevada al mundo TIC… ¿Por qué soy un geek?…

Después de todo este tiempo en el mundillo, sigo poniendo la misma cara que el padre del anuncio. Me pregunto:

• Por qué me despierto mientras la ciudad duerme… o más bien, por qué me acuesto a las tantas, probando una versión beta, con demasiados errores todavía, y que es posible que no vaya a poder usar en mi día a día, hasta dentro de varios meses/años…

• Por qué compro libros de Scott Hanselman, y más bien ninguno de Dan Brown…

• Por qué mi canal favorito de TV es el Channel 9 de MSDN, y no me sé el nombre de ningún «personaje» de Gran Hermano 21 (o la edición que sea)

• Por qué cuando voy a algún evento de tecnología y hablo con los ponentes, me siento como un niño pequeño que ve pasar a Messi…

Cuantos porqués… Y sigo sin tener una respuesta muy clara… si me ponen una pistola en la cabeza, creo que la frase que mejor contestaría, sería una expresión popular (he estado apunto de escribir: «regular» :)), que dice: «sarna con gusto, no pica»… y es que, cuando algo, de verdad te apasiona, te gusta, te divierte, te llena… no le ves inconvenientes, o no te importa.

A mi me encanta mi trabajo, es casi un hobbie más, y sé que es duro en ocasiones, pero me gusta. A veces, echo la vista atrás y recuerdo algunos proyectos “infernales”, con horas en exceso, con retos técnicos que parecían no tener solución, con collejas que caían por todos los lados, a modo de “meteoros de pegaso», pero que finalmente, la cosa acababa bien (o medio bien). Y esa sensación de superación, de haberlo conseguido, sólo porque quería conseguirlo… no tiene precio.

Sé que todo lo que hago, me hace mejor profesional y sé que es el camino hacia el éxito. Hace algunas semanas leí 2 artículos muy buenos relacionados con esto mismo:

• http://emocionantic.wordpress.com/2010/01/21/%c2%bfestas-a-la-ultima-o-eres-el-ultimo/
• http://geeks.ms/blogs/jalarcon/archive/2010/01/17/una-reflexi-243-n-para-jefes-responsables-directores-y-tambi-233-n-para-profesionales-tic.aspx

Y es que yo no quiero quedarme de brazos cruzados maldiciendo mi mala suerte, preguntándome porque mi compañero gana más que yo o culpando a mi empresa porque no me forma. Yo sé que seré lo que quiera ser, y quiero ser cada día mejor profesional (y sí, también ganar más dinero, eso será una consecuencia de lo primero). Y también tengo claro que quiero gente a mi alrededor que comparta esa misma pasión. Si tengo que estar en la oficina a las 2h de la mañana, quiero estar con gente que sea capaz de seguir sonriendo y consiga que valga la pena estar ahí a pesar de las circunstancias. Tengo 3 compañeros que ayer hicieron eso mismo, y esta mañana seguían haciendo bromas. Así da gusto !!

Si no me estás entendiendo, si crees que estoy loco, quizá deberías plantearte si estás en el lugar adecuado. Si todavía no has abierto el VS2010, es porque no has querido hacerlo, así que en breve dejarás de ser competitivo (ah, olvidé decirte que esto es la jungla, si no te adaptas, te extingues, y cambiar esto último es mucho más difícil). Pero tranquilo, hay miles de sitios donde podrás funcionar a tu estilo, que es igual de válido que el mío, eso sin lugar a dudas.

En fin, espero haber despertado alguna conciencia de aquellos que se preocupan más de protestar, que de actuar. Quizá ahora alguno se pregunte:

«y yo, ¿por qué no soy un geek?…