Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Para comenzar a diseñar elementos web, tiene que familiarizarse con Office UI Fabric. Todos los estilos de Fabric Core, incluidos los iconos, la tipografía, el uso de colores, la animación y la cuadrícula dinámica, se cargan de manera predeterminada y están disponibles para el elemento web.
No importe una copia de Fabric en su elemento web, ya que puede producirse un conflicto con la copia global. Estas clases proporcionan una base para el estilo del elemento web, de la que puede partir siempre si necesita diferentes objetos visuales que coincidan con la marca de su empresa.
Componentes de Office UI Fabric React
Junto con Office UI Fabric, puede usar componentes de Office UI Fabric React para compilar sus elementos web. Fabric React es una colección de componentes dinámica y que da prioridad a los dispositivos móviles que se ha diseñado para que pueda crear experiencias web mediante el lenguaje de diseño de Office de manera rápida y sencilla.
En el siguiente ejemplo de lista de tareas pendientes se usan componentes de Fabric en el panel de propiedades, que permite configurar un elemento web al autor de la página.
Puede encontrar una lista completa de los estilos, la tipografía, el color, los iconos y las animaciones de Office UI Fabric en estilos de Office UI Fabric.
Comportamiento dinámico
Las páginas de la nueva experiencia de creación de SharePoint usan la cuadrícula dinámica de Office UI Fabric para garantizar que cada página tenga un aspecto excelente.
Ancho máximo
Recomendamos que todos los elementos web usen un ancho máximo del 100 % para garantizar que se redistribuyan y funcionen correctamente en cualquier página. Los anchos de página y columna se definen mediante la plantilla de página, pero el autor puede modificarlos. Si se establece un valor de píxel máximo en el elemento web, pueden producirse resultados inesperados tanto en la funcionalidad como en el diseño cuando la página se ve con anchos diferentes.
Ancho mínimo
Todos los elementos web deben diseñarse para redistribuirse a medida que el ancho de la página o columna disminuye hasta un ancho mínimo de 320 px.
Modo Edición de elementos web
La nueva experiencia de creación de páginas de SharePoint tiene dos modos:
- Modo publicado, que permite a su equipo o al público ver contenido e interactuar con los elementos web.
- Modo Edición, que permite a los autores de la página agregar y configurar elementos web para agregar contenido a una página.
En las secciones siguientes se describe el modo Edición.
Sugerencia de adición y cuadro de herramientas
La sugerencia de adición es una línea horizontal con un icono de signo de suma que es visible cuando un elemento web se selecciona y se mantiene el mouse para indicar dónde pueden agregar los autores de la página nuevos elementos web a esta. El cuadro de herramientas se abre cuando un usuario hace clic en el icono de signo de suma. El cuadro de herramientas contiene todos los elementos web que pueden agregarse a la página.
Barra de herramientas
Una barra de herramientas vertical y un cuadro de límite forman parte del marco de cada elemento web y los proporciona la página. Cada elemento web tiene una acción de edición y de eliminación en la barra de herramientas.
Ediciones contextuales
Debe diseñarse una experiencia WYSIWYG para los elementos web a fin de rellenar información o agregar contenido que se muestra al usuario cuando se publica. La escritura de este contenido debe realizarse en la página, de manera que el usuario entienda cómo ve el contenido el espectador. Por ejemplo, los títulos y las descripciones deben rellenarse donde se muestra el texto o las tareas nuevas deben agregarse y modificarse en el contexto de la página.
Ediciones de nivel de elemento
La interfaz de usuario puede cambiar dentro del elemento web, por ejemplo, convirtiendo texto en un campo de texto para rellenar vínculos, mostrando la interfaz de usuario para volver a ordenar elementos o para comprobar las tareas de un elemento web.
Paneles de propiedades
Los paneles de propiedades se invocan mediante el icono Editar acción de la barra de herramientas. Los paneles deben contener principalmente las opciones de configuración que habilitan o deshabilitan características que se muestran en la página o que realizan una llamada a un servicio para mostrar el contenido.
Existen tres tipos de paneles de propiedades para permitirle diseñar y desarrollar elementos web que se adapten a las necesidades de su empresa o de sus clientes.
Panel único
Un panel único se usa para elementos web simples que solo tienen un número pequeño de propiedades que configurar.
Panel Accordion
Un panel Accordion se usa para contener un grupo o grupos de propiedades con muchas opciones y donde los grupos darían como resultado una larga lista de desplazamiento de opciones. Por ejemplo, puede tener tres grupos denominados Propiedades, Apariencia y Diseño, cada uno con diez componentes.
Accordion: un grupo abierto
Accordion: dos grupos abiertos y desplazados
Páginas o pasos del panel de propiedades
Un panel de pasos se usa para agrupar propiedades en varios pasos o páginas cuando necesite que el elemento web se configure en un orden lineal o cuando las elecciones que se han tomado en el primer paso afectan a las opciones que se muestran en el segundo paso.
Paso 1 de 3
Paso 2 de 3
Paso 3 de 3
Elementos web reactivos frente a no reactivos
Los elementos web reactivos se diseñan para que sean elementos web del lado cliente completos, lo que significa que cada componente que se configure en el panel de propiedades refleja el cambio realizado dentro del elemento web de la página. Para el elemento web de lista de tareas pendientes, al desactivar "Tareas completadas" se oculta esta vista en el elemento web.
Los elementos web no reactivos no son del lado cliente por completo y, por lo general, una o más propiedades necesitan realizar una llamada para establecer, extraer o almacenar datos en un servidor. En este caso, debe habilitar los botones Aplicar y Cancelar situados en la parte inferior del panel de propiedades.
Crear el panel de propiedades de la lista de tareas pendientes
En el ejemplo de la lista de tareas pendientes se usa el panel único y es un elemento web reactivo. En los siguientes diagramas, se muestra cada componente de Fabric React y el diseño resultante.
Agregar una descripción a la lista de tareas pendientes
Menú desplegable: para seleccionar tareas de una lista existente
Casilla: para permitir que los autores muestren u oculten diferentes vistas
Control deslizante: para establecer el número de tareas visibles
Después de seleccionar una lista del menú desplegable, el elemento web muestra un indicador de carga de elementos en la página
Cuando se cargan nuevas tareas, aparecen en la vista mediante estilos de animación de Office UI Fabric.
