Ajustar estrutura HTML/CSS/JS do template de artigo para seções de contribuições, edição e menu lateral

[ramoncordini]

Descrição da tarefa

Ajustar estrutura HTML/CSS/JS do template de artigo para seções de contribuições, edição e menu lateral

Arquivo para referencia

html-aplicados-css-e-js-adequados.zip

Contexto

Foi identificado que o template recebido gera algumas seções do artigo com estrutura HTML antiga/inadequada, especialmente nos blocos de Contribuições e Editado por.

Também foi necessário alinhar o HTML gerado com a estrutura aprovada no layout atualizado do artigo SciELO, usando os arquivos ajustados manualmente como referência.

Arquivos analisados:

• Template recebido
• Arquivos ajustados no diretório Ajuste Ramon

---

1. Atualizar CSS e JS utilizados no template

Remover scripts antigos

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ds.scielo.org/js/bootstrap.bundle.min.js"></script>
<script src="https://ds.scielo.org/js/scielo/scielo-ds-min.js"></script>

Adicionar scripts atuais usados em produção

<script src="https://www.scielo.br/static/js/scielo-bundle-min.js"></script>
<script src="https://www.scielo.br/static/js/scielo-article-min.js"></script>

Atualizar versão do Design System

Utilizar a versão mais recente do Design System:

<link href="bootstrap.css?v=1.1.32" rel="stylesheet"/>
<link href="article.css?v=1.1.32" rel="stylesheet"/>

---

2. Ajustar articleMenu

O menu lateral deve respeitar a estrutura gerada a partir das seções do artigo.

A estrutura base permanece:

<nav class="col-12 col-md-4 col-lg-3">
    <ul class="articleMenu list-group mt-4"></ul>
</nav>

O JavaScript do artigo deverá preencher automaticamente o menu utilizando as seções .articleSection e seus respectivos atributos data-anchor.

Ao ajustar as seções descritas abaixo, garantir que o data-anchor represente corretamente o título exibido no <h2>, pois ele será utilizado para montar os itens do menu.

---

3. Utilizar o título da seção vindo do XML

Quando o XML fornecer um título específico para a seção, esse título deve substituir completamente o título genérico do template.

Não deve acontecer

<h2 class="h5">Contributions</h2>

<span class="xref big">AUTHOR'S CONTRIBUTIONS</span>

Existem dois títulos representando a mesma seção.

Deve ficar assim

<h2 class="h5">AUTHOR'S CONTRIBUTIONS</h2>

O conteúdo existente dentro do bloco (por exemplo span.xref.big) deve ser utilizado como título da seção, evitando duplicidade.

Essa regra vale para qualquer seção equivalente, por exemplo:

• Contributions
• Author's Contributions
• Contribuições
• Contribuição de autoria
• Edited by
• Editado por
• Outras seções semelhantes vindas do XML

---

4. Ajustar bloco "Contribuições"

Estrutura antiga

Hoje o template gera algo semelhante a:

<div class="articleSection" data-anchor="Contribuições">
    <h2 class="h5">Contribuições</h2>

    <div class="row">
        <div class="col">
            <ul class="refList articleFootnotes">
                <li>
                    <span class="xref big">CONTRIBUIÇÕES DOS AUTORES</span>

                    <div>Desenho do estudo. Glicinia Elaine Rosilho Pedroso...</div>
                    <div>Coleta ou produção dos dados...</div>
                    <div>Análise de dados...</div>
                </li>
            </ul>
        </div>
    </div>
</div>

Nova estrutura

A estrutura deve utilizar articleSectionList:

<div class="articleSection" data-anchor="Contribuições">

    <h2 class="h5">Contribuições</h2>

    <div class="row">
        <div class="col">

            <ul class="articleSectionList">

                <li>
                    <strong>Desenho do estudo</strong>
                    Glicinia Elaine Rosilho Pedroso, Ana Paula Rigon Francischetti Garcia, Luciana de Lione Melo.
                </li>

                <li>
                    <strong>Coleta ou produção dos dados</strong>
                    Glicinia Elaine Rosilho Pedroso.
                </li>

                <li>
                    <strong>Análise de dados</strong>
                    Glicinia Elaine Rosilho Pedroso, Ana Paula Rigon Francischetti Garcia, Luciana de Lione Melo.
                </li>

            </ul>

        </div>
    </div>

</div>

Regra de renderização

Cada contribuição deve ser renderizada como um <li> independente.

O conteúdo deverá sempre ficar organizado em:

Função
Responsáveis

Exemplo:

<li>
    <strong>Desenho do estudo</strong>
    João, Maria e Pedro.
</li>

---

Quando o XML vier invertido

Em alguns XMLs a informação vem organizada como:

Pessoa → Função

Exemplo:

<li>
    <strong>John H. Livingston</strong>
    Conceptualization · Investigation · Data analysis · Writing – original article
</li>

Nesse cenário a estrutura deve ser preservada.

Ou seja:

• uma pessoa por <li>
• nome em <strong>
• funções como conteúdo do item

---

5. Ajustar bloco "Editado por"

Estrutura antiga

Hoje o template gera:

<ul class="refList articleFootnotes">

    <li>

        <span class="xref big">EDITOR ASSOCIADO</span>

        <div>

            <a class="btnContribLinks orcid">
                ...
            </a>

            <p>Nome</p>

        </div>

    </li>

</ul>

Nova estrutura

Passar a utilizar articleSectionList:

<div class="articleSection" data-anchor="Editado por">

    <h2 class="h5">Editado por</h2>

    <div class="row">
        <div class="col">

            <ul class="articleSectionList">

                <li>

                    <strong>Editor associado</strong>

                    <p>

                        Aline Cristiane Cavachilli Okido

                        <br>

                        <a
                            class="btn btn-secondary orcid-button mt-2"
                            href="https://orcid.org/0000-0003-4309-5612">

                            https://orcid.org/0000-0003-4309-5612

                        </a>

                    </p>

                </li>

            </ul>

        </div>
    </div>

</div>

Regras

Cada tipo de editor deve ser renderizado em um item independente.

A estrutura esperada é:

<ul class="articleSectionList">

    <li>

        <strong>Tipo do editor</strong>

        <p>

            Nome

            <br>

            ORCID

        </p>

    </li>

</ul>

Substituir a classe antiga:

btnContribLinks orcid

por:

btn btn-secondary orcid-button mt-2

---

6. Critérios de aceite

• Atualizar o template para utilizar o Design System 1.1.32.
• Atualizar os arquivos JavaScript para os utilizados atualmente em produção.
• Não gerar dois títulos para a mesma seção.
• O título vindo do XML deve substituir completamente o título genérico do template.
• O data-anchor deve refletir corretamente o título exibido na seção.
• O articleMenu deve continuar funcionando corretamente com as novas seções.
• As seções de contribuições devem utilizar articleSectionList (ou articleTimeline, quando aplicável), e não refList articleFootnotes.
• Cada contribuição deve ocupar um <li> independente.
• Quando o XML estiver organizado como Função → Pessoas, renderizar <strong>Função</strong> seguido pelos responsáveis.
• Quando o XML estiver organizado como Pessoa → Funções, renderizar <strong>Pessoa</strong> seguido das respectivas funções.
• A seção "Editado por" deve utilizar articleSectionList.
• Os links de ORCID devem utilizar a classe btn btn-secondary orcid-button mt-2.
• O resultado final deve ser equivalente ao HTML existente no diretório Ajuste Ramon.

---

7. Observação importante

Os arquivos HTML ajustados manualmente servem apenas como referência da estrutura esperada.

A implementação deve ser realizada no template (transformação XML → HTML), garantindo que qualquer artigo gerado passe a produzir automaticamente a nova estrutura, sem necessidade de ajustes manuais posteriores.