Manual de Uso do Tomo – HTML Maker
(Guia Consultivo)

Este material é um guia consultivo para uso do Tomo – HTML Maker. Pontos específicos dependem de cada projeto — defina detalhes com o responsável/gestor do projeto.
A ordem apresentada em cada tópico segue a primeira aparição e/ou frequência no material. Para localizar itens rapidamente, use CTRL+F.

1) Parte Interna (processo dentro do livro)

Como usar?

O sistema tenta ser o mais intuitivo possível, mas algumas instruções devem ser ditas. Sua responsabilidade dentro do Tomo será limitada ao seu acesso, e as ferramentas que você terá acesso são simples e diretas. Sempre que tiver dúvida, fale com o responsável.

O editor funciona como um "criador de sites" em que você arrasta e posiciona blocos, mais ou menos parecido com ferramentas como Wix ou Squarespace. Os blocos já estarão pré produzidos para que você possa realizar seu trabalho. Caso dê falta de algum, fale com o responsável para que ele crie para você.

Os blocos tentam ser o mais genérico possível, para que seu trabalho seja o mais tranquilo possível.

Entendendo o editor

Botão que salva o seu progresso. O editor salva automaticamente a cada 40 ações, mas você pode salvar quando quiser para garantir rs
Modo Valide: ao finalizar o livro, ele vai ser lido pelos alunos e professores num programa leitor chamado Valide, e neste leitor a tela tem um tamanho específico. Use esse modo para ter uma ideia de como vai ficar o resultado final. Particularmente eu prefiro deixar essa opção sempre ligada, pra já fazer sabendo como vai ficar no arquivo final
Modo de exibição normal: mostra o livro com todos os elementos, é o modo padrão no qual você deve trabalhar
Modo de exibição Aluno: mostra o livro somente com os elementos do aluno. Serve para conferir se o livro do aluno está ficando como deveria. É útil para ver se esqueceu de marcar algum elemento como professor e/ou aluno.
Modo de exibição Professor: mostra o livro somente com os elementos do professor. Tem a mesma utilidade acima.
Mostrar grades: elementos como <div>, , tabelas, etc, não possuem bordas ou separações claras. Ativando essa opção, todos os elementos da tela vão ser demarcados por uma borda semi-transparente, para você ter noção de como os elementos estão se comportando na página. Use para quando seja necessário criar elementos mais complexos, ou entender como certo elemento está montado.
Ver código fonte: serve para ver como está o código fonte em HTML.
Modo Colar sem formatação: (Importante! Deixe esta opção sempre ligada!) seu trabalho vai consistir, na maior parte, em copiar e colar trechos de texto dentro do editor. Quando você seleciona um trecho do PDF, o paragrafo certamente vai conter quebras de linha, que por padrão vai ser transferido exatamente igual na hora de colar, e na maioria das vezes você quer o texto corrido, sem quebras ou separações. Deixando a opção ligada o editor vai automaticamente remover todas as quebras de linha e quebras de silabas que o texto contém.
Desfazer: desfaz a última ação feita no editor. O famoso CTRL+Z
Refazer: refaz a última ação desfeita.
Aba Estilos: nesta aba você vai poder alterar as classes do elemento selecionado, e também alterar o style dele, caso necessário.
Aba Layers: nesta aba você enxergará todos os elementos num sistema de cascata mais organizado e intuitivo, e nela você poderá realizar algumas ações como mover elementos, navegar usando teclado, copiar, deletar e clonar elementos.
Aba Blocos: aba principal do editor, onde você encontrará todos os elementos que você precisará para produzir o livro.
Aba Propriedades (ou carinhosamente "engrenagenzinha"): nesta aba você poderá alterar atributos da tag do elemento, e em alguns casos, algumas propriedades especiais do elemento (por exemplo, em tabelas você consegue alterar a quantidade de linhas e colunas que ela vai ter).
Categoria de blocos: divide os blocos em categorias pra facilitar o trabalho.
Editor: o editor em si.

2) Guidelines de uso

Caixa do Professor

Elemento que indica como lidar com o conteúdo daquela página e deve ser sempre o primeiro elemento da página (inclusive antes de títulos e aberturas).

Siga a ordem do livro: de cima para baixo e da esquerda para a direita.
Se a ordem parecer ambígua, pergunte ao responsável.

Div’s

Elemento para unir outros elementos de maneira excepcional.

Não use para agrupar tudo da página (a própria página já é uma “div gigante”; isso é redundante).
Objetivo: manter paridade visual de elementos “esquisitos” do físico na versão digital.

Sumário Interno

Seguindo a ordem do livro, o sumário interno é a última coisa do primeiro capítulo e já estará configurado em seus níveis e padrões gráficos.

Se precisar acrescentar um ícone: use Imagem Inline e ajuste no CSS quando necessário.
Importante: nenhuma âncora ou elemento externo afeta este sumário interno. Ele é puramente estético (paridade com o físico).

Ícones

Seguir o padrão do livro, mas com uma regra prática para o digital:

Evite colocar o ícone “separado” do texto, como costuma vir no impresso.
Quando isso ocorrer, coloque os ícones imediatamente acima da parte do conteúdo correspondente.
Se o item ao lado do ícone for uma abertura, então o conteúdo deve ficar imediatamente abaixo do ícone.

Imagens

O padrão recomendado é Imagem com Legenda.

Normalmente, basta adicionar:
- a imagem
- o texto de legenda
- créditos (quando couber)
Medidas usuais:
- imagem em 100%
- a div que cobre a imagem com legenda em 50%
Imagem horizontal: normalmente não precisa alterar, apenas centralizar.
Imagem vertical: avaliar a aparência do conjunto; pode ser necessário reduzir a imagem ou a div (se houver dúvida, pergunte ao responsável).

Imagens sem legenda:

Inserir com Imagem 100%.
Se a imagem vertical ficar muito grande/esquisita, ajuste porcentagens até ficar visualmente agradável, considerando que a tela de leitura pode ser menor.
Sempre que necessário (inclusive em outros elementos), utilize o modo de visualização “Valide”.

Aberturas e Subcapítulos

Para fins de regra, trate Aberturas e Subcapítulos como um grupo:

Quando aparecem, estão sempre no começo da página, logo abaixo da Caixa do Professor.
Não altere o estilo desses elementos: eles já vêm pré-configurados.
Exceção: quando houver um padrão explícito dentro do estilo (como costuma ocorrer no Subcapítulo). Ainda assim, alterações devem ser criteriosas.

Títulos

Semelhantes às Aberturas/Subcapítulos, mas com diferenças importantes:

Podem aparecer em qualquer parte do texto.
Não podem ser o último elemento da página. Se isso ocorrer, chame o responsável.

Hierarquia de títulos (H1, H2, H3, H4, H5):

Sempre leve em consideração a ordem dos H’s.
Evite “pulos” na hierarquia.
Exemplo: se o livro pedir um H3, mas ele vier antes de um H1, você deve ajustar para H2 (generalize essa lógica para outros casos).

Parágrafos

Padrão:

Use Parágrafo Simples (já vem com recuo maior na primeira linha).

Quando precisar de variações de diagramação:

Use Parágrafo Simples Quebrado, pois o “Parágrafo Simples” é mais rígido.

Resposta do Professor

Deve ser colocada sempre abaixo do item de questionário correspondente.
Em alguns livros, as respostas podem aparecer em lugares inusitados, mas geralmente há uma identificação (ex.: “1. Resposta pessoal”).
- Nesses casos, não inclua a identificação numérica no Tomo – HTML Maker.
- Exemplo: usar apenas “Resposta pessoal.”.

Listas

Listas ordenadas e não ordenadas já vêm com identificação colorida (1., A., bolinha etc.) para manter paridade com o impresso.

Se ao inserir a lista vier com formatação errada, corrija na seção de CSS.

Caixas

Mais utilizadas:

Box específico: elemento no meio do texto que possui título e conteúdo interno (pode conter imagem, listas e subtítulos internos).
Box glossário: caixa com link interno que leva a um texto destacado em um parágrafo; esse texto destacado deve ter um link interno de volta para o item correspondente do box.

Paridade com livros de anos iniciais:

Existe a caixa “Desenhe Área”. No digital não terá função prática, mas deve ser mantida para preservar a paridade com o físico.

Links externos

No digital, links externos diferem do livro físico por exigências de validação: os links devem estar encurtados.

Processo:

Selecione todo o link.
Clique no ícone do quadrado com uma seta saindo na diagonal superior direita.
Vá nas configurações do elemento (ícone de engrenagem, no canto superior direito do editor) e escolha “Gerar link curto”.

OED’s (áudios, infográficos, mapas)

Se alguma OED estiver faltando, avise o responsável.
As OED’s serão produzidas em outro momento; ao adicioná-las no editor, elas devem já estar prontas.
Se estiverem no servidor:
- Arraste o botão correspondente do Tomo – HTML Maker;
- Clique e aguarde o menu suspenso com a lista;
- Escolha a OED correspondente (normalmente indicada na Caixa do Professor da página).

Atenção ao clique:

Clicar na imagem do botão abre o menu de seleção de imagens.
Existe uma div em volta do botão; clique nela para selecionar a OED corretamente.

Citações

Citação Longa é semelhante a “Parágrafo Simples Quebrado”, com margens e tipografia ajustadas.
Créditos: normalmente na última linha; quando necessário, alinhe à direita.
Se a citação exigir formatação específica fora do projeto gráfico, alinhe com o gestor do projeto.

Lang’s (marcações de idioma)

Elemento pontual em livros que não sejam de idiomas, mas quando houver deve ser aplicado sempre (inclusive na Caixa do Professor).

Em imagens com termos em inglês:

Incluir duas descrições:
- Descrição (Alt): descrição direta, sem palavras em inglês.
- Descrição HTML (aria-describedby): descrição mais completa, com termos em inglês marcados com .
Se houver uma palavra em português no meio, separe os spans:
- coloque ... antes,
- deixe o português fora,
- e aplique ... novamente depois.

Colunas

Quanto mais raro o uso, melhor.

Nem sempre fica visualmente agradável; prefira elementos um abaixo do outro.
Se precisar usar colunas:
- opte por duas colunas
- use flex com gap: 1rem
- use “Flex: Align Self” centro

Anotação

Use para marcar pendências e pontos para revisar depois.
Apague todas antes de exportar o livro.

Âncoras do Sumário (para sumário externo)

Acrescente as âncoras exatamente antes do título, abertura ou OED indicado.
Para garantir que a âncora fique sempre acima do elemento referenciado:
- insira uma Div Simples acima;
- coloque a âncora dentro dela.

Observações:

Essa âncora aponta para um sumário externo do livro.
O sumário interno continua apenas para paridade visual.
Renomeie as âncoras com nomes que você consiga identificar depois.
A outra metade do processo ocorre em outro ambiente.

Manual do Professor

No final do material existe um capítulo específico do Manual do Professor:

Ele faz parte apenas do arquivo do professor
Possui sumário próprio

Tabelas

Use a engrenagem para configurar ocupação de mais linhas/colunas (especialmente relevante no Manual do Professor).
Não esqueça de marcar a primeira linha como cabeçalho.
Bug visual comum: linhas somem e parece quebrado.
- Para verificar, salve e recarregue a página. Se era apenas visual, volta ao normal.

Ficha Catalográfica

Inserir o elemento exatamente onde aparece no livro físico.
As informações serão preenchidas em uma ferramenta externa ao editor.

3) Parte Externa (fora do livro)

Capítulos

Fale com o responsável se precisar mexer em algo dessa parte.

Sumário

Gere o Sumário Automático e compare com a versão do livro.
Se houver diferenças que compliquem demais o processo, prefira fazer manualmente.
Ao fazer manualmente, atenção aos níveis:
- nível errado desconfigura o sumário que será gerado na exportação.

Editoriais (Alterar professor / Alterar aluno)

As instruções para “Alterar (professor)” e “Alterar (aluno)” são parecidas. Copie o template abaixo para o espaço da ficha catalográfica:

<div class="fc-container" style="max-width: 14.5cm; font-family:serif !important;">
  <div class="fc-header" style="border: none">
    <p>$elaboratedHeader$</p>
    <p>Elaborada por $elaboratedBy$ – $code$</p>
  </div>
  <div class="fc-content" style="border: 1px solid black; grid-template-columns: 2% 2fr">
    <div class="fc-left">$authorNotation$</div>
    <div class="fc-right" style="margin-right: 0.2rem">
      <p class="fc-recuo" style="margin-bottom: 1rem"><br /><br />$title$ / Obra coletiva concebida, desenvolvida e produzida pela Editora Casa de Letras; editor responsável Adriano Moreno Barbosa. – $cdu$ – $location$: $publisher$, $editionYear$.</p>
      <p class="fc-ibsn" style="margin-bottom: 1rem">HTML5<br /><br />
        ISBN $isbn_le$ (Livro Digital do Estudante)<br />
        ISBN $isbn_mp$ (Livro Digital do Professor)<br /></p>
      <p class="fc-tags">$tags$</p>
      <p class="fc-cdd-cdu" style="margin-right: 0.2rem">CDD $cdd$</p>
    </div>
  </div>
  <div class="fc-footer" style="text-align: left; margin-left: 1rem">
    <p>Índice para catálogo sistemático<br /><br />
    I. Lorem ipsum nos anos iniciais</p>
  </div>
</div>

Para que as fichas fiquem preenchidas, é necessário preencher as duas abas, de Aluno e Professor.

Validar HTML (etapa final)

Esta é a última coisa a ser feita no Tomo – HTML Maker.

Revise o arquivo quantas vezes forem necessárias antes de validar.
Após a validação, exporte.

Regras:

Validações amarelas: devem ser evitadas sempre que possível, mas não impedem a criação do arquivo final.
Validações vermelhas: não são opcionais e devem ser corrigidas. Se houver dificuldades, peça ajuda ao responsável.

Manual de Uso do Tomo – HTML Maker (Guia Consultivo)