SharePoint Day Bogotá Julio 13 de 2013

Branding para SharePoint 2013

COMUNIDAD SHAREPOINT DE COLOMBIA

Lucas

Sanjuan

Feoli

Twitter:

@lucasdavidsf

Email:

lucas@lucassanjuan.com

Branding SharePoint 2010 vs 2013

Escenario Sharepoint 2010 Sharepoint 2013

Branding (Creación de

look and feel

personalizado)

Requiere conocimiento significativo en

SharePoint para diseñar, personalizar e

interactuar con la interfaz de usuario

nativa de SharePoint.

Sitios de publicación, Sitios TEAM,

instancias de Project server, entre otras

Las nuevas características de los Sitios de

publicación minimizan la cantidad de

conocimiento en SharePoint requerido para

diseñar e integrar con éxito el diseño gráfico a

un sitio.

Diseñadores web profesionales que conocen

HTML, CSS y JavaScript, ya cuentan con las

habilidades Necesarias para diseñar un Sitio de

SharePoint 2013- y pueden usar sus

herramientas preferidas para crear sitios como

por ejemplo Dreamweaver.

Principales características de SP 2013 para diseñadores

Navegación administrable La navegación tiene 2 opciones diferentes: la manera Antigua conocida como Navegación Estructurada y la nueva

la cual es conocida como Navegación Administrable

Cabe anotar que configurar branding y estilos a este tipo de navegación costara más trabajo si se quiere una

navegación muy estilizada.

• Usa términos de metada data administrable para alimentar el control de navegación con ítems.

• Crear URL´s amigables

• El link para editar cerca de los paneles de navegación.

• Evita tener que navegar fuera de la pagina hacia el site settings.

Navegaciones, administrable vs estructurada.

Principales características de SP 2013 para diseñadores

Diseños Compuestos SP 2013 ya trae diseños compuestos,estos se configuran y cargan en una Galería designada para ello,(Site Settings

> Composed looks) estos contienen varios elementos.

Nombre: El nombre del Diseño.

Página Maestra: Para organizar los elementos de la página y determinar la master page.

Localización del tema: Apunta a un archivo XML que definie los colores que se quieren aplicar.

Localización de Imagen: Apunta a una imagen la cual se usara como Background Image en el css.

Esquema de Fuentes: Apunta a un archivo XML el cual define los tipos de letras que se pueden aplicar al css.

El objetivo aquí es organizar estos elementos de manera que se pueda ofrecer al cliente y al usuario “Diseños

compuestos” los cuales pueda elegir y configurar a su gusto.

Para seleccionar los “Diseños compuestos” ingrese a Settings > Change the look.

Ejemplo de un diseño compuesto.

Canales por Dispositivo.(Device Channels)

Principales características de SP 2013 para diseñadores

• Al crear un canal de dispositivo se le nombra un ALIAS y Reglas de inclusión de Dispositivo

• Reglas de inclusión de dispositivo identifica nombre del browser, dispositivo y sistema operativo.

• Crear paginas maestras exclusivas por dispositivo, por ejemplo una para iphone y otra para Androids.

• Usar el ALIAS en la pagina maestra y diseños de pagina para ciertos elementos se visualicen de diferentes

maneras según el dispositivo

• Similar a los Media Querys que encontramos en CSS3, pero los CPD no validan capacidades del dispositivo si no

palabras claves en el USER AGENT

Canales por dispositivo.

Mejoras en el manejo de contenido web.

Content Search web Part:

Principales características de SP 2013 para diseñadores

Listas y Librerías con característica de catálogos:

• Este nuevo webpart reemplaza al anterior web part Content Query.

• Usa la funcionalidad de busqueda de SP 2013 para solicitar y filtrar información alrededor de Sharepoint

• Este puede ser modificado gráficamente con HTML y JavaScript en vez de modificar el archivo XSLT.

*Listado completo de mejoras technet

• Crear catálogos de productos y usar este catálogo para crear un website de productos más robusto

• No se necesita crear pagina para cada ítem.

• Crear categorías de productos, sub categoría y detalles de producto con una administración centralizada.

Content Search web Part

Listas y Librerías con característica de catálogos

Sharepoint Designer… ya no es obligatorio.

• En Sharepoint 2013 ya no es restrictivo usar el SP Designer para editar las páginas de Sharepoint.

• Permite usar Dreamweaver, Notepadd++, Aptana, cualquier editor de HTML.

• La galería de Paginas Maestras fue actualizada para funcionar sobre mapeo WebDAV (Web Distributed

Authoring and Versioning),se puede mapear como una unidad remota de Windows

• Permite almacenar todos los archivos de diseño incluyendo CSS e imágenes.

• Crear paginas maestras desde archivos HTML.

• Al convertir el archivo HTML dentro de la misma carpeta y auto genera el archivo .Master

Principales características de SP 2013 para diseñadores

Sharepoint Designer… ya no es obligatorio.

Administrador de Diseños.

Una de las características más notorias que encontramos en SP2013, inclusive fue agregada como un ítem

del menú principal dentro de site actions. Además de algunos de los ítems nombrados anteriormente

encontramos algunas nuevas funcionalidades

Principales características de SP 2013 para diseñadores

Crear y editar Paginas Maestras:

• Permite crear páginas maestras básicas (Minimal)

• Subir diseños HTML con sus respectivos CSS e imágenes a la galería de Paginas Maestras y con esta

característica convertirla en una página maestra funcional.

• Genera un HTML por cada archivo .master

• Se edita el HTML (en cualquier editor) y estos cambios se reflejan en la Pagina Maestra.

• Agregar Snipets, (Códigos reutilizables), que se generan y configuran con el mismo SharePoint.

Administrador de diseños

Snippets

Crear y editar diseños de página:

Al Crear un diseño de página se genera un archivo HTML que contiene poco diseño pero todos los campos

que trae el content type en el cual nos basamos. Al igual que las master page, al editar el HTML se actualiza

él .ASPX correspondiente.

Crear un paquete de diseño:

Exportar todo el paquete de diseño a otra aplicación web, y se aplica simplemente importándolo desde site

Actions. Archivos .wsp

Cualquiera puede hacer branding?

SI y NO; SI por medio del Administrador de Diseños para hacer sitios con branding light, NO ya que para

hacer un sitio completamente diseñado aún se necesita entender mucho CSS nativo de SharePoint, códigos

de placeholders y muchas cosas específicas de la tecnología de sharepoint.

Principales características de SP 2013 para diseñadores

Patrocinadores

Q&A

Recuerda Evaluar

la sesión Session Name

Gracias