Ajuda sobre o projeto - lununes/coronavirus GitHub Wiki

1) Trabalhando com o GitHub:

O GitHub é uma plataforma de hospedagem de código-fonte com controle de versão. Nela, podem ser compartilhados projetos públicos e privados.

  1. O primeiro passo é criar uma conta no GitHub. Faça isso acessando a Página do Github.
  2. Uma vez criada a conta, informe seu usuário para que seja possível permitir o acesso à este projeto.
  3. Baixe o GitHub Desktop e instale.
  4. Com o acesso já fornecido pelo moderador, entre no GitHub Desktop e clique no botão Adicionar > Clonar repositório. Uma janela com a lista de repositórios existentes na sua conta aparecerá. Selecione o repositório coronavirus e observe o caminho da pasta local onde os arquivos serão criados.
  5. Após a clonagem, observe na sua pasta local a estrutura de pastas: css, img, js, lib. Os arquivos em html deverão ficar na raíz desta pasta clonada.

Atualizando os arquivos no repositório:

Em seu GitHub Desktop, você verá na parte superior o nome do repositório e o branch que está operando (master):

Ao atualizar qualquer arquivo na sua pasta local do projeto, ele aparecerá na área da lateral esquerda da sua janela. Clique no botão "commit to master". Não de esqueça de dar um título e, caso deseje, a descrição. Dar um título é importante porque é ele que aparece no seu histórico de atualizações.

Comitado o projeto, aparecerá uma solicitação para que você empurre este commit para o repositório do Git, conforme a imagem a seguir. Basta clicar neste campo que ele executará esta ação:

Pronto! Sua atualização foi uplodeada para o repositório!

Para verificar se há atualizações no projeto, clique em "fetch origin". Se houver alguma atualização, ela aparecerá juntamente com uma solicitação para que você puxe as alterações que estão no ar para sua pasta local (pull from origin).

2) Visualizando o conteúdo no ar: Github Pages:

Link para acessar as páginas deste projeto: https://lununes.github.io/coronavirus/

Cada aula será 1 arquivo html. Para visualizar o link de 1 aula, o endereço será: https://lununes.github.io/coronavirus/aula1.html

Link para acessar a página modelo com alguns recursos visuais: https://lununes.github.io/coronavirus/tutorial/modelo.html

Link para acessar exemplo de uma aula: https://lununes.github.io/coronavirus/tutorial/aula1.html

3) Sobre a grid utilizada

Neste projeto estamos utilizando o Bootstrap 4.4 para construção das páginas. São utilizadas 12 colunas, responsivas, com alguns breakpoints específicos de acordo com determinadas resoluções de tela (telas pequenas como de smartphones, tablets, desktops pequenos e grandes). Para maiores informações, veja [a documentação no site do bootstrap] (https://getbootstrap.com/docs/4.4/layout/overview/)

3) Sobre a organização das bibliotecas de CSS e JS

Para organizar visualmente a página foi elaborado 1 css geral da página chamado style.css. Nele configuramos a formatação de elementos como parágrafos, títulos, links, fundos etc.

Para organizar os recursos visuais (isto é: accordions, boxes, linha do tempo, passafotos etc) foi criado um 1 css chamado style-visual-resources.css.

Os arquivos JS são, na maior parte do tempo, chamados no final da página. O objetivo é se certificar que os objetos já tenham sido criados na página quando forem solicitados através do código js.

4) Sobre as animações dos elementos

As animações utilizam a biblioteca AOS - Animate on Scroll. Para utilizá-la, basta incluir o atributo data-aos="NOME-DA-TRANSICAO" ao elemento html que desejar.

Ex: <div data-aos="fade-in" data-aos-duration="4000"></div>

Os nomes das transições estão na página da Biblioteca mencionada acima. É possível configurar também outras características, como a duração da animação. Para maiores detalhes, acesse: https://github.com/michalsnik/aos#animations