Participe-elementos-interface

Repositório de ícones, favicon e capas do https://participe.gestaourbana.sp.gov.br

Setup

git clone git@github.com:SPURB/participe-elementos-interface.git
cd participe-elementos-interface
npm i

---

Seções

• editaveis/ -> arquivos abertos (illustrator)
• capas/ -> originais de capas de consultas públicas
• publicos/ -> arquivos públicos
• plugins/ -> plugins para os editáveis
• tarefas/ -> tarefas de automatizacao

---

Favicon

Como gerar um arquivo ico a partir de um png

Pré-requesitos:

• Adobe Photoshop CS6
• Arquivo 16x16px no formato .png

1. Baixar o plugin e verificar a versão (32 ou 64bits)
2. Colar o arquivo em C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\File Formats (windows) ou local equivalente
3. Se a pasta não existir, ela deverá ser criada
4. Abrir o Photoshop e carregar o arquivo png
5. Salvar o arquivo como ICO (Windows Icon) (*.ICO)

---

Ícones

Como atualizar a webfont com os ícones do participe

O participe utiliza webfont para renderizar os ícones. Veja abaixo o procedimento para atualizar a webgfont.

Pré-requisitos:

• nodejs
• figma

1. Acesse a biblioteca de ícones do figma https://www.figma.com/file/gl5QfVl6VtUe6JSTOUoa8JCZ/Participe-%C3%8Dcones?node-id=0%3A1. Mantenha esse arquivo

2. Do figma exporte os frames dos ícones para o diretório editaveis/icones/

3. Compile os svgs em webfont

npm run icons

A webfont com os ícones do participe estará criada em publicos/icones/.

---

Capas

Como gerar todas as versões de capas

No site as seguintes larguras de imagens são utilizadas (em pixels): 1600x900, 800x450, 244x136, 122x68 e 40x40. Esta tarefa vai redimensionar e cortar as imagens para esses tamanhos. O procedimento também irá compilar as imagens, nos mesmos formatos e larguras, para .webp.

Pré-requisitos:

• nodejs
• git-fls
• Imagem da consulta com pelo menos 1900px de largura

Instruções:

1. Inclua a NOVA-CAPA no diretório capas/
2. Execute o comando alterando o parâmetro arquivo:

npm run capas --elemento:arquivo=NOVA-CAPA.jpg

ou compile todas as imagens do diretório capas/

npm run capas

Os arquivos estarão disponíveis em publicos/capas/