Tutorial Galeria HTML
Deixamos de usar a galeria do Edge para usar essa em HTML.
IMPORTANTE:
Teste a galeria no Safari ou Firefox. No Chrome não funciona.
O QUE HÁ DENTRO DA PASTA:
Você só vai precisar mexer nas pastas DADOS e IMAGES.
RESUMO:
- Adicione as imagens na pasta images/
- Abra o documento galeria.json (dentro da pasta dados) no sublime
Imagens
As imagens devem ter o tamanho de 620px x 230px
Colar as imagens na pasta img com o nome img#.png
(sendo #
o número da imagem)
galeria.json
CUIDADOS
- Sempre editar o documento depois dos dois pontos e entre aspas
"não editar aqui":"editar aqui"
- cuidado com as vírgulas! Não apague nenhuma!
- descreva todas as imagens! É importante para a acessibilidade.
1
Adicionar título da página após “titulo_pagina”, com a editoria. não é necessário por Folha de S.Paulo
"titulo_pagina":"titulo da pagina - editoria",
Adicionar título da arte após “titulo_infografia”.
Adicionar linha fina após “linha_fina”. Ela não pode ter mais que 70 caracteres. O sublime mostra quantos caracteres uma seleção tem na barra inferior.
2
O QUE VOCÊ VÊ
{
"imagem":"images/img1.png",
"descricao_imagem":"descricao da imagem",
"titulo":"titulo",
"texto":"texto"
},
- Copie o código acima quantas vezes for necessário.
- IMPORTANTE: o último código não tem vírgula depois da última chave!
- Mude o número da imagem em
img1.png
- Descreva a imagem. Não é a mesma coisa que o texto e sim uma descrição para que cegos possam “ler” a imagem com os softwares específicos.
- Coloque o texto no campo. Você pode usar HTML básico como
<b>
,<i>
e etc. Para quebrar linhas, use<br>
ao invés de enter.
3
Abra a galeria no Safari ou Firefox. No Chrome não funciona. Teste a vontade.
Compare com essa galeria publicada
4
Jogar a pasta, já renomeada, no infográficos, como temos feito ultimamente.