Añadir marcas de empresa a páginas de inicio de sesión y panel de acceso

1. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
LABORATORIO MICROSOFT
AÑADIR MARCAS DE EMPRESA A PÁGINAS DE INICIO
DE SESIÓN Y PANEL DE ACCESO
OFFICE 365
Muchas empresas quieren aplicar un aspecto y diseño coherentes en todos los sitios web y servicios
que administran para que sus usuarios finales no se confundan cuando necesiten usar dichos sitios.
Azure Active Directory ofrece esta funcionalidad permitiéndole personalizar el aspecto de las
siguientes páginas web de usuario final para que incluyan el logotipo y combinaciones de colores de
su empresa:
 Página de inicio de sesión: esta página es a la que se redirecciona a los usuarios cuando
inician sesión en Office 365 o en otras aplicaciones basadas en web y modernas que utilizan
Azure AD como proveedor de identidades. La mayoría de usuarios interactuará con esta
página tanto si es para pasar a través de Home Realm Discovery, que permite al sistema
redireccionar a los usuarios federados a sus STS locales (como AD FS) o para introducir sus
credenciales.
 Página del panel de acceso: el panel de acceso es un portal basado en web que permite a
un usuario final con una cuenta educativa en el directorio de Azure AD ver e iniciar
aplicaciones basadas en la nube a las que le ha concedido acceso el administrador de Azure
AD. Al panel de acceso pueden acceder todos los usuarios de su organización a través de la
página myapps.microsoft.com.

2. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
Personalización de la página de inicio de sesión
La página de inicio de sesión es habitualmente la página web utilizada con más frecuencia por los
usuarios finales que necesitan acceso basado en explorador a las aplicaciones y servicios en nube a
las que se suscribe su organización, por lo que asegurarse de que tiene un buen aspecto resulta
primordial. Si desea utilizar la experiencia de página de inicio de sesión sin marca predeterminada,
no es necesario que lleve a cabo ninguna acción.
¿Cuánto tiempo tardan los cambios de marca en visualizarse en la página de inicio de sesión?
Los usuarios pueden tardar hasta una hora en ver cambios nuevos efectuados en la marca de la
página de inicio de sesión.
¿Cuándo verán los usuarios una página de inicio de sesión de marca?
El usuario verá una página de inicio de sesión de marca cuando visite un servicio con una URL
específica de inquilino como https://outlook.com/contoso.com, o https://mail.contoso.com (si ha
creado un CNAME).
Si visitan un servicio con URL específicas no pertenecientes a inquilinos (como
https://mail.office365.com) visualizarán una página de inicio sin marca. La página de inicio de sesión
se actualizará para mostrar su marca en cuanto los usuarios hayan introducido su ID de usuario o
hayan seleccionado un mosaico de usuario.
Nota
 Su nombre de dominio deberá aparecer como “Active” en la sección Active Directory >
Directorio > Dominios del Portal de administración de Azure en el que ha configurado la
marca.
 La marca de la página de inicio de sesión no dirige a la página de inicio de sesión del cliente
de Microsoft. Esto significa que es posible que los usuarios que inician sesión con una
cuenta Microsoft personal (denominada previamente Windows Live ID) visualicen una lista
con marca de los mosaicos de los usuarios presentada por Azure AD, pero la marca de su
organización no se aplicará a la página de inicio de sesión de la cuenta Microsoft.
¿Qué visualizarán mis usuarios finales una vez haya personalizado la página de inicio de sesión?
Si desea mostrar la marca, los colores y otros Elementos personalizables de su empresa en esta
página, vea las imágenes de la tabla siguiente para comprender la diferencia entre las dos
experiencias.

3. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
Antes de la personalización (utilizando el
servicio Office 365 como ejemplo)
Después de la personalización

4. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
¿Qué elementos de la página puedo personalizar?
Puede personalizar los siguientes elementos de la página de inicio de sesión:
Nota
Todos los elementos son opcionales. Por ejemplo, si especifica un logotipo de banner pero no una
ilustración grande, la página de inicio de sesión mostrará su logotipo y la ilustración para el sitio de
destino (por ejemplo, la imagen de la autopista de Office 365 California).
También puede localizar todos los elementos de esta página. En cuanto haya configurado un
conjunto “predeterminado” de elementos de personalización, podrá configurar versiones
adicionales para diferentes configuraciones regionales. También puede mezclar y hacer coincidir
varios elementos. Por ejemplo, puede:
 Cree una ilustración grande “predeterminada” que funcione para todas las culturas y, a
continuación, cree versiones específicas para inglés y francés. Los usuarios que dispongan
de exploradores ajustados en uno de estos dos idiomas verán la imagen específica, mientras
que el resto verán la predeterminada
 Configure logotipos diferentes para su organización (por ejemplo, para las versiones en
japonés o en hebreo).

5. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
Cómo aparecerá la ilustración una vez modificado el tamaño del navegador?
Durante el redimensionamiento de la ventana del explorador, la ilustración grande, al igual que la
mostrada anteriormente, se recortará casi siempre para acomodar diferentes relaciones de aspecto
de la pantalla. Teniendo esto presente, deberá intentar mantener los elementos visuales clave en la
ilustración para que se muestren siempre en la esquina superior izquierda (superior derecha en los
idiomas de escritura de derecha a izquierda). Esto resulta importante debido a que el
redimensionamiento normalmente se produce desde la esquina inferior derecha hacia la superior
izquierda o desde la parte inferior a la superior.
En la siguiente tabla se muestra el modo en que se recortará la ilustración, en función de la
ubicación del redimensionamiento.
Cuando el explorador se
redimensiona hacia...
Experiencia tras efectuar el recorte
Izquierda

6. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
Arriba
Personalización de la página del panel de acceso
La página del panel de acceso es en esencia una página de portal para todos los usuarios finales que
necesitan disponer de acceso rápido a través de ventanas de aplicaciones en los que se puede hacer
clic a las distintas aplicaciones de nube a las que les ha concedido acceso. Si desea utilizar la
experiencia de página de panel de acceso sin marca predeterminada, no es necesario que lleve a
cabo ninguna acción.

7. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
¿Qué visualizarán mis usuarios finales una vez haya personalizado la página del panel de acceso?
Los administradores pueden personalizar el panel de acceso sustituyendo el logotipo personalizado
de la esquina superior izquierda por el logotipo de banner profesional que deseen, tal y como se
muestra en la ilustración siguiente. Este mismo logotipo se mostrará en las páginas de inicio de
sesión y del panel de acceso.
Configure su directorio con marcas de empresa
Es posible configurar un conjunto predeterminado de Elementos personalizables por directorio en
el Portal de administración de Azure. Una vez guardados los ajustes predeterminados, el
administrador también dispondrá de la opción de agregar versiones localizadas de cada elemento
para diferentes idiomas o configuraciones regionales. Todos los elementos personalizables son
opcionales.
Por ejemplo, si configura un logotipo de banner predeterminado pero no una ilustración grande, la
página de inicio de sesión mostrará su logotipo en la esquina superior derecha; no obstante, se
visualizará la ilustración predeterminada del sitio. Si configura un logotipo de banner
predeterminado y Texto de la página de inicio de sesión en inglés y configura el texto de la página
de inicio de sesión específico para alemán, los usuarios que hayan seleccionado la preferencia de
idioma de alemán podrán ver su logotipo de banner predeterminado, pero el texto en alemán. A
pesar de que técnicamente podría configurar un conjunto diferente para cada idioma admitido por
Azure AD, es recomendable que el número de variantes se mantenga reducido por motivos de
mantenimiento y rendimiento.
Para agregar marcas de empresa a su directorio
Utilice los pasos siguientes para agregar un logotipo u otros elementos a su directorio.
1. Inicie sesión en el Portal de administración de Azure como administrador del directorio
que desea personalizar.
2. Seleccione el directorio que desea personalizar.
3. Seleccione la pestaña Configurar y, a continuación, seleccione Personalizar la información
de marca.
4. Modifique los elementos que desea personalizar. Tenga en cuenta que todos los campos
son opcionales
5. Haga clic en el botón Guardar.

8. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
Nota
Los usuarios pueden tardar hasta una hora en ver cambios nuevos efectuados en la
marca de la página de inicio de sesión.
Para agregar marcas de empresa específicas de un idioma a su directorio
Utilice los pasos siguientes para agregar un logotipo específico para un idioma u otros elementos a
su directorio.
1. En el Portal de administración de Azure, en la pestaña Configurar, seleccione Personalizar
la información de marca.
2. Seleccione Agregar marca para un idioma específico, seleccione el idioma para el que desea
personalizar el logotipo y, a continuación, haga clic en Siguiente.
3. Edite únicamente los elementos para los que desea configurar invalidaciones específicas de
idioma. Tenga en cuenta que todos los campos son opcionales. Si se deja un campo en
blanco, se visualizará el valor predeterminado personalizado en su lugar (o el valor
predeterminado de Microsoft si no hay configurado un valor predeterminado
personalizado).
4. Haga clic en el botón Guardar.
Para eliminar marcas de empresa de su directorio
Utilice los pasos siguientes para eliminar todos los logotipos de la compañía y/o demás elementos
de su directorio.
1. En el Portal de administración de Azure, en la pestaña Configurar, haga clic en el botón
Personalizar la información de marca.
2. En la página Personalizar la información de marca, seleccione la opción Editar configuración
de marca existente y, a continuación, diríjase a la siguiente página.
3. En función de los elementos que desee eliminar, lleve a cabo una o más de las acciones
siguientes:
1. Para el logotipo del banner, haga clic en la casilla para Eliminar el logotipo cargado.
2. Para el logotipo del mosaico, haga clic en la casilla para Eliminar el logotipo
cargado.
3. Para la etiqueta del nombre de usuario de la página de inicio de sesión, borre todo
el texto.
4. Para el texto de la página de inicio de sesión, borre todo el texto.

9. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
5. Para la ilustración de la página de inicio de sesión, haga clic en la casilla para
Eliminar la ilustración.
6. Para el color de fondo de la página de inicio de sesión, borre todo el texto.
4. Haga clic en el botón Guardar para eliminar los elementos.
5. Si es necesario, haga clic en el botón Personalizar la información de marca de nuevo y repita
estos pasos para todas las marcas específicas de los idiomas que necesite eliminar.
Se ha eliminado toda la configuración de las marcas al hacer clic en el botón Personalizar la
información de marca, y se visualiza el formulario de Personalizar la información de marca
predeterminada sin ajustes existentes configurados.
Elementos personalizables
Algunos elementos personalizables en Azure AD disponen de múltiples casos de uso. Los logotipos
de las empresas se pueden configurar una vez por directorio y se utilizan en las páginas de inicio de
sesión y del panel de acceso, en las que, al igual que algunos elementos personalizables, son
específicas de la página de inicio de sesión únicamente. En la tabla siguiente se proporcionan
detalles para los diferentes elementos personalizables:
Nombre Descripción Restricciones Recomendaciones
Logotipo
del banner
El logotipo del banner
se visualiza en la
página de inicio de
sesión y en el panel de
acceso.
 JPG o PNG
 60x280
píxeles
 10 KB
 Utilice el logotipo completo de
su organización (incluido el
pictograma y el logotipo)
 No permita que ocupe más de
30 píxeles de altura para evitar
la introducción de barras de
desplazamiento en los
dispositivos móviles
 No permita que ocupe más de
4 KB
 Utilice un PNG transparente
(no presuponga que la página
de inicio de sesión va a tener
siempre un fondo blanco)
Logotipo
del mosaico
(Actualmente no se
utiliza en la página de
inicio de sesión). En el
futuro, este texto
 JPG o PNG  Simplifique el texto (no se
admitirá texto pequeño), ya

10. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
podrá utilizarse para
reemplazar el
pictograma genérico
de “cuenta profesional
o educativa” en
diferentes lugares de la
experiencia.
 120x120
píxeles
 10 KB
que es posible que se cambie el
tamaño de esta imagen al 50%
Etiqueta de
nombre de
usuario de
la página de
inicio de
sesión
(Actualmente no se
utiliza en la página de
inicio de sesión). En el
futuro, este texto
podrá utilizarse para
reemplazar la cadena
genérica “cuenta
profesional o
educativa” en
diferentes lugares de la
experiencia. Puede
ajustarla en algo
similar a “Cuenta
contoso” o “ID de
contoso”.
 Texto
Unicode, de
hasta 50
caracteres
 Solamente
texto sin
formato (sin
enlaces ni
etiquetas
HTML)
 Introduzca texto sencillo y
corto
 Pregunte a los usuarios cómo
suelen referirse a la cuenta
profesional o educativa que les
proporcionó.
Texto de la
página de
inicio de
sesión
Este texto
“reutilizable” aparece
debajo del formulario
de la página de inicio
de sesión y puede
utilizarse para
comunicar
instrucciones
adicionales o para
indicar dónde obtener
ayuda y asistencia.
 Texto
Unicode, de
hasta 256
caracteres
 Solamente
texto sin
formato (sin
enlaces ni
etiquetas
HTML)
 No permita que supere los 250
caracteres (aproximadamente
3 líneas de texto)
Ilustración
de la página
de inicio de
sesión
La ilustración es una
imagen grande que se
visualiza en la página
de inicio de sesión a la
izquierda del
formulario de esta.
 JPG o PNG
 1420x1200
 500 KB
 1420x1200 píxeles
 Importante: No permita que
ocupe mucho tamaño; lo ideal
es que ocupe 200 KB como
máximo. Si esta imagen es
demasiado grande, afectará al
rendimiento de la página de
inicio de sesión cuando la
imagen no esté almacenada en
la memoria caché

11. www.ragazome.info / @ragazome
Libertad de Conocimiento / Libertad de Aprendizaje
 Esta imagen se recortará casi
siempre para acomodar
diferentes relaciones de
pantalla. Mantenga los
elementos visuales principales
en la esquina superior
izquierda (superior derecha en
los idiomas de escritura de
derecha a izquierda), debido a
que el redimensionamiento se
producirá desde la esquina
inferior/derecha hacia la
superior izquierda a medida
que se reduce la ventana del
navegador.
Color de
fondo de la
página de
inicio de
sesión
El color de fondo de la
página de inicio de
sesión se utiliza en la
zona situada a la
izquierda del
formulario de la página
de inicio de sesión. Se
puede ver cuando no
hay ninguna ilustración
de la página de inicio
de sesión.
 Deberá
utilizarse un
color RGB
en formato
hexadecimal
(ejemplo:
#FFFFFF)
 Es posible que se muestre el
color de fondo en lugar de la
ilustración grande con
conexiones de banda ancha
reducida
 Es recomendable elegir el
logotipo del banner del color
principal