iT Synergy Blogs

Growing Innovation - Soluciones a problemas reales

  • Facebook
  • Instagram
  • LinkedIn
  • Phone
  • Twitter
  • YouTube

Copyright © 2025 · iT Synergy·

SharePoint 2013 – Crear una Master Page a partir de un HTML
SharePoint 2013 – Crear una Master Page a partir de un HTML avatar

August 5, 2013 By Jesús Javier Hernández López Leave a Comment

SharePoint 2013 ofrece muchas nuevas características que no se encontraban presentes en la versión SharePoint 2010, una de las más importantes y la que nos corresponde en este caso es poder crear una master page personalizada a partir de una plantilla html. De esta forma se genera el archivo .master al cual estamos acostumbrados y el archivo html que se utiliza para el diseño del mismo, esto facilita mucho la personalización de la master page.

Dicho lo anterior, el objetivo de este blog es mostrar de forma general como crear una master page personalizada a partir de una plantilla html anteriormente creada.

Paso 1: Tener la plantilla html creada:

El primer paso para crear la master page personalizada es tener el html template del cual se va a partir anteriormente creado, se recomienda tener los estilos css en un archivo aparte para no generar conflictos, de igual formas los archivos de javascript.

Paso 2: Subir los archivos de la plantilla html:

El paso a seguir es subir los archivos html al servidor en la Galeria SharePoint Master Page, para subir los archivos voy a utilizar SharePoint Designer 2013, a continuación se crea la carpeta donde se subirán los archivos de la plantilla para la master, como forma de ejemplo cree la carpeta llamada TestMaster.clip_image004

En la carpeta que crean deben subir todos los archivos (html, imágenes, css, scripts, etc.)

Paso 3: Crear la master page a partir del html:

En este punto se va a convertir la plantilla html en la master page, para eso hay que entrar al sitio desde el navegador web y loguearse como administrador, luego entrar a las opciones y hacer clic sobre Desing Manager.

El paso siguiente es hacer clic sobre la cuarta opción, Edit Master Pages y luego sobre el enlace que aparece a la derecha Convert an HTML file to a SharePoint master page.

 

Luego se abre una ventana emergente donde se debe seleccionar el archivo html de la plantilla de la cual se va a crear la master page.

 

Una vez seleccionada la plantilla, se debe esperar a que se convierta y si todo sale bien, se puede visualizar de la siguiente forma, aquí también se encuentras las master por defecto que vienen con SharePoint 2013, Oslo y Seattle.

 

Ahora si se hace clic sobre el nombre de la nueva master page creada se puede visualizar el preview de como quedo luego de la conversión:

 

Aquí se puede apreciar que si la conversión fue correcta visualmente no hubo ningún cambio, esto representa una gran ventaja a diferencia de la versión de SharePoint 2010 donde el proceso era muy complejo para alguien sin experiencia.

Si entra nuevamente a la carpeta de la master en SharePoint Designer puede apreciar que ahora además del archivo html esta creado el archivo .master.

 

Paso 4: Los Snippets

En este punto la master ya está creada pero solo a nivel de diseño, aún falta acoplar los elementos de SharePoint, es decir debemos indicarle a SharePoint donde va el logo, el editor de contenido, el menú superior, o cualquier otro elemento.

Para esto SharePoint 2013 ofrece una herramienta muy práctica y fácil de comprender llamada Snippets, para acceder a esta hay que dar clic sobre la parte superior derecha de la master que se acaba de crear al enlace que dice Snippets.

 

En las opciones de Snippets se ofrecen un amplio grupo de herramientas que se pueden utilizar para personalizar el sitio y hacerlo dinámico, por ejemplo si entra a Vertical Navigation ya que desea ubicar el menú vertical que ofrece SharePoint en su nueva master debe configurar los parámetros que se encuentran a la derecha de la interfaz y presionar el botón Update. Esto actualiza el preview que se muestra en la parte izquierda de la interfaz y de igual forma actualiza el código del Snippet para que sea ingresado a la nueva master.

 

Si desea agregar un Snippet a la master debe copiar el código del mismo que se encuentra en el cuadro de texto HTML Snippet, o presionando sobre el botón Copy to Clipboard que está debajo del cuadro de texto.

 

Luego hay que descargar o si lo prefiere puede editar desde el mismo SharePoint Designer el archivo .html generado, es recomendado hacer y almacenar una copia del mismo antes de editarlo para tener una copia de respaldo en caso de que algo falle.

 

Se debe pegar el código copiado del Snippet en el archivo .html, el archivo .master no se debe tocar, ya que todo lo referente al diseño del sitio tiene que ver solo con el archivo .html, lo cual facilita mucho cambiar la apariencia del mismo.

 

Una vez pegado el código se deben guardar los cambios y actualizar la vista de la master, se debe tener en cuenta de que es un proceso de prueba y error debido a que la ubicación puede que no sea la deseada o los estilos no quedan como se querría, para esto toca jugar un poco con los estilos css del sitio y buscar el resultado, deseado.

A grandes rasgos estos son los pasos para crear una master page personalizada, si tienen alguna duda al respecto pueden escribir a mi correo electrónico jesus.hernandez@itsynergy.co, y espero que les sea de ayuda esta guía.

Filed Under: SharePoint 2013 Tagged With: Content Editor, Master Page, SharePoint 2013

SharePoint 2013 – Tipos de Plantillas
SharePoint 2013 – Tipos de Plantillas avatar

August 5, 2013 By Jesús Javier Hernández López Leave a Comment

Al instalar SharePoint 2013 en la pantalla inicial se tiene la opción de elegir el tipo de plantilla que se desea utilizar para el sitio, al principio es un poco confuso si no se está familiarizado con las opciones a elegir, ya que hay una amplia variedad de plantillas, el objetivo de este blog es hacer una breve introducción sobre cada uno de las plantillas que se tienen a disposición.

Plantillas de Collaborate Site Template

· Team Site: Es la opción más frecuente la cual está orientada a los grupos de trabajo ya que provee opciones para crear y compartir información y documentos, además se puede personalizar para cada usuario.clip_image002

· Blog: Este tipo de plantilla está orientada a la creación de contenido de opinión y de información desde una perspectiva personal, la cual se puede compartir y puede estar soportada por un usuario o un grupo de usuarios.

· Developer Site: Está orientado a la creación de Apps para Office, las aplicaciones se pueden probar y publicar.clip_image006

· Project Site: Esta plantilla está enfocada en la administración y la colaboración de contenido de los proyectos, se puede cargar información y documentos referentes al proyecto y ver el estado de los mimos.

· Community Site: Plantilla enfocada a comunidades, donde se puede crear y compartir información y crear discusiones en las que los miembros de la comunidad pueden participar.

Plantillas de Enterprise Site Template

· Document Center: Este tipo de plantillas para el sitio está enfocada en administrar documentos para las empresas.

· eDiscovery Center: Esta plantilla se especializa para administrar sitios dedicados a la investigación en general, se permite crear, buscar y exportar el contenido:

· Records Center: Este sitio se especializa en almacenar y buscar documentos importantes los cuales necesitan estar almacenados por largo tiempo.

· Business Intelligence Center: Este tipo de sitios está enfocado a la inteligencia de negocio, permite tener información de bases de datos, reportes, dashboards, etc.clip_image017

· Enterprise Search Center: Este sitio es principalmente un buscador de contenido empresarial, donde los usuarios pueden tener acceso a diferente tipo de información de la empresa, de empleados, de videos o de conversaciones.

· My Site Host: Este tipo de plantilla permite crear páginas de perfiles públicos para los empleados de la empresa.clip_image021

· Community Portal: Este tipo de sitios está enfocado para la administración de contenido de comunidades empresariales:

 

· Basic Search Center: Este sitio contiene un buscador empresarial básico dedicado a la búsqueda de información.

 

· Visio Process Repository: Sitio dedicado a administrar y compartir diagramas de procesos de Microsoft Visio.

 

Plantillas de Publishing Site Template

· Publishing Portal: Este tipo de sitios está dedicado a la creación de sitios parecidos a páginas de internet, también se usa para la creación de portales de intranet para las empresas.

 

· Enterprise Wiki: Esta plantilla permite crear sitios para compartir conocimientos enfocados en el entorno empresarial, se basa en páginas estilo wiki como Wikipedia.

 

· Product Catalog: Este tipo de sitios está enfocado en administrar catálogo de contenido para las empresas.

 

Estos son los sitios que ofrece SharePoint 2013 al instalarlo, además está la opción de crear master pages personalizadas si ninguno de estos sitios suple las necesidades que tiene, si tienen alguna duda al respecto pueden escribir a mi correo electrónico jesus.hernandez@itsynergy.co, y espero que les sea de ayuda esta guía.

Filed Under: SharePoint 2013 Tagged With: Content Editor, Master Page, SharePoint 2013

SharePoint 2013 – Ubicación del Content Editor al crear una Custom Master Page
SharePoint 2013 – Ubicación del Content Editor al crear una Custom Master Page avatar

August 5, 2013 By Jesús Javier Hernández López Leave a Comment

Al crear una master page a partir de un archivo html se genera una página en base a la plantilla web pero SharePoint no sabe dónde ubicar el Editor de Contenido ya que no puede saber en qué parte de la página el usuario desea tenerlo.

Para solucionar esto SharePoint genera el script del Editor de Contenido al final del código de la plantilla .html, este código se encuentra antes de cerrar la etiqueta <body> contenido en un div que se puede identificar como <div data-name=”ContentPlaceHolderMain”>, el código del Editor de Contenido image

Lo que hay que hacer es cortar ese código y pegarlo donde quiere que este el Editor de Contenido, es recomendable que antes de modificar los archivo de la master se realice una copia de los mismos para tenerlos como respaldo.

Es posible que al mover el Editor de Contenido de lugar no queden los estilos como es deseado, para esto toca jugar un poco con los estilos css propios de la master y cuadrarlos según sean sus necesidades de diseño.

Si tienen alguna duda al respecto pueden escribir a mi correo electrónico jesus.hernandez@itsynergy.co, y espero que les sea de ayuda esta guía.

Filed Under: SharePoint 2013 Tagged With: Content Editor, Master Page, SharePoint 2013

  • 1
  • 2
  • Next Page »

Team


Marco
Antonio Hernández

Jaime
Alonso Páez

Luis
Carlos Bernal

Ana
María Orozco

Juan
Camilo Zapata

Carlos
Alberto Rueda

Sonia
Elizabeth Soriano

Diana
Díaz Grijalba

Bernardo
Enrique Cardales

Alexandra
Bravo Restrepo

Juan
Alberto Vélez

Diana
Paola Padilla

Jhon
Jairo Rodriguez

Yully
Arias Castillo

Carlos
Andrés Vélez

Brayan
Ruiz

Jesús
Javier Hernández

Alejandro
Garcia Forero

Gustavo
Adolfo Echeverry

Josué
Leonardo Bohórquez

Oscar
Alberto Urrea

Odahir
Rolando Salcedo

Jimmy
Quejada Meneses

Natalia
Zartha Suárez

Mario
Andrés Cortés

Eric
Yovanny Martinez

Carolina
Torres Rodríguez

Juan
Mauricio García

Tag Cloud

.NET (9) 940px (1) Analysis Services mdx (1) An attempt was made to load a program with an incorrect format. (1) ASP.NET MVC (1) Azure (3) Backup (1) BAM (7) BAM API (1) BAMTraceException (2) BI (3) BizTalk (24) Business Intelligence (6) C# (2) caracteristicas de publicacion (2) Content Editor (3) ESB (15) ESB Toolkit (3) General (4) habilitar caracteristicas (3) indexes (2) Integration Services (2) Master Page (3) MDX (2) MSE (11) net.tcp (2) Office 365 (2) Oracle (2) Performance Point (2) Public Website (2) Receive Location (2) SDK (2) Servicio Web (2) Sharepoint 2010 (2) SharePoint 2013 (4) SharePoint Online (2) SOA (8) Soap Fault (2) Sort Months MDX (2) SQL Server (2) Visual (2) Visual Studio 2010 (2) WCF (19) Windows (3) Windows 8 (17)

Categories

  • .NET (33)
  • Analysis Services (1)
  • ASP.NET MVC (2)
  • Azure (7)
  • BAM (9)
  • BAM PrimaryImport (3)
  • BigData (1)
  • BizTalk (77)
  • BizTalk 2010 configurations (57)
  • BizTalk Application (60)
  • BizTalk Services (13)
  • Business Intelligence (4)
  • Cloud (3)
  • CMD (1)
  • CodeSmith – NetTiers (2)
  • CommandPrompt (1)
  • CRM OptionSet mapping component (1)
  • Desarrollo de software (6)
  • develop (6)
  • developers (3)
  • DropBox (1)
  • Dynamics (1)
  • Enterprise Architect (1)
  • Entity Framework (1)
  • Errores BizTalk (2)
  • ESB (27)
  • ETL (1)
  • Event Viewer (1)
  • Excel Services (1)
  • Foreach loop container (1)
  • General (4)
  • Gerencia de Proyectos (2)
  • Google (1)
  • Grouped Slices (1)
  • Human Talent (1)
  • IIS (4)
  • Integración (6)
  • Integration Services (3)
  • KingswaySoft (1)
  • Lync (1)
  • MSE (13)
  • Office 365 (2)
  • Oracle Data Adapter (2)
  • Performance Point (4)
  • Picklist (1)
  • Pivot Table (1)
  • Procesos (1)
  • Pruebas (1)
  • Public Website (2)
  • Reports (1)
  • SCRUM (1)
  • SDK (2)
  • SEO (1)
  • Servicios (2)
  • Sharepoint (9)
  • SharePoint 2010 (10)
  • SharePoint 2013 (4)
  • SharePoint Online (2)
  • SharpBox (1)
  • Shortcuts (1)
  • Sin categoría (1)
  • SOA (50)
  • SQL (5)
  • SQL Server (3)
  • SQL Server Management Studio (1)
  • SSIS (3)
  • SSL (1)
  • SSO (1)
  • Tracking Profile Editor (2)
  • Twitter (1)
  • Uncategorized (1)
  • Virtual Network (2)
  • Visual Studio 11 (1)
  • Visual Studio 2010 (2)
  • Visual Studio Online (1)
  • VMware (2)
  • WCF (24)
  • Web (1)
  • Web Api (1)
  • Windows (5)
  • Windows 8 (11)
  • Windows Azure (2)
  • Windows Live Write (1)
  • Windows Phone (7)
  • Windows Phone 8 (1)
  • Windows Scheduler (1)
  • windows8 (2)
  • WindowsRT (3)
  • WP7 SDK (1)

Manage

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org