Crear una marca en línea propia con una combinación de SharePoint 2013 y las tecnologías web ya conocidas

Artículo original publicado el lunes, 25 de febrero de 2013

Esta entrada es una introducción a lo fácil que es usar el Administrador de diseño junto con las herramientas de diseño con las que se sienta más cómodo para definir la marca en línea de la empresa, todo con el potente sistema de funciones de administración de contenido que supone SharePoint 2013.

Con SharePoint 2013, puede crear una marca para su sitio de publicación de SharePointcon las tecnologías web que ya conoce, las herramientas que le gustan y los dispositivos que quiere, de forma que empezar a diseñar y desarrollar en SharePoint es más fácil que nunca. Si es un profesional actual de SharePoint, no se preocupe. El trabajo que haya invertido en aprender a usar SharePoint hasta ahora sigue siendo aplicable y su conocimiento del modelo Página de publicación de SharePoint sigue siendo útil.

Esta entrada proporciona información general sobre cómo usar fácilmente los Canales de dispositivo y el Administrador de diseño de SharePoint 2013 junto con las herramientas de diseño web con las que se sienta más cómodo para definir la marca en línea de la empresa. Aunque hemos mantenido la misma infraestructura de representación de páginas, hemos hecho tres mejoras de gran escala en la forma de crear una marca para sitios de publicación de SharePoint.

Usar tecnologías web ya conocidas

SharePoint sigue manteniendo sus páginas y diseños de página principales en ASP.NET, pero ahora también puedediseñar sus propios páginas y diseños de página principales en HTML, incluso con fragmentos HTML de controles de SharePoint. En segundo plano, SharePoint crea el archivo ASP.NET correspondiente que quiere pero al que no es necesario prestar atención.

Anteriormente, se podían usar CSS y JavaScript para dar estilo al sitio, pero ahora estos elementos están completamente integrados en la experiencia de desarrollo web de SharePoint. Hemos trabajado mucho en la vista previa HTML para que pueda dar estilo al código HTML directamente en vez de tener que usar el servidor para verlo. Además, si decide obtener una vista previa en el servidor, puede obtenerla en el contexto de una página de SharePoint de su elección.

El trabajo con tecnologías web que conoce no se limita al diseño de página. El elemento web Consulta de contenido que le exigía diseñar en XSLT sigue estando presente, pero el nuevo elemento web de búsqueda de contenido es una pieza de construcción importante en la creación de experiencias gestionadas con búsqueda en SharePoint 2013. Para nosotros fue muy importante asegurarnos de que esto se acompañara de una muy buena experiencia de diseñador, por lo que se puede personalizar con JavaScript, HTML y CSS.

Como no damos por sentado ningún nivel de conocimiento de SharePoint por su parte, incluimos el Administrador de diseño para que le guíe por la creación de marca de su sitio de publicación. Este Administrador de diseño proporciona una experiencia similar a los asistentes y le ofrece indicaciones paralelas sobre desarrollo de SharePoint con puntos de entrada que puede ver y con los que puede trabajar en los archivos de diseño. Cada uno de los pasos va acompañado de su propio artículo de documentación en MSDN:

• Información general
• Gestionar Canales de dispositivo
• Cargar archivos de diseño
• Modificar páginas principales
• Modificar plantillas de presentación
• Modificar diseños de página
• Publicar y aplicar diseño
• Crear paquetes de diseño

Personalizar SharePoint con las herramientas que le gustan

La personalización del diseño del sitio no consiste solo en convertir HTML en ASP.NET. Para ayudarle a crear correctamente su sitio, hay marcadores de posición populares ya preparados para su contenido. En lo que se refiere a los diseños de página, hemos insertado todos los campos de página que son exclusivos para el tipo de contenido que elija. De este modo, la creación de archivos de diseño de SharePoint se convierte en una cuestión de modificar y retocar en vez de crear.

La Galería de fragmentos es un buen punto de partida para agregar funciones de SharePoint al sitio. Aquellos que estén familiarizados con versiones anteriores de SharePoint pueden concebir esto como el conjunto de controles a los que se obtendría acceso desde SharePoint Designer, pero con algo extra. La Galería de fragmentos proporciona una versión HTML (incluida, en muchos casos, una vista previa estática para mostrarle aquello en lo que trabaja mientras modifica el archivo en una interfaz como la vista partida de Dreamweaver) de un conjunto de componentes habituales (incluidos todos los elementos web de la galería de elementos web). En cuanto a cada fragmento, puede retocar sus propiedades y copiarlo en la página o el diseño de página HTML principales y, en segundo plano, SharePoint lo convierte en el control de ASP.NET que necesita.

Figura 1. En la parte superior de la página de la Galería de fragmentos se encuentra una cinta con todos los fragmentos. En el cuerpo de la página se encuentra la descripción, las propiedades y el código HTML del fragmento, además de una vista previa en tiempo real. Cada página principal tiene la misma galería de fragmentos, que se diferencia ligeramente de la galería de diseños de página. Además, la galería de fragmentos de un diseño de página depende del tipo de contenido (porque los campos de página cambian).

Obtener SharePoint en cualquier dispositivo

El público ya no solo entra al sitio web con el ratón desde el ordenador portátil o de escritorio, sino que el mundo contiene múltiples dispositivos: tabletas, teléfonos y Surfaces. ¿Cómo se crea una experiencia para los usuarios que optimice el uso de la pantalla, sea cual sea su tamaño? ¿Y que optimice el uso de dispositivos táctiles? En SharePoint 2013, los Canales de dispositivo le ayudan a presentar el sitio de la forma que mejor se ajuste a cualquier dispositivo desde el que navegue el visitante. Como diseñador, tiene que reflexionar sobre cuál debe ser la experiencia del sitio según todos los diferentes factores de forma, diferenciados por subcadena de agente de usuario asignada hasta a 10 canales diferentes.

Cada canal puede orientarse a varios dispositivos. Por ejemplo, puede disponer de un mismo canal para teléfonos Windows Phone y iPhones, porque el tamaño de la pantalla que tienen es similar, y crear un canal diferente para iPad. Puede utilizar una página principal y una CSS diferentes por canal y también orientar el contenido a canales particulares, todo con la misma URL (muy útil para la facilidad de uso y la optimización de motores de búsqueda).

Si usa la infraestructura del Canal de dispositivo, obtiene la oportunidad de usar Paneles de canal de dispositivo, que es una gran característica para la orientación de contenido. El contenido que coloque dentro de uno de estos paneles solo se representa en los canales que especifique en función de la lógica del lado servidor, de modo que se reduce el tiempo de carga de la página y la cantidad de bytes que se envían por el cable. Al combinar estos paneles con un diseño de CSS receptivo, se obtiene una experiencia de usuario más optimizada. En vez de tener varios canales basados en el tamaño de pantalla como en el ejemplo anterior, podría tener un canal basado en la subcadena "iOS" que se encargue de los dispositivos iPad, iPhone y iPad mini y que envíe una sola página principal que cargue diferentes CSS en función de la resolución de pantalla del dispositivo. Por ejemplo, si formara parte del equipo de Windows Phone, podría orientarse a los dispositivos iOS y crear un panel que anuncie Windows Phone.

Figura 2 y figura 3. Simulaciones de diseño paralelo de las experiencias de explorador y de móvil para un sitio de noticias basado en la característica de publicación de colecciones entre sitios, con CSS receptiva, Paneles de canal de dispositivo y una plantilla de presentación que cambia el aspecto de los resultados del elemento web de búsqueda de contenido en función de los Canales de dispositivo.

Esta entrada se ha concebido como una introducción a cómo se puede definir fácilmente la marca en línea de la empresa con las herramientas con las que más cómodo se sienta y con el potente sistema de administración de contenido de SharePoint 2013. Para más información, eche un vistazo a todo el contenido que nuestros redactores de documentación han escrito pensando en usted en MSDN. Los artículos Creación de sitios para 2013 de SharePoint, sobre información general del Administrador de diseños de SharePoint 2013 y Desarrollar el diseño del sitio de SharePoint 2013 son muy buenos puntos de partida. ¡Le deseamos un buen diseño!

--Alyssa Levitz, administradora de programas de SharePoint

Esta entrada de blog es una traducción. Puede consultar el artículo original en Create your online brand with a combination of SharePoint 2013 and the web technologies you already know