Projeto Kali

Página desenvolvida com base no tema Creative de Start Bootstrap.

Dev

Organização de código

Cada página do site é descrita pelos arquivos .html presentes na pasta principal do repositório: index.html, participe.html, sobre.html e google101861cb5388fd7c.html.

Essas são as páginas que serão disponibilizadas publicamente e podem ser acessadas no link https://projetokali.github.io/.

Cada uma dessas páginas é escrita seguindo o modelo de layouts do Jekyll.

Por sua vez, os arquivos de layout estão definidos na página _layouts.

Um arquivo de layout é como o esqueleto de uma página, nele podemos ver em mais detalhes como uma página é montada.

Finalmente, um arquivo de layout é composto por vários arquivos html da pasta _includes.

Os arquivos da pasta _includes descrevem componentes básicas do site, como por exemplo o arquivo _includes/contact.html descreve a seção de contatos que pode ser vista em todas páginas do site:

Organização de dados

As imagens utilizadas no site estão todas organizadas sob a pasta img, enquanto que as fontes (como a "DJB Chalk It Up") estão na pasta fonts.

Informações básicas do projeto e links importantes estão definidos em _config.yml.

Para redefinir, por exemplo, o link do formulário de inscrição de novos voluntários, basta mudar o valor de form_inscricao_voluntario mostrado a seguir:

[...]
facebook_url: "https://www.facebook.com/projetokali"

form_inscricao_voluntarios: "https://docs.google.com/forms/d/1ynp4C2z2nJff9wr5wSMIICFE4u2E2ehYPRh6jJpRAJs/viewform?edit_requested=true"
form_inscricao_alunos: "https://docs.google.com/forms/d/e/1FAIpQLSf2lxWhkuF1ROEvdannhD7AZ0HXx8jg7_J9SPjPc41yyNns9A/viewform"

n_voluntaries: "40"
[...]

Neste mesmo arquivo se encontram também informações como o número de voluntáries, alunes e turmas do projeto.

Instalação

Instalar Ruby, Bundler, Jekyll e html-proofer.

No windows, você pode fazer isso instalando o RubyInstaller. Após isso, rode no terminal:

gem install jekyll bundler html-proofer

Para testar se a instalação do jekyll aconteceu com sucesso, rode no terminal:

jekyll --version

Se instalado corretamente deve-se receber em resposta a versão do programa instalado, do seguinte modo:

jekyll 4.1.0

Desenvolvendo localmente

Para rodar localmente o site:

jekyll serve

Se tudo rodou corretamente uma mensagem lhe indicará que o site pode ser acessado no endereço http://127.0.0.1:4000/.

Testando localmente

Após realizar as modificações desejadas no código, você pode também usar a ferramenta htmlproofer para testar se o site continua funcionando como esperado.

Para isso basta rodar:

jekyll build
htmlproofer ./_site/

O primeiro comando, jekyll build gera os documentos html finais que compõem o site e salva os mesmos na pasta _site/. Já o segundo comando realiza uma varredura nos arquivos gerados, checando coisas como:

• Se os links internos e externos do site estão apontando para páginas válidas
• Se as imagens tem texto 'alt' (texto usado nos leitores de tela)
• Se os ícones de site (favicon) são carregados com sucesso
• Se os scripts do site internos e externos podem ser executados
• Entre outros...

Bugs comuns

• htmlproofer não encontra módulos libcurl

$ htmlproofer ./_site
[...]
Could not open library 'libcurl.dll': The specified module could not be found.
.
Could not open library 'libcurl.so.4': The specified module could not be found.
.
Could not open library 'libcurl.so.4.dll': The specified module could not be found.

Solução do stack overflow