Agora incluímos dois sistemas de sanitização de código para o desenvolvimento de fichas: Sistema Antigo e Novo Sistema.
Mudanças na Sanitização de Código
Para o desenvolvimento de fichas, a sanitização de código agora está dividida em dois sistemas para escolher sem a interrupção de alterações.
Sistema Antigo
O sistema de sanitização antigo usa diretrizes mais restritivas para a sanitização de HTML e CSS.
Como eu ativo isso?
Por padrão, todas as fichas existentes dos nossos repositórios do GitHub foram escolhidas para o sistema antigo. Isso permite que os autores de fichas façam a transição para o novo sistema no seu próprio ritmo, enquanto todas as fichas existentes no sistema antigo continuam funcionando da mesma forma que antes.
Se você estiver no novo sistema de sanitização e quiser voltar para o Sistema Antigo, siga as etapas abaixo:
-
Fichas do Repositório do GitHub
- No seu arquivo sheet.json, adicione o seguinte par chave/valor:
- “legacy”: true
-
Sheet Sandbox
- No editor sheet.json, adicione o seguinte par chave/valor:
- “legacy”: true
-
Editor de Planilha Personalizado
- Na página de configurações do seu jogo, marque a caixa de seleção “Sanitização Legada”, que fica acima do editor de código.
- Na página de configurações do seu jogo, marque a caixa de seleção “Sanitização Legada”, que fica acima do editor de código.
Como eu crio uma planilha para isso?
A comunidade tem um ótimo artigo na Wiki sobre isso, com opções e restrições de HTML, CSS e Javascript, visto aqui: https://wiki.roll20.net/Building_Character_Sheets#Restrictions.
Novo Sistema
O novo sistema de sanitização não sanitiza mais o CSS recebido e reduz consideravelmente as restrições e regras adicionadas ao HTML recebido também.
Como eu ativo isso?
Por padrão, todas as novas folhas do nosso repositório, folhas personalizadas e jogos de sandbox de folhas personalizadas estão optando pelo novo sistema! Facinho!
Se você está no sistema antigo e quer mudar para o novo sistema, siga os passos abaixo:
-
Folhas do Repositório do GitHub
- No seu arquivo sheet.json, remova o seguinte par chave/valor:
- “legacy”: true
-
Sandbox para folhas personalizadas
- No editor sheet.json, remova o seguinte par chave/valor:
- “legacy”: true
-
Editor de Folhas Personalizadas
- Na página de configurações do seu jogo, desmarque a caixa de seleção “Sanitização Antiga”, que fica acima do editor de código.
- Na página de configurações do seu jogo, desmarque a caixa de seleção “Sanitização Antiga”, que fica acima do editor de código.
Como eu crio uma folha para isso?
Comece a escrever HTML e CSS como você normalmente faria! Queremos que a experiência seja o mais próxima possível do desenvolvimento tradicional. A maioria dos elementos funcionará, incluindo classes, ids, breakpoints e animações.
No entanto, ainda existem algumas limitações por enquanto que devem ser consideradas:
-
Nem todos os elementos e atributos HTML estão disponíveis, ainda existem algumas restrições.
- Exemplos de tags restritas: link, video, iframe, meta
- Exemplos de atributos restritos: autoplay, download, onclick
-
O Javascript ainda está restrito e deve ser utilizado via Sheetworkers
- Você pode ler mais sobre sheetworkers aqui: https://wiki.roll20.net/Sheetworkers
- Os modelos de rolagem ainda vão usar o sistema de sanitização antigo, o que significa que eles seguirão as regras e restrições descritas aqui: https://wiki.roll20.net/Building_Character_Sheets#Restrictions
Migrando do Sistema Antigo para o Novo
Isso pode parecer uma tarefa assustadora, mas esperamos que essas mudanças permitam que você desenvolva fichas de forma mais eficiente e aprimorada.
Este é um esboço geral do que você pode fazer para converter para o novo sistema, mas de forma alguma abrange tudo e depende do seu próprio processo e fluxo.
- Mude para o novo sistema de sanitização através do seu método preferido (GitHub, sandbox da ficha ou editor de ficha personalizado)
- Remova quaisquer referências codificadas do seguinte do seu CSS e HTML e corrija qualquer problema que tenha causado.
- Classe "Sheet-"
- Se você estiver usando a grade Roll20 fornecida por nós, adicione "sheet-" aos atributos de classe HTML onde essas classes estão sendo usadas.
- Converta o máximo possível de coisas em botões de rolagem para aproveitar melhor nossa barra de macro rápida!
Considerações adicionais de desenvolvimento
Ao migrar para este novo sistema, considere estas ótimas dicas para adicionar à sua ficha enquanto trabalha:
-
Melhor suporte de acessibilidade
- Agora suportamos tags aria, HTML semântico, e outras funções fornecidas nativamente.
- Aqui estão alguns materiais de leitura excelentes que apenas arranham a superfície dessa disciplina:
-
Design responsivo
- Nosso aplicativo móvel será lançado em breve e queremos que as fichas de personagem fiquem bonitas nele!
- Agora suportamos pontos de interrupção, IDs e novas tags HTML, todas as quais devem ajudar na sua jornada de criação de fichas responsivas.
- Aqui estão alguns artigos incríveis sobre esse tópico:
-
Estilo de impressão
- Você pode imprimir uma ficha de personagem abrindo-a em uma janela separada e usando as funções de impressão nativas do navegador ou do dispositivo. Como observação, o estilo da ficha de personagem e alguns dados podem estar faltando ou serem afetados.
- Agora suportamos a consulta de mídia de impressão , o que deve permitir aos autores de fichas estilizá-las especificamente para quando um usuário deseja imprimi-las.