COMUNIDAD SHAREPOINT DE COLOMBIA SharePoint Day Bogotá Julio 13 de 2013 Branding para SharePoint 2013
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 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. 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.
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.
Principales características de SP 2013 para diseñadores Canales por Dispositivo.(Device Channels) 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.
Principales características de SP 2013 para diseñadores Mejoras en el manejo de contenido web. Content Search web Part: 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. Listas y Librerías con característica de catálogos: 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. *Listado completo de mejoras technet
Content Search web Part
Listas y Librerías con característica de catálogos
Principales características de SP 2013 para diseñadores 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
Sharepoint Designer ya no es obligatorio.
Principales características de SP 2013 para diseñadores 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 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
Principales características de SP 2013 para diseñadores 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.
Patrocinadores
Q&A
Recuerda Evaluar la sesión Session Name
Gracias