Criando um site HTML estático para dummies?

Navegue suas respostas
1

Minha esposa quer compartilhar uma grande quantidade de fotos antigas com seus amigos.

Algumas de suas amigas sugeriram que ela usasse o iCloud, mas sei que posso configurar o Apache e minha conexão doméstica com a Internet para veicular essas fotos - com um link de IP estático ou preferível com meu próprio nome de domínio. Eu provavelmente farei isso com meu próprio nome de domínio.

Mas é a apresentação da página que eu preciso de ajuda.

Eu preciso de um jeito simples, onde eu possa gerar um arquivo HTML que mostrará miniaturas na página de cada foto da escola, então o usuário pode clicar na foto para vê-la em tamanho maior e fazer o download dela.

Não há conteúdo ativo, sem vídeos, sem animações. É apenas uma página da Web com um único propósito para hospedar e compartilhar fotos da escola antiga.

Eu lembro que há muitos anos havia um pacote de software chamado "Netscape Communicator" e ele permitia que você criasse uma página da Web simples, como descrevi, mas não consigo encontrar nada agora no repositório que me ajudará.

Por favor, sugira uma solução que me permita concluir o processo.

Obrigado geo

    
por Geo 18.07.2017 / 06:38

1 resposta

1

Um arquivo HTML simples com várias miniaturas de imagens e links pode ser criado com bastante facilidade. Assumindo:

  • O arquivo HTML é o mesmo diretório que as imagens

  • Todas as imagens têm alguma propriedade que facilita o loop na linha de comando (todos os arquivos com extensão .jpg , por exemplo).

    Isso facilita a criação de miniaturas para eles. Você deve usar miniaturas para que as pessoas não baixem todo o conjunto de imagens apenas abrindo sua página.

Adaptando este post : 

printf "%s\n" '<!DOCTYPE html><meta charset=utf-8><title>Images</title>' > images.html
mkdir thumbs
for i in *.jpg
do
    convert "$i" -thumbnail 100 "thumbs/$i"
    printf '<a href="%s"><img src="%s" alt="%s"></a>\n' "$i" "thumbs/$i" "$i"
done >> images.html

Agora, images.html tem o HTML5 mínimo válido exibindo várias miniaturas e vinculando as imagens das miniaturas. Aponte sua instância do Apache para o diretório e atue conforme necessário.

Provavelmente você pode tentar criar uma tabela ou algo assim, mas isso deve ser suficiente.

Um exemplo usando as imagens de /usr/share/background : 

$ head images.html
<!DOCTYPE html><meta charset=utf-8><title>Images</title>
<a href="160218-deux-two_by_Pierre_Cante.jpg"><img src="thumbs/160218-deux-two_by_Pierre_Cante.jpg" alt="160218-deux-two_by_Pierre_Cante.jpg"></a>
<a href="Black_hole_by_Marek_Koteluk.jpg"><img src="thumbs/Black_hole_by_Marek_Koteluk.jpg" alt="Black_hole_by_Marek_Koteluk.jpg"></a>
<a href="Cielo_estrellado_by_Eduardo_Diez_Viñuela.jpg"><img src="thumbs/Cielo_estrellado_by_Eduardo_Diez_Viñuela.jpg" alt="Cielo_estrellado_by_Eduardo_Diez_Viñuela.jpg"></a>
<a href="clock_by_Bernhard_Hanakam.jpg"><img src="thumbs/clock_by_Bernhard_Hanakam.jpg" alt="clock_by_Bernhard_Hanakam.jpg"></a>
<a href="Dans_ma_bulle_by_Christophe_Weibel.jpg"><img src="thumbs/Dans_ma_bulle_by_Christophe_Weibel.jpg" alt="Dans_ma_bulle_by_Christophe_Weibel.jpg"></a>
<a href="Flora_by_Marek_Koteluk.jpg"><img src="thumbs/Flora_by_Marek_Koteluk.jpg" alt="Flora_by_Marek_Koteluk.jpg"></a>
<a href="Icy_Grass_by_Raymond_Lavoie.jpg"><img src="thumbs/Icy_Grass_by_Raymond_Lavoie.jpg" alt="Icy_Grass_by_Raymond_Lavoie.jpg"></a>
<a href="Night_lights_by_Alberto_Salvia_Novella.jpg"><img src="thumbs/Night_lights_by_Alberto_Salvia_Novella.jpg" alt="Night_lights_by_Alberto_Salvia_Novella.jpg"></a>
<a href="passion_flower_by_Irene_Gr.jpg"><img src="thumbs/passion_flower_by_Irene_Gr.jpg" alt="passion_flower_by_Irene_Gr.jpg"></a>

    
por muru 18.07.2017 / 06:53
Atualize o pacote do Ubuntu a partir do tarball de origem. Exemplo: gnome-terminal e VTE Como mudar o espaço de trabalho com a roda do mouse?