Sobre o Projeto
Este projeto tem como objetivo estabelecer um repositório privado e exclusivo para os colaboradores do departamento de web da AICOM (Agência Integrada de Comunicação e Marketing). Seu propósito primário é servir como plataforma para a publicação do código-fonte das páginas de captura, também conhecidas como landing pages. Essas páginas são essenciais para atrair visitantes, capturar seus dados e convertê-los em leads para a instituição.
Os benefícios desse projeto podem ser resumidos da seguinte forma:
- Provisão de um ambiente seguro e dedicado para a equipe do departamento de web hospedar o código-fonte.
- Facilitação do processo de publicação contínua e automatizada, conhecido como deploy CI/CD, das páginas de captura.
- Fornecimento de documentação detalhada sobre as melhores práticas e recomendações no contexto da web, contribuindo para um desenvolvimento mais eficiente e alinhado 😉
Para a Equipe de Desenvolvedores
Este projeto adota um aplicativo externo desenvolvido pela Amazon Web Service (AWS) para facilitar a leitura de todos os repositórios relacionados. No GitHub, apenas o permissionamento de leitura é necessário.
Na infraestrutura da AWS, é utilizada a conexão GitHub V2 para o repositório, integrando-se ao AWS Amplify.
Na camada da AWS, o Amplify é configurado como um aplicativo mobile/web, considerando o código da branch principal, denominada “main”. Após a leitura do repositório, o Amplify captura as últimas alterações publicadas, atualizando seus próprios endpoints e os de domínio gerenciado. A publicação final ocorre por meio de uma distribuição global no CloudFront, que é auto-gerenciada. O cache do CloudFront é atualizado de acordo com as políticas definidas no Amplify. Ao configurar o(s) domínio(s) gerenciado(s), um endpoint global do CloudFront é fornecido, que deve ser conectado ao domínio configurado por um registro CNAME no provedor Router 53.
Saiba mais em README.md sobre esse processo.
Vamos começar!
O conteúdo a seguir fornece um tutorial abrangente, desde a criação da landing page até a exportação e publicação no presente repositório. É crucial seguir cada etapa detalhadamente, assegurando a conformidade com as melhores práticas estabelecidas pela equipe de TI-DESENVOLVIMENTO que concebeu este processo. Este passo a passo é essencial para garantir a consistência e integridade do procedimento, além de contribuir para a eficácia e desempenho otimizado da landing page.
Pré Requisitos
Para prosseguir com as etapas seguintes, é imprescindível contar com a presença da ferramenta de versionamento “git” e do aplicativo “Github Desktop” devidamente instalados em sua máquina. Para atender a esse requisito, você pode executar os seguintes comandos:
- ferramenta git (Windows):
winget install –id Git.Git -e –source winget - ferramenta git (Linux / MacOS):
$ sudo apt install git-all
$ git –version
Desenvolvimento
Para simplificar e agilizar a criação das landing pages, foi criado um ambiente WordPress com o plugin Elementor Pro, hospedado na infraestrutura do UNASP. Este ambiente está disponível através do endereço abaixo. É estritamente desaconselhável divulgar este endereço eletrônico a qualquer pessoa que não faça parte da equipe AICOM – WEB. A seguir, apresenta-se o passo a passo:
- Acesse Development LP
- Faça login com suas credenciais.
- No menu lateral, vá até a guia “Páginas”.
- Crie uma nova página, inserindo o nome da página, e clique em “Editar com Elementor”.
- Utilize os componentes pré-configurados do Elementor e Elementor Pro para personalizar sua landing page conforme desejado. Sinta-se à vontade para personalizá-los.
- Ao concluir, clique no botão “Publicar” no menu inferior do Elementor.
- Retorne ao menu do WordPress e acesse a guia “Export WP Page to Static HTML/CSS”.
- Selecione a página recém-criada no campo e clique em “Exportar”. Uma barra de progresso será exibida.
- Aguarde a conversão da página em arquivos estáticos. Após a exportação, um botão de download será disponibilizado. Clique para baixar os arquivos.
- Abra o arquivo com a extensão “.html” em seu navegador e verifique se todo o conteúdo foi baixado corretamente. Certifique-se de que o arquivo está nomeado como “index.html”, pois o sistema o reconhece como o arquivo principal.
- Mova os arquivos gerados para sua pasta no GitHub.
- Opcional: Abra seu editor de código e faça alterações manuais, se necessário.
- No aplicativo “Github Desktop”, verifique suas alterações. Se os novos arquivos estiverem listados, adicione um título ao seu commit e uma descrição semântica que reflita o conteúdo do código. O título ao commit deverá ser significativo ao commit realizado, não aceitando títulos genéricos.
- Clique em “Push Origin”.
Obrigações a serem seguidas:
- Compartilhamento de Credenciais: Sob nenhuma circunstância devem ser compartilhadas credenciais de login e senha para acesso ao sistema. Apenas o departamento de TI – Desenvolvimento está autorizado a realizar alterações de permissões, papéis de usuários e criação de novos usuários para o ambiente de desenvolvimento.
- Divulgação do Endpoint: O endpoint do ambiente de desenvolvimento das landing pages não deve ser divulgado publicamente. Embora seja acessível através de VPN, este ambiente não está preparado para receber acesso do público em geral. Ele é destinado exclusivamente aos colaboradores responsáveis pela construção das páginas.
- Upload de Arquivos Desconhecidos: É proibido fazer o upload de arquivos desconhecidos, como SVGs baixados da internet sem fontes confiáveis ou códigos-fonte de linguagens como PHP, JavaScript, Java, Go, etc.
- Nomes Genéricos de Arquivos: O upload de arquivos com nomes genéricos, como “whatsappmedia”, “screenshot”, “AnyConvert”, não é permitido. Esses arquivos serão deletados no início de cada mês para garantir uma organização mais semântica e estética nos endpoints de CDN de mídias.
- Conflitos entre Páginas: Para evitar conflitos entre as landing pages, é proibido o uso de definições de assets globais, garantindo assim a independência e organização de cada página.
-
Redirecionamento de Endereços, “Redirects”: O uso excessivo ou inadequado de redirecionamentos pode causar diversos problemas para um site, incluindo o afetamento do Desempenho do Site e do Servidor (ERR_TOO_MANY_REDIRECTS), além de impactar a Experiência do Usuário, o SEO e a Complexidade Técnica. Por essas razões, o departamento de Tecnologia da Informação será responsável pelo gerenciamento dos redirecionamentos, uma vez que temos o controle necessário para lidar de forma precisa com os cabeçalhos das solicitações e garantir a entrega do código HTTP correto. Isso é essencial para manter a integridade e o bom funcionamento do nosso ambiente digital.
Uso
Para obter mais exemplos ou esclarecer dúvidas, consulte a documentação completa em: Documentation
License
Distributed under the MIT License. See LICENSE.txt for more information.
Contato
Ao solicitar suporte, é crucial observar atentamente os seguintes itens:
- Destinatário do e-mail: Contato para Suporte – suporte.sistemas@unasp.edu.br
- Assunto: “WEB – LandingPages – “Seu assunto de preferência.”
- No corpo do e-mail, deverá incluir todas as informações pertinentes ao ocorrido, como prints e demais detalhes relevantes.
Link do Projeto: https://github.com/unasp-dev-team/unasp-landingpages