ribafs / index

Alguns dos meus principais repositorios

Criação de um site em HTML estático

De forma prática

Partindo do site criado no tutorial citado ao final (gratidão aos autores)

Este site destina-se a listar por categorias, todos os meus repositórios, inclusive os forks no Github. Como hoje, 08/11/2022, existem 909 repositórios na minha conta, sendo 130 meus e os demais forks, fica muito trabalhoso percorrer ou pesquisar por repositórios. Então resolvi criar um repositório com o nome index e listar todos os repositórios agrupados por categorias. Então, durante a elaboração resolvi criar uma Github page para o mesmo. Procurei um tutorial sobre a criação de um site com Bootstrap, pois para mim é a solução mais prática. Então encontrei o tutorial do link acima, que contém os arquivos para download. Este me agradou especialmente por dois motivos, por ser relativamente simples (seu CSS/BS) e especialmente por ser responsivo.

Acesse

https://ribafs.github.io/index

Projeto do site

Categorias

Front-end Back-end Mobile DevOps Servidores Nocode Cursos Ferramentas Extra

Deixarei todos os arquivos no raiz para facilitar meu trabalho.

Metodologia

A forma mais prática que encontrei para a construção foi usando o método load() do jQuery. Assim fica similar ao include do PHP, não repito código e reduzo meu trabalho.

Criarei uma pasta includes e dentro dela:

• header.txt - contendo o head, os links e o menu, até a tag
• footer.txt, da tag pra baixo

O texto que ficará no body estará dentro das tags

e

Troquei os arquivos dos assets pelos respectivos CDN, para facilitar apra mim, exceto main.css e main.js.

Durante a construção tive que realizar vários ajustes no template original para adaptar ao meu conteúdo, mas sempre tendo o cuidado de manter o mesmo responsivo.

O uso do método load precisa ser no diretório web, pois se for executado fora dele, não funciona e receberemos erro no console:

"Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto em file:///backup/transp/index/includes/header.txt (motivo: requisição CORS não é http)."

Conteúdo

A forma mais produtiva de criação de sites que já experimentei é usando o CMS Joomla. Quando vou criar um site em HTML estático ficoc procurando formas de fazer isso mais produtivo, pois relativamente é algo trabalhoso.

• Inicialmente criei uma lista em arquivo texto, por categoria, dos repositórios
• Seleciono cada grupo, copio e colo num arquivo em branco do LibreOffice Texto. Caso tenha hífens eu os removo todos com Ctrl+H
• Porque o LibreOffice? Porque com ele crio links de forma prática. Basta colocar o cursos ao final do texto e teclar espaço. Então ele cria o link
• Quando transformo todos em link, teclo Ctrl+A, Ctrl+X e vou ao editor HTML SunEditor e teclo Ctrl+V para colar os links na textarea.
• Depois de organizar um pouco eu clico no botão para exibir código fonte
• Então seleciono tudo e teclo Ctrl+X
• Agora eu crio o arquivo que será o body do arquivo do site. Um exemplo: css.txt (depois o mudarei para .html). Abro o css.txt e colo o conteúdo do editor.

Este site tem como conteúdo basicamente links. No caso de conteúdo comum, com texto formatado, imagens, vídeos, etc, eu geralmente também uso o editor SunEditor para criar com conforto e exporto o código fonte.

Como crio cada arquivo

Exemplo, para criar o arquivo css.html, eu procedo assim:

<meta charset="utf-8">
<div id="header"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>$( "#header" ).load( "includes/header.txt" );</script>

		<header class="main">
			<div class="body text-center">
				<h1>CSS</h1>
			</div>
			<div class="container p">

Aqui fica a relação de links de repositórios sobre CSS

			</div>
        </header>

<div id="footer"></div>
<script>$( "#footer" ).load( "includes/footer.txt" );</script>

Problema

Esta é a melhor alternativa que encontrei de criar sites em HTML estático, mas tem um problema. O método load() do jQuery provoca este efeito blink, piscada, sempre que carrega uma página. Pesquisei bastante mas ainda não encontrei uma solução.

Crédito pelo original

https://websitesetup.org/bootstrap-tutorial-for-beginners/

Referências

https://www.umov.me/tecnologia-no-code

https://awari.com.br/linguagens-de-programacao-front-end/

https://harve.com.br/blog/desenvolvimento-web/o-que-e-backend-guia-completo/

https://www.totvs.com/blog/developers/metodologia-devops/