Os widgets personalizados permitem expandir a funcionalidade do conteúdo disponível nas páginas iniciais de acordo com as necessidades específicas da organização e do curso. Você pode adicionar um código HTML personalizado para criar uma grande variedade de widgets. Você pode criar widgets personalizados para seus cursos ou usar widgets personalizados compartilhados para suas ofertas de curso no nível da organização, departamento ou semestre.
|
Observação: Seu administrador pode ter optado por implementar uma proteção adicional em widgets personalizados chamada "Modo seguro". Quando um widget personalizado está no modo seguro, um iFrame seguro é criado em torno do widget, impedindo que scripts sejam executados fora dele. Você pode ver se um widget está no modo seguro ou não na lista de widgets personalizados. Os widgets que não estão no modo seguro não estão necessariamente desprotegidos, mas devem ser criados apenas por funções confiáveis. |
Na lista de widgets, os widgets fora do modo seguro têm um ícone de aviso:
Para criar um widget personalizado
- Na página inicial do curso, clique em Editar Curso > Widgets.
- Clique em Criar widget.
- Na guia Propriedades, insira um nome e uma descrição para o widget.
- Para adicionar seu próprio conteúdo HTML ao widget usando o Editor de código HTML, clique na guia Conteúdo > ícone
Editar código HTML. Adicione o código HTML personalizado.
- Para aplicar diferentes opções de estilo ao widget, clique em Personalizar estilo do widget.
- Em Configurações de widget, você também pode executar um destes procedimentos:
- Para ocultar a barra de título, desmarque a caixa de seleção Exibir barra de título.
- Para ativar o modo seguro do conteúdo do widget, clique para selecionar Widget em modo seguro e/ou Renderizar em iFrame.
| Observação: se sua função não tiver permissão para alternar essa configuração, mas você achar que seu widget precisa ser removido do modo seguro para se comportar como esperado, entre em contato com um administrador com a permissão de Segurança de widget. |
- Para remover o estilo de borda padrão, desmarque a caixa de seleção Exibir estilo do contêiner de widget.
- Selecione Proibir a minimização do widget para impedir os usuários de fechar o widget na página inicial.
- Para definir um título personalizado, na seção Nome do widget, selecione o botão de opção Personalizado. Digite o texto no campo.
- Clique em Salvar. Para anexar as condições de liberação ao widget, clique na guia Condições de liberação e faça um destes procedimentos:
- Clique em Anexar atual e selecione uma opção entre as condições de liberação disponíveis na unidade organizacional. Clique em Salvar. Na lista suspensa, selecione se Todas as condições devem ser satisfeitas ou Qualquer condição deve ser satisfeita.
- Clique em Criar e anexar para criar uma condição de liberação e anexá-la. Clique em Criar. Na lista suspensa, selecione se Todas as condições devem ser satisfeitas ou Qualquer condição deve ser satisfeita.
- Clique em Salvar e fechar.
Adicione CSS externo e JavaScript a um widget
Os widgets personalizados no Brightspace permitem personalizar a página inicial do curso com conteúdo e funcionalidade exclusivos. Enquanto o editor de widgets padrão suporta HTML e estilo em linha, você pode aprimorar seus widgets vinculando arquivos CSS e JavaScript externos.
O uso de recursos externos permite um estilo e interatividade mais avançados, mantendo o conteúdo do widget mais fácil de manter.
Por que adicionar recursos externos?
A vinculação de arquivos CSS e JavaScript externos permite:
- Adicionar comportamento dinâmico usando JavaScript, como animações ou elementos interativos.
- Aplicar estilo personalizado com CSS externo além do tema padrão do Brightspace.
- Centralizar as atualizações de projeto gerenciando estilos e scripts em um único local.
Antes de começar
Ao vincular arquivos CSS e JavaScript externos a um widget personalizado, você deve decidir:
- Onde armazenar seus arquivos de widget:
- No nível do curso, para widgets usados em um único curso.
- No nível da organização (Arquivos Públicos), para widgets compartilhados em vários cursos.
- Como fazer referência a esses arquivos no HTML do widget usando o caminho relativo correto.
As seções a seguir fornecem instruções passo a passo para ambas as opções.
Armazene widgets no nível do curso
O armazenamento no nível do curso é melhor para widgets usados em uma única oferta de curso.
Passo 1: carregue seus arquivos
- Navegue até Administração do curso > Gerenciar Arquivos.
- Crie uma nova pasta para armazenar seus arquivos de widget (por exemplo, ClickAndReveal).
- Carregue seus arquivos CSS e JavaScript.
|
Dica: crie seus arquivos em um editor de código antes de fazer o carregamento (por exemplo, click-reveal.css e click-reveal.js). |
Passo 2: abra o editor HTML do widget
- Navegue até Administração do curso > Widgets.
- Crie um novo widget personalizado ou edite um widget existente.
- Selecione a guia Conteúdo.
- Alterne para o Editor de Código HTML.
Passo 3: vincular CSS externo e arquivos JavaScript
- Navegue até Administração do curso > Informações da Oferta de Curso.
- Copie o Caminho da Oferta de Curso exibido na página.
- Na seção HTML <head> do widget, vincule seus arquivos usando o Caminho da Oferta de Curso seguido pela estrutura de pastas.
Figura: exemplo de vinculação de arquivos CSS externos e JavaScript na seção HTML <head> do widget usando o Caminho da Oferta de Curso.
Passo 4: crie seu widget
Use o Editor de HTML para adicionar o conteúdo do seu widget. Os arquivos CSS e JavaScript vinculados controlam o estilo e o comportamento do widget.
Armazenar widgets em Arquivos Públicos (nível da organização)
O armazenamento de widgets em Arquivos Públicos permite que você os reutilize em vários cursos. Essa opção normalmente requer permissões de administrador.
Passo 1: carregue seus arquivos
- Clique no ícone de engrenagem Admin na minibarra do Brightspace.
- Selecione Arquivos Públicos.
- Crie uma nova pasta para armazenar seus arquivos de widget (por exemplo, ClickAndReveal).
- Carregue seus arquivos CSS e JavaScript.
|
Dica: crie seus arquivos em um editor de código antes de fazer o carregamento (por exemplo, click-reveal.css e click-reveal.js). |
Passo 2: abra o editor HTML do widget
- Navegue até Gerenciamento da página inicial.
- Selecione a guia Widgets.
- Crie um novo widget personalizado ou edite um widget existente.
- Na guia Propriedades, localize Disponibilizar widget para e clique em Adicionar Unidades Organizacionais.
- Selecione as unidades organizacionais nas quais você deseja que o widget esteja disponível.
- Selecione a guia Conteúdo e alterne para o Editor de Código HTML.
Passo 3: vincular CSS externo e arquivos JavaScript
Na seção HTML <head> do widget, vincule seus arquivos armazenados em Arquivos Públicos usando um caminho relativo que começa com /shared, seguido pela estrutura da pasta.
|
Dica: o caminho /shared diferencia maiúsculas de minúsculas. |
Figura: exemplo de vinculação de arquivos CSS externos e JavaScript armazenados em Arquivos Públicos usando um caminho /shared.
Passo 4: crie e implante seu widget
Use o Editor de HTML para adicionar o conteúdo do seu widget. Depois de concluído, adicione o widget à página inicial apropriada para que ele apareça para alunos ou instrutores.