Sumário

• Introdução;
• Fundamentação Teórica;
• Metodologia de Pesquisa;
• Modelagem do Sistema;
• Tecnologias e Ferramentas Utilizadas;
• Descrição do Sistema;
• Considerações Finais.

1

Introdução

• Segurança;
• Desempenho;
• Praticidade.

2

Introdução

Justificativa

Notou-se que muitos dos sistemas semelhantes são difíceis de instalar, não suportam certos sistemas operacionais como Windows, possuem configurações complexas ou são muito complicados de utilizar.

Assim, constatou-se a necessidade de um gerador de sites estáticos multiplataforma, eficiente e prático.

3

Introdução

Objetivos

• Facilitar o gerenciamento de conteúdo de sites estáticos;

• Criar uma nova ferramenta de geração de sites estáticos multiplataforma, eficiente e fácil de instalar;
• Explorar os novos recursos e propostas da linguagem JavaScript.

4

Introdução

Contexto de Pesquisa

• Quando surgiu a ideia do projeto;
• Equipe mantenedora.

5

Fundamentação Teórica

• Crescimento e adoção dos sites estáticos;
• Diferenças entre sites estáticos e dinâmicos;
• Benefícios do projeto Harmonic.

6

Fundamentação Teórica

Características	Sites estáticos	Sites dinâmicos
Páginas são servidas diretamente do disco para a rede	Sim	Não
Conseguem buscar páginas inteiramente do cache do navegador	Sim	Não
Necessitam de banco de dados instalado no servidor	Não	Sim
Necessitam de uma linguagem de programação instalada e configurada no servidor	Não	Sim
Executam lógica de programação no servidor, podendo haver falha de segurança e permitindo invasão hacker	Não	Sim
São gerenciáveis	Sim, através de um gerador de sites estáticos	Sim, através de um CMS ( Content Management System)

7

Metodologia de Pesquisa

A ideia do projeto é explorar uma nova forma de criar sites, fora do usual que são os sites dinâmicos, os quais possuem banco de dados, programação no servidor.

Através da participação na comunidade JavaScript, surgiu a ideia de criar um gerador de sites estáticos, que oferecesse uma forma mais simples, eficiente e prática de criar sites estáticos.

Também foi fundamental estudar sistemas semelhantes para o desenvolvimento e evolução do projeto.

8

Metodologia de Pesquisa

Foram avaliadas quatro sistemas semelhantes, sendo eles:

• Jekyll;
• Metalsmith;
• Hugo;
• Hexo.

9

Metodologia de Pesquisa

Jekyll

É um dos geradores de sites estáticos mais conhecidos, porém não suporta o sistema operacional Windows oficialmente.

 

O Harmonic suporta todos os principais sistemas operacionais.

10

Metodologia de Pesquisa

Metalsmith

É um gerador de sites estáticos que funciona a partir da composição de plugins, permitindo um alto nível de personalização de funcionalidades. No entanto, isto torná-o mais difícil de utilizar para casos de usos mais simples.

 

O Harmonic conta com todos os recursos essenciais para o gerenciamento do site estático sem necessitar de configurações extras nem instalações de plugins.

11

Metodologia de Pesquisa

Hugo

É um gerador de sites estáticos muito robusto e capaz, porém a grande variedade de recursos e conceitos torna-o mais complexo e difícil de utilizar.

 

O Harmonic visa sempre minimizar o trabalho necessário para ser instalado e utilizado.

12

Metodologia de Pesquisa

Hexo

É um gerador de sites estáticos muito simples e eficaz, porém isso também significa que vários recursos essenciais requerem a utilização de plugins de terceiros.

 

O Harmonic almeja o equilíbrio entre complexidade e praticidade, mantendo todos as funcionalidades essenciais em seu core.

13

Modelagem do Sistema

Para a modelagem do sistema, foi utilizado o UML para modelagem dos requisitos e do comportamento dos processos no sistema.

14

Modelagem do Sistema

Para este trabalho foram elaborados três diagramas, os quais são:

• Diagrama de Sequência;
• Diagrama de Casos de Uso;
• Diagrama de Classes.

15

Diagrama de sequência da execução do site estático

Fonte: elaborado pelo autor

16

Descrição do Sistema

O projeto Harmonic é dividido em 8 módulos:

1. Módulo de Criação de um Site Estático;
2. Módulo de Configuração do Site Estático;
3. Módulo de Criação de Posts;
4. Módulo de Criação de Páginas;
5.  Módulo de Geração do Site Estático;
6. Módulo de Execução do Site Estático;
7. Módulo de Utilização de Temas;
8.  Módulo de Ajuda.

18

Descrição do Sistema

Módulo de Criação de um Site Estático

Permite a criação de um novo site estático do Harmonic.

Realiza uma série de questionamentos sobre as configurações iniciais e cria a estrutura inicial do site.

19

Módulo de criação de um site estático

Fonte: elaborado pelo autor

20

Descrição do Sistema

Módulo de Configuração do Site Estático

Permite configurar um site estático do Harmonic, através de uma série de questionamentos.

O usuário pode, também, editar o arquivo de configurações em um editor de texto.

21

Descrição do Sistema

Módulo de Criação de Posts

Permite a criação de posts em um site estático do Harmonic.

Posts possuem conteúdo em formato Markdown/HTML e um cabeçalho de meta-informações.

22

Descrição do Sistema

Módulo de Criação de Páginas

Permite a criação de páginas em um site estático do Harmonic.

Páginas são ideias para o desenvolvimento de quaisquer conteúdos personalizados do site, como por exemplo, informações sobre o site, perfis de autores, galerias de imagens e vídeos.

23

Descrição do Sistema

Módulo de Geração do Site Estático

Permite gerar os arquivos "compilados" (HTML, JS, CSS, RSS) a partir dos arquivos fonte do site (conteúdo Markdown, configurações e tema selecionado).

24

Descrição do Sistema

Módulo de Execução do Site Estático

Permite criar um servidor local no computador do usuário para pré-visualização de seu site estático gerado.

Pode ser utilizado, também, durante a criação de conteúdos com o recurso de auto-recarregamento, permitindo a visualização do conteúdo conforme é criado.

25

Site gerado com o tema padrão

Fonte: elaborado pelo autor

26

Descrição do Sistema

Módulo de Utilização de Temas

Temas permitem personalizar a aparência e determinadas funcionalidades do site.

Temas podem ser instalados a partir do gerenciador de pacotes npm, ou desenvolvidos a partir de temas já existentes.

27

Site gerado com o tema JS Rocks

Fonte: elaborado pelo autor

28

Descrição do Sistema

Módulo de Ajuda

Lista todos comandos do Harmonic, com uma breve descrição de cada um e sua sintaxe.

Existe, também, a documentação completa online.

29

Módulo de ajuda

Fonte: elaborado pelo autor

30

Considerações Finais

• Potencial e mercado para sites estáticos;
• Vantagens (praticidade, suporte multiplataforma, e código acessível de forma gratuita);
• Este trabalho só foi possível devido ao estudo de projetos semelhantes, que ajudaram a definir o escopo e objetivos do projeto.

31

Considerações Finais

Resultados Obtidos e Discussões

Conforme os objetivos já destacados, o Harmonic atende o propósito de explorar todas as novas funcionalidades do JavaScript, e propõe um gerador de sites estáticos funcional e prático.

32

Considerações Finais

Resultados Obtidos e Discussões

Como discussão o presente trabalho tem apresentado uma boa aceitação pela comunidade, tendo cerca de 150 downloads mensais, com feedback na sua grande maioria positivo. Algumas sugestões destes usuários para melhoria deste projeto são debatidas na seção de trabalhos futuros.

33

Considerações Finais

Trabalhos Futuros

• Plugins;
• Melhorias no desenvolvimento de temas;
• Interface gráfica.

34