Scientific Electronic Library Online Manual de Codificação

Transcrição

SciELO - Scientific Electronic Library Online
FAPESP - CNPq – BIREME - FapUNIFESP
Rua Onze de Junho, 269 – CEP 04041-050 - São Paulo-SP – Brasil. Tel.: 55-11-5083-3639
www.scielo.org | www.scielo.br
Scientific Electronic Library Online
Manual de Codificação de Tabelas para
xHtml
Projeto PMC
São Paulo
Novembro 2013
FAPESP - CNPq - FapUNIFESP - BIREME
INTRODUÇÃO
Este manual tem o objetivo de mostrar passo a passo como codificar
as tabelas ao invés de inseri-las como imagens, para que possa atender as
normas do projeto PMC e suas formatações específicas.
Elaborado por Gustavo Lima da Silva em seis de março de 2012.
1. MODELO DE CONVERSÃO
A conversão das tabelas deve ser feita com base nas informações do
pdf, seguindo a mesma estrutura desde o título ao corpo da tabela.
Há um layout pronto de tabela para auxiliar na conversão da tabela
(Vide Apêndice), que deve ser aberta usando o Dreamweaver CS5, onde
será estruturada a tabela para que fique igual a do pdf e seja feita a
inserção dos dados retirados do pdf.
Segue na figura o modelo da tabela:
Figura 1 - Layout da Tabela
A tabela é dividida em duas partes, o cabeçalho (representado pela
tag <thead>) e pelo corpo (representado pela tag <tbody>). Essas tags
fazem com que a tabela fique com as separações necessárias nas tabelas e
com o atributo style, para que as divisões fiquem de acordo com o PDF.
Na Figura 2 podemos ver o resultado da tabela no navegador:
Figura 2 – Layout de Tabela no Browser
2
Cada campo deve ser substituído pelo seu respectivo nome:
Cabeçalho e Dados da tabela. Cada linha é representada pela tag <TR>,
como mostra a figura a seguir:
Figura 3 – Código da Tabela.
Observe que o conteúdo da linha da tabela está dentro da tag <TR>,
e dentro da mesma que são inseridas as tags <TD> (Dados) e <TH>
(Cabeçalho). Lembrando que a tag <TD> deve ser usada no corpo da tabela
e a tag <TH> deve ser usada apenas nos títulos.
2. CONVERTENDO A TABELA
Há dois métodos diferentes para a conversão das tabelas.
O segundo método é mais prático, porém não é possível ser usado
em todas as tabelas.
2.1 PRIMEIRO MÉTODO
A princípio deve ser criada uma pasta com o nome “tab” dentro da
pasta “img” na revista que você estará convertendo as tabelas.
Neste caso, o exemplo usado para a conversão será a tabela a
seguir:
Figura 4 – Tabela de exemplo.
3
O primeiro passo é abrir o layout pronto da tabela usando o
Dreamweaver
CS5,
já
citado
anteriormente,
localizado
em
“Y:\SciELO_team\XML_PMC\Conversao\Tabelas\ModeloTabela.html”.
Com o layout aberto, o próximo passo é deixar o layout de tabela
igual ao que se deseja converter, nesse caso a tabela da figura 4 citada
anteriormente.
Primeiramente deve-se igualar o número de colunas e linhas, o layout
pronto tem quatro colunas e três linhas já a tabela que será convertida tem
sete colunas e quatro linhas. Dessa forma, selecione a tabela clicando em
qualquer borda para ver as propriedades da tabela na parte inferior da
página. Vide Figura 5:
Figura 5 – Tabela selecionada
Com a tabela selecionada é possível ver a quantidade de linhas e
colunas que há na tabela, mostrado na parte inferior da Figura 5.
Para alterar o número de colunas de quatro para esete e o número de
linhas de três para quatro, vá às propriedades da tabela, como mostra a
Figura 6. Após a alteração no número de colunas e linhas a tabela ficará
como na Figura 7.
4
Figura 6 – Alteração do número de colunas
Figura 7 – Tabela alterada
Com o número de colunas e linhas igual a do PDF, o próximo passo é
a inserção do cabeçalho e do corpo da tabela. Para isso deve-se copiar o
texto pelo PDF usando a Ferramenta Selecionar (padrão) e colar na tabela,
vide Figura 8:
Figura 8 – Copiando e Colando dados do cabeçalho.
5
Copie todos os dados do cabeçalho e do corpo e certifique-se
sempre de que os dados copiados estão completos e iguais aos do
PDF. Os espaços em branco no PDF deverão continuar em branco na
tabela, para que as células fiquem de acordo com suas respectivas colunas.
Neste exemplo a tabela deverá ficar assim:
Figura 9 – Tabela com todos os dados.
Nota: Repare que na última célula do cabeçalho onde se encontra
“P-value” a letra P está em itálico, ao copiar do pdf e colar na tabela, o pdf
NÃO COPIA a formatação correta, então o texto deve ser colocado em
itálico manualmente. Para deixar em itálico basta selecionar o texto e usar a
tecla de atalho Ctrl+I.
O próximo passo é deixar as células que estão sem conteúdo em
branco também no código fonte, pois esses espaços que estão em branco
não estão completamente limpos. No código essas células ficam como: <td
align=”center”> </td>(Se a célula não estiver centralizada o código
será: <td> <td>). Nesse caso, a informação de ‘ ’ deve ser
removida, basta clicar no código e deletá-lo para que fique apenas como:
<td align=”center”></td>.Segue o exemplo a seguir:
6
Figura 10 – Limpando o código.
7
Depois que todas as células estiverem sem o código “ ”
(espaço em branco), a tabela estará quase pronta. Segue a visualização da
tabela no Navegador:
Figura 11 – Visualização no Navegador
O último passo em na tabela é ajustar a distância entre as colunas,
pois elas ficam “grudadas” entre si, o que não ocorre no pdf.
Primeiramente, vá ao código e visualize a tag <colgroup> que se
encontra logo no início da tabela após a tag <table>.
Figura 12 – Tag <colgroup>.
Em “width” coloque em porcentagem a distância que se deseja entre
as colunas.
Coloque o número de tags <col /> (a tag <col /> representa cada
coluna da tabela) igual ao número de colunas que a tabela possui, para que
a formatação se aplique a todas as colunas, nesse caso, há sete colunas,
portanto haverá sete tags como segue o exemplo a seguir:
Figura 13 – Tags <col />
NOTA: Ao invés de repetir sete vezes a tag <col /> também pode ser
colocado o atributo “span” dentro da tag com o número de colunas da
tabela. Nesse caso seria <col span=”7” />
8
Para finalizar, coloque uma porcentagem em “width” para afastar as
colunas e assim o conteúdo não fica “colado”e. Esse número de
porcentagem pode ser relativo, neste caso será colocado 14%, pois 14%
multiplicado por 7 colunas chega próximo a 100% que representa a tabela
inteira. Ficará como na figura seguinte:
Figura 14 – Porcentagem nas colunas
A tabela estará completa e aparentemente não terá sofrido efeito
algum, pois a alteração só é visualizada no navegador. Para visualização no
navegador, basta pressionar F12 no Dreamweaver e a tabela ficará assim:
Figura 15 – Tabela completa
2.2 SEGUNDO MÉTODO
Este segundo método consiste em fazermos o cabeçalho da mesma
maneira que no método anterior, porém o corpo da tabela será extraído de
uma só vez.
Esse método para extrair o corpo da tabela é mais rápido e tem
garantia dos dados completos, porém ele não pode ser aplicado em todas
as ocasiões, só é possível extrair de tabelas que não tenham espaços em
branco. No exemplo anterior não seria possível utilizar esse método
corretamente, pois havia células vazias.
A figura a seguir mostra a tabela que será usada como exemplo:
9
Figura 16 – Tabela do segundo método
Como podemos ver na Figura 16, a tabela é muito extensa o que
levaria tempo e trabalho ao copiar dado por dado para colar na tabela a ser
criada.
Para fazer essa tabela será necessário que o Microsoft Word esteja
aberto. Abra o layout da tabela normalmente localizado em
“Y:\SciELO_team\XML_PMC\Conversao\Tabelas\ModeloTabela.html” e faça o cabeçalho da mesma forma que o método anterior
igualando o número de colunas, porém no corpo deixe apenas uma linha,
como mostra a figura abaixo:
Figura
17
–
Cabeçalho
pronto
10
Agora selecione diretamente no PDF todo o corpo da tabela, usando a
Ferramenta Seleção (Figura 18) e cole no Word para que seja criada uma
tabela automaticamente (Figura 19).
Figura 18 – Corpo da tabela selecionado
11
Figura 19 – Tabela colada no Word
Agora que o Word gerou uma tabela, copie do Word e cole no
DreamWeaver.
ATENÇÃO: Não é possível copiar do pdf e colar diretamente no
DreamWeaver. (Não funciona!)
O próximo passo é selecionar a tabela do Word e copiar, mas para
colar no DreamWeaver será usado o “Colar Especial”. A figura a seguir
mostra a tabela selecionada no Word:
12
Figura 20 – Tabela selecionada no Word
Depois de copiar cole no DreamWeaver com o “colar especial”, o qual
pode ser clicado com o botão direito do mouse e ir na opção “Colar
Especial” ou usando o atalho no teclado “Ctrl+Shift+V”. Marque a opção
“Texto com estrutura e formatação básica (negrito, itálico)”, assim o código
ficará mais limpo.
13
Figura 21 – Colar Especial
NOTA: A tabela colada não deve substituir a primeira tabela com o
cabeçalho pronto, pode ser colada abaixo ou em um novo documento em
branco, pois no fim essa tabela que foi colada será deletada.
Depois que a tabela for colada no DreamWeaver, teremos todos os
dados necessários, porém essa tabela contém tags e atributos que não
serão usados.
O próximo passo é limpar essa tabela, para isso, use a ferramenta
“Localizar e substituir”.
Nessa tabela deve-se remover do código a tag <p>, e os atributos
“width” e “valign”. A ordem de remoção desses atributos não importa.
Neste caso comece pela tag <p>. Use o atalho Ctrl+F e vá à opção “Tag
Específica” (Figura 22) e em seguida remova todas as tags p dentro da tag
table (Figura 23).
14
Figura 22 – Localizando Tag Específica
Figura 23 – Configurando Localizar e Substituir para remover <p>
NOTA: Se a opção “Dentro da tag” não estiver aparecendo basta
clicar no botão à esquerda com o símbolo “+”.
Agora clique no botão à direita “Substituir tudo”.
Use o mesmo comando para remover o atributo “valign”. Remova
valign em “qualquer tag”, como mostra a figura a seguir:
15
Figura 24 – Configurando Localizar e Substituir para remover valign
Para remover o atributo width basta selecionar a tabela clicando em
qualquer borda, ir às propriedades da tabela e clicar o botão “Limpar
largura das colunas”. Segue o exemplo na figura a seguir.
Figura 25 – Limpando atributo width
O próximo passo é colocar esse corpo dentro da tabela correta dentro da
tag <tbody>. Deve ser selecionado somente as linhas, copiá-las e colálas na tabela correta. Ao invés de selecionar a tabela clicando pela borda,
selecione clicando e arrastando pelo lado esquerdo, para que a tag <table>
não seja copiada junto, como mostra a figura a seguir.
16
Figura 26 – Copiando as linhas da tabela
Agora com as linhas copiadas vá até a tabela correta na linha
reservada para o corpo da tabela e cole. A tabela ficará como na figura a
seguir.
Figura 27 – Linhas coladas no corpo da tabela
17
A última linha deve ser excluída, pois ela não pertence à tabela. Para
isso use o atalho Ctrl+Shif+m.
A tabela que foi copiada do Word não é mais necessária e pode ser
apagada.
O último passo é alinhar a tabela conforme o pdf. Para isso, basta
selecionar as colunas ou células que se deseja alinhar, depois ir às
propriedades que aparecerão na parte inferior e selecionar o alinhamento
desejado como mostra a figura a seguir.
Figura 28 – Alinhando os dados
Agora basta configurar a tag <col> como no método anterior e sua
tabela estará completa.
2.3 REFERÊNCIAS DE NOTAS DA TABELA
Há tabelas que tem notas de rodapé com referências na tabela onde
devem ser criados links para as âncoras seguindo um padrão. As referências
devem ser consultadas no pdf. Na figura a seguir temos um exemplo de
referência e nota na tabela:
Figura 29 – Tabela com nota e referência
18
Temos cinco referências. O link deve ser criado seguindo o padrão:
“# + tfn (Table Foot Note) + número da nota + ‘-‘ (hífen) + t (Table) +
número da tabela”
Neste caso a referência 1 fica com o link:

#tfn1-t1
Pois é a primeira referência da tabela 1.
Para colocar o link basta selecionar a nota e ir às propriedades que
aparecerão na parte inferior e colocar o link desejado como mostra na
figura a seguir.
Figura 30 – Colocando Link
2.4 SALVANDO A TABELA
Depois que a tabela estiver pronta, o último passo é salvá-la com a
extensão “.txt” e seguir o padrão de nomeação.
Para salvar em “.txt” selecione a tabela com um clique em qualquer
borda da tabela para que ela fique selecionada e então altere a visualização
para o código, em seguida copie o código que foi gerado. Segue o exemplo
na Figura 31:
19
Figura 31 – Copiando o código
Após copiar o código, ele deverá ser colado no bloco de notas e a
seguir ser salvo na pasta “tab”, que foi criada anteriormente dentro da
pasta “img” com a extensão “.txt” e seguir a nomeação padrão que é usada
em imagens usando: “número do artigo + número da tabela”. Neste
exemplo fica “a10tab05.txt”. Segue o exemplo a seguir:
20
Figura 32 – Salvando a imagem
3. CASO DE CABEÇALHO E CORPOS DA TABELA
Os modelos de tabela não serão sempre os mesmos, portanto há
casos em que o modelo da tabela pode ser um pouco diferente. O
responsável pela conversão deve sempre garantir que a informação da
tabela convertida esteja igual a do pdf, inclusive seus modelos. Então serão
mostrados alguns métodos para fazer com que as tabelas fiquem iguais as
do pdf.
3.1.1 CABEÇALHO DA TABELA EXTENSO
Há casos em que os cabeçalhos serão mais extensos que o normal,
nesse caso é necessário a alteração do layout, a figura 33 mostra a tabela
que será usada como exemplo.
21
Figura 33 – Cabeçalho com quebras de linha
Neste exemplo temos um cabeçalho com mais linhas e uma divisão a
mais do que o caso mostrado como exemplo anteriormente. Abra o seu
modelo
de
tabela
normalmente
(“Y:\SciELO_team\XML_PMC\Conversao\Tabelas\ModeloTabela.html”), comece deixando a estrutura igual à desejada.
Comece inserindo o número de colunas normalmente, neste caso fica
cinco colunas como mostra a figura a seguir:
Figura 34 – Colunas do cabeçalho
O Próximo passo para deixar a estrutura igual à desejada, é inserir as
linhas. Em nosso cabeçalho temos quatro linhas, mas nesse caso as
propriedades da tabela não serão modificadas, pois mesmo que depois as
tags sejam alteradas de <TD> para <TH>, ficariam fora da tag <thead>.
Portanto devem ser inseridas manualmente.
Para isso deve-se clicar em qualquer célula da linha do cabeçalho e
pressionar o atalho no teclado Ctrl+M para que seja inserida a linha.
Neste caso são inseridas mais três. A tabela ficará da seguinte
maneira:
Figura 35 – Linhas do cabeçalho
22
O próximo passo será a inserção dos dados do cabeçalho. Segue na
figura a tabela com os dados inseridos:
Figura 36 – Cabeçalho com dados
Agora que os dados foram colocados o próximo passo será mesclar as
células que forem necessárias, nesse caso só precisará mesclar um
conteúdo.
Para mesclar as células deve-se seguir os seguintes passos:
 Selecionar as células desejadas
Para isso é necessário segurar a tecla Ctrl e clicar nas células
desejadas. A tabela deverá ficar assim:
Figura 37 – Seleção das células
 Mesclar as células selecionadas
Com as células selecionadas, basta usar o atalho do teclado
Ctrl+Alt+M. A tabela ficará assim:
23
Figura 38 – Células mescladas
O último detalhe para que o cabeçalho fique correto será inserir a
borda abaixo da célula para que seja feita a divisão no cabeçalho.
Para isso coloque um atributo dentro da tag, o atributo que deve ser
inserirido será
style="border-bottom: thin solid; border-color: #000000"
Clique na célula para remeter ao código fonte (Figura 39), após isso
coloque o atributo style="border-bottom: thin solid; border-color:
#000000" (Figura 40)
Figura 39 – Indo ao código fonte
24
Figura 40 – Inserindo atributo style
Nota: Tome muito cuidado para que o atributo que será colado não fique
junto com o nome anterior, caso isso aconteça o atributo não funcionará.
Esse atributo acrescenta uma linha abaixo da célula, fazendo assim a
divisão correta.
Dessa forma, o cabeçalho está finalizado e seguem-se normalmente
os procedimentos restantes do corpo da página.
3.1.2 CABEÇALHO COM FUNDO
Há cabeçalhos que possuem cor de fundo cinza, conforme a tabela
mostrada na figura a seguir:
25
Figura 41 – Cabeçalho com cor de fundo
Para alcançar esse resultado, deve ser inserido na tag <TR> (que
representa a linha) o seguinte atributo:
style="background: #D3D3D3"
A figura a seguir mostra a linha com o atributo inserido
Figura 42 – Inserindo cor de fundo no cabeçalho
3.2 CORPOS DA PÁGINA
Da mesma forma que os cabeçalhos, a estrutura das tabelas podem
ter algumas variedades em suas estruturas que devem ser atendidas.
3.2.1 Subtítulos
Esta tabela é dividida em subtítulos que devem estar com a tag de
título <th> em vez de <td>. Na figura a seguir há o modelo do pdf.
26
Figura 43 – Tabela com subtítulos
Para alterar a célula de <TD> para <TH>, basta clicar na célula
desejada e marcar a opção “Cabeçalho” que aparece nas propriedades,
como mostra a figura abaixo:
Figura 44 – Subtítulos
Para finalizar, a tag deverá estar com o atributo a seguir para que
sejam inseridas as linhas acima e abaixo.
style="border-color: #000000; border-bottom: thin solid; bordertop: thin solid"
Atenção: Tome o mesmo cuidado que se tem com os cabeçalhos
quando são inseridos os atributos.
27
3.2.2 Espaço em branco
Exemplo:
Figura 45 - Tabela com espaço em branco
Observe que esta tabela está dividida, mas não foi dividida com
subtítulos e sim com espaçamento no começo das linhas.
Para isso, deixe uma célula em branco para representar esse espaço
e a célula que não tem o espaçamento deverá estar mesclada em duas
colunas.
A tabela deverá ter uma coluna a mais, neste caso, 14 colunas ao
invés de 13. Esta tabela é estruturada da seguinte forma:
28
Figura 46 - Estrutura da tabela com espaçamento
Ao inserir a propriedade width na tag <colgroup> com esse modelo
de tabela, a primeira coluna (Em branco) ficará distante da segunda coluna.
Para que o erro seja corrigido, deverá ser especificada a porcentagem
no “width” em <colgroup>, porém no primeiro <col /> deve ser inserido
width=1%, como mostra na figura a seguir.
Figura 47 – Alterando “width” da segunda coluna
29
Apêndice
Layout de tabelas para auxílio na codificação:
<table frame="hsides" rules="groups">
<colgroup width="%">
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead style="border-bottom: thin solid; border-top: thin solid; bordercolor: #000000">
<tr>
<th align="center">Cabeçalho da Tabela</th>
<th align="center"> </th>
</tr>
<tr>
<th align="center">Seg. Nivel Cabeçalho</th>
</tr>
</thead>
<tbody style="border-color: #000000; border-bottom: thin solid">
<tr>
<td>Dados da Tabela</td>
<td align="center">Dados da Tabela</td>
<td align="center"> </td>
</tr>
<tr>
<td> </td>
30
<td align="center"></td>
</tr>
</tbody>
</table>
31

Scientific Electronic Library Online Manual de Codificação

Transcrição

Documentos relacionados

http://scholar.google.com.br

disponível em

História do uso dos recursos naturais

Mais visibilidade para a ciência brasileira

Formulário para avaliação de periódicos para ingresso na SciELO

Referências Bibliográficas Educação Física

A LIDERANÇA EXERCIDA NA ÁREA DA SAÚDE Graciele de

do Resumo Completo

SciElo

políticas públicas - Educação Coletiva