___________________________________________________
 __/\\\\\\\\\\\\\\\__/\\\\\\\\\\\__/\\\\\\\\\\\\\___        
  _\///////\\\/////__\/////\\\///__\/\\\/////////\\\_
   _______\/\\\___________\/\\\_____\/\\\_______\/\\\_
    _______\/\\\___________\/\\\_____\/\\\\\\\\\\\\\/__
     _______\/\\\___________\/\\\_____\/\\\/////////____
      _______\/\\\___________\/\\\_____\/\\\_____________
       _______\/\\\___________\/\\\_____\/\\\_____________
        _______\/\\\________/\\\\\\\\\\\_\/\\\_____________
         _______\///________\///////////__\///______________
          ___________________________________________________
           ________/\\\\\__________/\\\\\\\\\\\_______________           
            ______/\\\///\\\______/\\\/////////\\\_____________
             ____/\\\/__\///\\\___\//\\\______\///______________
              ___/\\\______\//\\\___\////\\\_____________________
               __\/\\\_______\/\\\______\////\\\__________________
                __\//\\\______/\\\__________\////\\\_______________
                 ___\///\\\__/\\\_____/\\\______\//\\\______________
                  _____\///\\\\\/_____\///\\\\\\\\\\\/_______________
                   _______\/////_________\///////////_________________
                    ___________________________________________________
                     _                                                 _
                      _Tipografia Ilustração e Programação  Open Source _
                       ___________________________________________________


### Conceito do Evento

TIPOS
![TIPOS](img/tipografia/IMG_2680.jpg)

Este documento apresenta as Normas de Design para o evento `TIPOS`. *Tipografia Ilustração e Programação Open Source* (`TIPOS`) é um evento que incide sobre Open Source Art, nomeadamente, nas áreas da tipografia, ilustração, música e programação de conteúdos artísticos com recurso a ferramentas freeware. O evento tem uma periodicidade anual (no mês de Junho).
O evento está organizado em três dias cada um com um tema diferente; sendo o primeiro dia sobre **Tipografia** - fontes tipográficas e programas, o segundo dia sobre **Ilustração** - programas e ferramentas, e o terceiro sobre **Programação** - linguagens e programas. As conferências presenciais iriam decorrer em espaços abertos da Cidade de Coimbra e os virtuais (recorrendo a plataformas como o Second Life, Skype, Livestream, entre outros) em espaços reaproveitados como fábricas e armazéns.
Este manual foi escrito e composto recorrendo à linguagem de programação Markdown desenvolvida por John Gruber e pretende ser uma forma mais eficaz e simples de escrever para a Web.[^1]


***

### Materiais

Os materiais utilizados para a criação dos elementos de promoção do evento devem estar relacionados com os intervenientes e com o tema do dia respectivo.
Nesta primeira edição foram utilizados os Tipos Móveis, o Stencil e Teclados antigos para a criação dos vídeos para os três dias.
Em próximas edições poder-se-ia utilizar máquinas de escrever, litografia, serigrafia para o dia da *Tipografia*; graffiti, aguarela, collage para o dia da *Ilustração*; e terminais antigos, consolas, microprocessadores para o dia da *Programação*.
Em cada conjunto de vídeos (bumpers, separadores e video principal) os ficheiros originais das filmagens devem ser transpostos através de mais um processo/técnica.
Por exemplo, na primeira edição os vídeos originais dos bumpers foram passados por um scanner (técnica do slit-screen) e remontados frame a frame.

Slit scan
![Slit scan](img/scan.gif)

Os vídeos originais do vídeo promocional do evento foram passados por um scanner e posteriormente foram reproduzidos e filmados num ecrã CRT.
Para criar um efeito mais dinâmico recorreu-se ao *erro* causado pela falha de sincronização entre a taxa de refrescamento da câmara e a do ecrã o que resulta no efeito que pode ser observado na imagem. Foram também introduzidas algumas falhas resultantes do mau contacto do cabo RGB com o monitor.

CRT
![CRT](img/crt.gif)

***

### Elementos

Nos vídeos de apresentação dos oradores e dos workshops, as legendas devem aparecer a branco com um rectângulo preto como fundo.
Os oradores deverão surgir alinhados à esquerda ou à direita encostados à margem de segurança inferior.

Posição e animação das legendas
![Posição e animação das legendas](img/legendas.gif)

As legendas dos workshops podem igualmente surgir alinhados à esquerda ou à direita mas devem estar posicionados junto à margem de segurança superior.

Posição e animação das legendas Workshops
![Posição e animação das legendas Workshops](img/legendasW.gif)

A margem de segurança é definida pelo default das normas Title Safe. A *Safe Area* descreve a área da imagem que aparece na íntegra na maioria dos televisores.

Zona Title Safe
![Zona Title Safe](img/titlesafe.png)

***

### Dont's

Seguem-se vários exemplos de abordagens ao evento que **não são recomendadas** (quer ao nível da tipografia quer ao nível do esquema de cores). Dont's

![Dont's](img/donts.png)

***

### Making Of

#### Tipografia

As filmagens para o dia da Tipografia foram realizadas na Tipografia Damasceno com a grande amabilidade do *Sr. Damasceno* ao qual desde já agradecemos a atenção e disponibilidade.

TIPOS Tipografia
![TIPOS Tipografia](img/tipografia/IMG_2689.jpg)

A fonte utilizada foi Futura com tipos de metal.

Type Case
![Type Case](img/tipografia/IMG_1184.jpg)
Type Shop
![Type Shop](img/tipografia/IMG_2710.jpg)
Break
![Break](img/tipografia/IMG_2750.jpg)

As imagens que se seguem demonstram os layouts utilizados para cada um dos oradores e para os workshops.

Paul Hardman - Close Up
![Paul Hardman - Close Up](img/tipografia/IMG_1143.jpg)
Paul Hardman
![Paul Hardman](img/tipografia/IMG_1148.jpg)
Erik Spiekermann
![Erik Spiekermann](img/tipografia/IMG_1151.jpg)
Peter Bilak
![Peter Bilak](img/tipografia/IMG_1157.jpg)
Scribus
![Scribus](img/tipografia/IMG_1163.jpg)
Font Forge
![Font Forge](img/tipografia/IMG_1170.jpg)

***

#### Ilustração

O stencil utilizado para as filmagens do dia da Ilustração foi cortado a laser na FabLab de Coimbra. Fizemos uma composição de todos os elementos necessários numa folha A2 para que o corte a laser fosse mais rápido e prático.

Corte a Laser do Stencil
![Corte a Laser do Stencil](img/ilustracao/Gif_01.gif)

As filmagens foram realizadas na Quinta de São Jerónimo em Coimbra, um dos locais onde iriam decorrer as palestras do evento.

Stencil Stencil
![Stencil](img/ilustracao/Image_03.jpg)
![Stencil](img/ilustracao/Image_04.jpg)
Stencil com tinta Stencil com tinta
![Stencil com tinta](img/ilustracao/Image_09.jpg)
![Stencil com tinta](img/ilustracao/Image_08.jpg)
R2
![R2](img/ilustracao/Image_05.jpg)
Gimp
![Gimp](img/ilustracao/Image_06.jpg)
Inkscape
![Inkscape](img/ilustracao/Image_07.jpg)
Workshop
![Workshop](img/ilustracao/Image_01.jpg)
Tintas
![Tintas](img/ilustracao/Image_02.jpg)

***

#### Programação

Para o dia da Programação foram utilizadas Teclas de Teclados antigos encontrados no depósito de produtos electrónicos do DEI.

Teclas
![Teclas](img/programacao/Image_01.jpg)
Remoção das Teclas
![Remoção das Teclas](img/programacao/Image_03.jpg)
Remoção das Teclas
![Remoção das Teclas](img/programacao/Image_02.jpg)
Organização das Teclas
![Organização das Teclas](img/programacao/Image_04.jpg)
Fotos em Patins
![Fotos em Patins](img/programacao/Image_05.jpg)
Fotos em Patins
![Filmagem em Patins](img/programacao/Gif_01.gif)
Fotos em Patins
![Filmagem em Patins](img/programacao/Gif_02.gif)

A segunda parte das filmagens foi realizada no estúdio de fotografia da Casa das Caldeiras.

Casa das Caldeiras
![Casa das Caldeiras](img/programacao/Image_06.jpg)
Fotos Casa das Caldeiras
![Fotos Casa das Caldeiras](img/programacao/Image_07.jpg)

As fotografias que se seguem apresentam os layouts criados para cada um dos oradores e para os workshops.

Ammilcar Cardoso
![Ammilcar Cardoso](img/programacao/Image_08.jpg)
Pedro Martins
![Pedro Martins](img/programacao/Image_09.jpg)
Cada
![Cada](img/programacao/Image_10.jpg)
Break
![Break](img/programacao/Image_11.jpg)
Workshop Cada
![Workshop Cada](img/programacao/Image_12.jpg)
Break
![Break](img/programacao/Image_13.jpg)
Workshop Dick Macinnis
![Workshop Dick Macinnis](img/programacao/Image_14.jpg)

***

#### Video Principal CRTs

No vídeo Principal do evento foram utilizados monitores CRT antigos do DEI como previamente descrito.

Ecrãs CRT

![Ecrãs CRT](img/CRT/Gif_02.gif)
Timelapse filmagens
![Timelapse filmagens](img/CRT/Gif_01.gif)
Tomás Marques, Miguel Cruz e Rafael Ferreira
![Tomás Marques, Miguel Cruz e Rafael Ferreira](img/CRT/IMG_3402.jpg)

***

#### Pós Produção

Para criar o efeito de slit-screen foi utilizado um iPad num scanner. O iPad foi programado para reproduzir em loop o video do separador enquanto o scanner capturava a imagem. Foram realizados no total cerca de **800 scanners**.

Scanners

![Scanners](img/montagens/Image_02.png)

Cada dia do evento possui uma música específica. As músicas são da autoria de *Chris Zabriskie* e estão disponíveis livremente no website [Free Music Archive](http://freemusicarchive.org). Os vídeos correspondentes ao mesmo dia utilizam a mesma musica base. Foram gravados sons de objectos relativos ao tema do dia durante as gravações que foram posteriormente inseridos nas músicas de fundo. Para a Tipografia a música utilizada foi `Out of the Skies Under the Earth` e foram acrescentados sons de peças e objectos da tipografia. Nos vídeos da Ilustração a música chama-se `What True Self Feels Bogus Lets Watch Jason X` e os sons acrescentados resultam do ruído de misturar a tinta, de pintar com o pincel, e de folhas de papel. Para a Programação a música utilizada foi `Readers Do You Read` e foram acrescentados sons da teclas dos teclados e da câmara (focus e shot). Nos bumpers para além dos sons previamente inseridos foram também acrescentados sons do scanner e da impressora.

Músicas
![Músicas](img/montagens/Image_01.png)
[Música Tipografia](http://freemusicarchive.org/music/Chris_Zabriskie/Reappear/03_-_Out_of_the_Sk- ies_Under_the_Earth)
[Música Ilustração](http://freemusicarchive.org/music/Chris_Zabriskie/Reappear/05_-_What_True_Self _Feels_Bogus_Lets_Watch_Jason_X)
[Música Programação](http://freemusicarchive.org/music/Chris_Zabriskie/Reappear/02_-_Readers_Do_ You_Read)

Legendas
![Legendas](img/montagens/Gif_01.gif)


Este projeto foi produzido com o mínimo custo financeiro. Foram utilizados programas Open Source como o *Inkscape* para fazer o stencil do vídeo do dia da Ilustração, o *Frame By Frame* para elaborar o stopmotion das digitalizações dos bumpers, o *VLC* para a visualização dos vídeos e o *Reaper* e plug-ins incorporados para a montagem das músicas utilizadas. Não foi necessário comprar qualquer material específico; foram utilizados os tipos móveis da Tipografia Damasceno, folhas e pincel adquiridos previamente para outros trabalhos, teclados da reciclagem do Departamento de Engenharia Informática e CRTs de uma sala do DEI.


***

  1. Neste manual decidiu-se manter todos os códigos e tags da linguagem Markdown, ou seja, numa utilização normal desta ferramenta apenas surge o texto formatado.