Guias Canvas (pt-br)Guia do Administrador Contas e SubcontasComo eu carrego arquivos JavaScript e CSS customizados à uma conta ou subconta?

Como eu carrego arquivos JavaScript e CSS customizados à uma conta ou subconta?

No Canvas, você pode usar o Editor de Tema para criar a marca da sua conta. No entanto, se você deseja aplicar alguma marca adicional que atualmente não é suportada no Editor de Tema, você pode carregar folhas de estilo em cascata (CSS) e arquivos JavaScript (JS) customizados para sua conta. Os arquivos são hospedados diretamente no Canvas. Qualquer tema aplicado à conta também se aplica a todas as subcontas, embora você possa carregar arquivos CSS/JS para subcontas individualmente.

O Editor de Tema oferece suporte a upload de arquivos para desktop e dispositivos móveis. Arquivos CSS/JS padrão são aplicados a páginas HTML no aplicativo desktop do Canvas, que inclui a página de login para dispositivos móveis. Arquivos CSS/JS para dispositivos móveis são aplicados somente ao conteúdo de usuário exibido dentro dos aplicativos Canvas iOS ou Android, bem como em aplicativos de terceiros usando a API do Canvas, mas arquivos para dispositivos móveis não se aplicam ao conteúdo de usuário exibido em navegadores de dispositivos móveis.

Arquivos JavaScript e CSS personalizados estão sujeitos a mesma regra de herança de marcas para conta e subconta, como ao criar um tema regular no Editor de Tema.

Antes de adicionar arquivos JavaScript e CSS personalizados, você deve contatar seu Gerente de Sucesso do Cliente para habilitar a marca personalizada para a sua conta ou subconta.

Riscos de Arquivo Personalizado

Se você não pode usar as opções do Editor de Tema nativo para a marca, você deve estar ciente dos riscos associados ao usar arquivos personalizados, que podem causar problemas de acessibilidade ou conflitos com futuras atualizações do Canvas:

  • Você deveria ter conhecimento avançado de JavaScript e CSS e deve manter seu próprio código.
  • Arquivos personalizados podem entrar em conflito com as futuras alterações ao Canvas DOM (por exemplo: nomes de classe de elemento ou estrutura HTML) e, portanto, não são suportados. Instructure se isenta de qualquer responsabilidade por quaisquer alterações feitas em seus arquivos de substituição personalizados.
  • Você é responsável por rever as diretrizes de acessibilidade de conteúdo web para assegurar que seus arquivos atendem qualquer teste de acessibilidade web ou outros padrões de conformidade que podem ser exigidos em sua jurisdição. Você é responsável por fazer suas modificações acessíveis para leitores de tela,  usuários com necessidades de contraste de texto e de contraste de cor, e usuários que dependem de Estilos de Alto Contraste como uma opção de recurso do usuário.
  • Quando experimentando com marca personalizada, confirme sempre suas marca mudanças no ambiente de sua instituição beta ou teste de ambiente.

Notas:

  • O Editor de Tema não está disponível para contas de teste de duas semanas ou contas livre-para-professores.
  • Se você é um administrador de subconta e o link de Temas não é visível na Navegação de Conta, então Temas não foi habilitado para subcontas. Se a guia de Upload de CSS/JS não estiver visível, carregamentos de arquivos não foram habilitados para subcontas.

Abrir Conta

Abrir Conta

Na Navegação Global (Global Navigation), clique no link Admin [1], depois clique no nome da conta [2].

Abrir Temas

Abrir Temas

Na Navegação da Conta, clique no link de Temas (Themes).

Nota: Se tiverem sido habilitados temas de subconta, cada subconta também inclui um link Temas. Para abrir o Editor de Tema para uma subconta, clique no link Subcontas para localizar e abrir a subconta e, em seguida, clique no link Temas da subconta.

Abrir Modelo de Tema

Se você ainda não tem um tema do Canvas para sua conta, use um modelo para criar um novo tema. Você pode escolher entre o modelo Padrão do Canvas, um modelo minimalista e um modelo U. Estado. Se seu Gerente de Sucesso do Cliente tiver habilitado a opção de recurso específicos K12, o Tema K12 também aparece como um modelo.

Para criar um novo tema, passe o mouse sobre um modelo e clique no botão Abrir Editor de Tema (Open in Theme Editor) [1], ou clique no botão Adicionar Tema (Add Theme) [2] e selecione um modelo na lista.

Abrir Tema Salvo

Abrir Tema Salvo

Se você anteriormente criou e salvou um tema, você pode editar temas salvos a qualquer momento. Temas salvos aparecem na seção Meus Temas. Para abrir um tema salvo, passe o mouse sobre o nome do tema e clique no botão Abrir no Editor de Tema (Open in Theme Editor) [1].

Para criar um novo tema baseado em um tema salvo, clique no botão Adicionar Tema (Add Theme) [2] e selecione na lista o nome do tema salvo. Essa opção ajuda a evitar a substituição de seu tema salvo anteriormente.

Upload de Arquivos Personalizados

Upload de Arquivos Personalizados

Na barra lateral do Editor de Tema, clique na guia de Upload.

Para enviar arquivos para o aplicativo desktop do Canvas, localize os títulos dos arquivos JavaScript/CSS [1]. Para fazer upload de arquivos para conteúdo de usuário em aplicativos móveis e de terceiros do Canvas, localize os títulos dos arquivos CSS/JavaScript para aplicativo móvel [2].

Localize o tipo de arquivo que deseja enviar e clique no botão Selecionar (Select) [3] e, em seguida, localize o arquivo no seu computador.

Localize arquivos adicionais para o upload, se necessário.

Pré-visualizar o Tema

Pré-visualizar o Tema

Para pré-visualizar o seu tema, clique no botão Pré-visualizar Suas Modificações (Preview Your Changes).

O Canvas irá gerar a visualização dos componentes com base em suas mudanças de modelo. Se necessário, faça alterações adicionais e visualize seu tema novamente.

Gerenciar Arquivos

Gerenciar Arquivos

Para gerenciar seus arquivos, clique na guia de Upload novamente [1].

Para remover e carregar um novo arquivo, clique no ícone de Remover (Remove) [2]. Você pode fazer alterações adicionais e fazer upload de seu arquivo revisado.

Para exibir o código do seu arquivo, clique no link Exibir Arquivo (View File) [3]. Como o arquivo é armazenado diretamente no Canvas, use este link se você precisar fazer o download do arquivo.

Salvar Tema

Salvar Tema

Uma vez que você estiver satisfeito com as alterações do modelo, salve seu tema clicando no botão Salvar Tema (Save Theme).

Criar Nome do Tema

Criar Nome do Tema

Se você modificou um tema a partir de um modelo, o Editor de Tema cria uma cópia do tema. Modelos não podem ser editados diretamente. No campo Nome do Tema [1], insira um nome para o seu tema. Clique no botão Salvar Tema (Save Theme) [2].

Nota: Se você editou um tema salvo anteriormente, salvando o tema substituirá a versão anterior do tema e usará o mesmo nome do tema.

Aplicar Tema

Aplicar Tema

Para aplicar seu tema a sua conta, clique no botão Aplicar (Apply) [1].

Para sair do tema e retornar para a página de Temas, clique no botão Sair (Exit) [2]. Você pode abrir o tema e aplicá-lo a sua conta a qualquer momento.

Nota: Se sua conta permite que subcontas personalizem seus próprios temas, qualquer modificação aplicável realizada na conta também será aplicada para as subcontas. O Canvas exibe o status das atualizações do Editor de Tema; quando o processo para cada subconta for completo, a subconta desaparecerá da janela de progresso. Quando todas subcontas tiverem sido atualizadas, o Editor de Tema redireciona para a página de Temas.