Em cartaz

Objetivo

Criar um cartaz de divulgação do Garoa Hacker Clube totalmente hackeável.

Introdução

 TL;DR: A seção Hacking é o principal, todo resto é prólogo.

A sede do Garoa já passou por três endereços, a saber:

1ª Sede: Rua Vitorino Camilo, 459 ^{abrir no OSM}
2ª Sede: Rua Costa Carvalho, 567 ^{abrir no OSM}
Sede atual: Rua Pascoal Bianco, 48 ^{abrir no OSM}

Para cada novo endereço, um novo cartaz com leves variações na fonte, cores e localização do hackerspace foi elaborado exceto para a atual sede:

Entre 2010 e 2013 (1ª Sede)
Entre 2013 e 2023 (2ª Sede)
A partir de 2023 (Sede atual)

Embora a elaboração do cartaz seja algo simples, isto é, apenas atualizar o endereço do cartaz anterior, a ideia de criar um cartaz totalmente hackeável soa mais interessante pois promove independência de editores SVG.

Além disso, dado que o Garoa possui sua própria fonte, uma abordagem mais WYSIWYM ao editar o conteúdo do cartaz pode ser facilmente implementada em SVG sem que seja preciso representar um caractere via <path d="" /> como o Inkscape faz ao gerar o arquivo final.

Senão por meio do Inkscape e outros editores como LibreOffice Draw e sK1, nos moldes atuais, o hacking se restringiria a basicamente:

Colorir o background e foreground com fill.
Trasladar, rotacionar, inclinar e etc. com transform.
Manipular as coordenadas do <path d="" /> na unha!

Linha do Tempo

Aviso: As informações a seguir foram obtidas unicamente por meio de OSINT e, por essa razão, podem carecer de precisão.

Without understanding history, we cannot hope to understand the present or prepare ourselves for the future.
— N. Chomsky, Goals and Visions - Powers and Prospects: Reflections on Human Nature and the Social Order, 1996

LEIAME.txt

O lançamento do Garoa ocorreu em 23/06/2009 segundo a página Sobre nós, contudo considera-se aqui a data de 28/01/2010 pelo motivo descrito nos itens subsequentes.

Os termos pré- e pós- atuam em função da data do primeiro encontro presencial na Arena BarCamp da terceira edição da Campus Party Brasil, entre as datas 25/01/2010 (1º dia) e 31/01/2010 (6º dia), em São Paulo.

Como hackerspaces são, em sua maioria, espaços físicos, considera-se aqui o primeiro espaço físico onde se reuniram os primeiros futuros associados/fundadores do Garoa como sendo num BarCamp da #CPBR3, conforme mencionado na #CPBR5 por Pitanga bem aqui.

e.g., DEF CON teve sua origem nas BBSs, mas a primeira edição ocorreu presencialmente
entre 09/06/1993 (1º dia) e 11/06/1993 (3º dia), em Las Vegas, Nevada (n.c.c., Las Vegas, Novo México).

Considera-se aqui o termo proto- em seu sentido óbvio, isto é, um evento A que deu origem a um evento B tal que A equivale proto-B.

e.g., Marty McFly (A), em 1955, inspirou Chuck Berry (B) a compor Jonny Be Goode três anos mais tarde.^{[citation needed]}

Proto-Garoa Hacker Clube

De fato, o primeiro nome havia sido HackerSPaces São Paulo ou hackerspacesp.

Pré-lançamento do Garoa em 23/06/2009

 https://web.archive.org/web/20090628091930/http://www.agaelebe.com.br/2009/6/25/hackerspace_em_sao_paulo (Wayback Machine)

Primeira menção do que seria mais tarde o Garoa Hacker Clube, cuja comunidade no Ning pode ser vista aqui, conforme explicado por Aleph, Anchises e demais no GaroaTV neste instante do vídeo.

Lançamento do Garoa entre 25/01/2010 e 31/01/2010

 https://flickr.com/photos/campuspartybrasil/4309436268
 https://flickr.com/photos/campuspartybrasil/4309474395

Alguns dos fundadores do Garoa, respectivamente agaelebe e Juca, no terceiro dia da Campus Party 2010. Ou, mais precisamente:

curl -s https://live.staticflickr.com/4013/4309436268_dd73c4f757_4k.jpg | convert - -crop 400x600+0+500 png:- | display -

curl -s https://live.staticflickr.com/2747/4309474395_8fb348e287_4k.jpg | convert - -crop 600x600+100+800 png:- | display -

Pós-lançamento do Garoa em 15/07/2010

Primeira reunião no Escritório Piloto da Poli-USP conforme transcrito aqui.

Escritório Piloto (DQ, Aylons et al.)

Garoa Hacker Clube

A inauguração do Garoa na Casa de Cultura Digital (CCD) em 28/08/2010. Algumas fotos podem ser encontradas no blog do DQ bem aqui.

Proto-Garoa Hacker Clube Bold

Post: "Que nome eu dou pra essa fonte?" em 15/11/2010

 https://flickr.com/photos/tonydemarco/5178628415

A primeira aparição tipográfica da fonte no Flickr de Tony — fonte que mais tarde seria conhecida como Jujubalin e, posteriormente, como Garoa Hacker Clube Bold.

Post: "Jujubalin" em 17/11/2010

 https://flickr.com/photos/tonydemarco/5185446258

Primeira aparição da fonte enquanto Jujubalin.

Cartaz Aliendígena em 01/12/2010

 https://flickr.com/photos/tonydemarco/5223621162

Primeira aparição da fonte Jujubalin em um cartaz para um evento no antigo endereço do El Cabriton.

Cartaz Epoch0 em 19/02/2011

Primeira aparição da fonte Jujubalin aqui na Wiki.

Evento de fundação do Garoa

Post: "O que é um hackerspace?" em 23/03/2011

 https://flickr.com/photos/tonydemarco/5553676499

Primeira aparição do cartaz de divulgação do Garoa Hacker Clube (usando a fonte Jujubalin).

Cartaz Garoa em 25/03/2011

Primeira aparição do cartaz de divulgação do Garoa Hacker Clube aqui na Wiki postado por Anchises.

Cartaz usando a fonte Jujubalin

Livro Poemas Para Brincar em 15/04/2011

 https://google.com/search?q=intext:9788508143719+intext:2011+site:estantevirtual.com.br (Google Hacking do ISBN e ano)

Primeiro uso da fonte Jujubalin como ilustração de capa de livro em brochura/e-book por Tony conforme postado aqui.

Post: "Garoa, ligações perigosas" em 06/07/2011

 https://flickr.com/photos/tonydemarco/5909460751

Mudança do nome da fonte Jujubalin para Garoa em sua versão negrito.

Garoa Hacker Clube Bold

Evento BarraPub em 16/12/2011

Lançamento da fonte Garoa Hacker Clube Bold no /pub, festa de confraternização de final de ano na sede.

Sobre a fonte

Visite a página Fonte Garoa Hacker Clube Bold para obter o zipado com arquivo OTF direto da Wiki.

Páginas oficiais do Just in Type

 https://web.archive.org/web/20250908205457/http://www.justintype.com (Wayback Machine)
 https://myfonts.com/collections/just-in-type-foundry

Download da Garoa Hacker Clube Bold

 https://myfonts.com/products/clube-bold-garoa-320800 (versão libre e gratis da Garoa Bold conforme explicado por Tony bem aqui)

Download das variações

 https://myfonts.com/collections/garoa-font-just-in-type?tab=individualStyles

Acima todas as fontes Garoa, a saber:

Garoa Medium
Garoa Bold
Garoa Hacker Clube Bold (versão SIL OFL v1.1)
Garoa Inline

Hacking

Existem três detalhes que merecem atenção:

Na versão mais recente em SVG do cartaz, há a presença de duas fontes: Garoa Bold e Garoa Medium. No entanto as versões anteriores estão em Garoa Bold apenas.
No código-fonte do SVG, nesta mesma versão do cartaz, podemos ver que alguns trechos estão em aparente "fUcKtHeCaSe".
Ainda nessa versão, existem cinco agrupamentos cujo os IDs são: XMLID_1_, Novo, converted, Sede_pinheiros e Sede_pinheiros_converted.

Explorando mais a fundo

Aqui vão algumas conjecturas:

Detalhe 1: trata-se de Design

Possivelmente, foi um ajuste para que o texto obedecesse a linha vertical imaginária (margem).

Apenas Garoa Bold (vermelho) atravessando a margem (verde)
Garoa Bold (vermelho) e Medium (azul) respeitando a margem (verde)

Isso porque, se fosse mantida apenas a fonte Garoa Bold com a redução do font-size, o texto se tornaria quase ilegível devido ao peso do negrito. Por esse motivo, justificou-se a alteração para uma fonte com menor font-weight, como a Garoa Medium.

Detalhe 2: é uma cifra

#sqn

A menos que seja parte de algum CTF do período em que o SVG foi criado e queira buscar a fundo sobre seu significado (e.g., 23) de modo que culmine num caso clássico de apofenia (e.g., Gallup vs. casal Friedman) ou algo mais delicado, considera-se aqui que seja apenas uma questão de espaçamento de caracteres, isto é, também sobre Design.

Para a Bold, as letras maiúsculas em destaque (roxo)

Caso não esteja familiarizado com este tipo de desafio em CTFs (Capture The Flag), você pode encontrar um exemplo na DEF CON 32, no Crypto Village bem aqui.

Detalhe 3: conectando os pontos

Para cada parent element <g> há um ID cujo padrão segue:

<g id="Novo">: É o cartaz usado entre 2010 e 2013 na 1ª Sede do Garoa puramente em Garoa Bold (ver <tspan>).

DevTools > Console: document.querySelectorAll("svg > g").forEach(p=>p.style.display=p.id=="Novo" ? "block" : "none")

#Novo

<g id="Sede_pinheiros">: É o cartaz usado entre 2013 e 2023 na 2ª Sede do Garoa em Garoa Bold e Garoa Medium (ver últimos cinco <tspan>).

DevTools > Console: document.querySelectorAll("svg > g").forEach(p=>p.style.display=p.id=="Sede_pinheiros" ? "block" : "none")

#Sede_pinheiros

<g id="XMLID_1_">, <g id="converted"> e <g id="Sede_pinheiros_converted">: são as versões acima em <path>. Provavelmente gerados a partir do SVG puro, sendo o primeiro parent element de ID <g id="XMLID_1_">, a versão original do cartaz.

De fato, a versão 15.1.0 do Adobe Illustrator contida no Creative Suite 5 (CS5) foi lançada em 2011, o que coincide com a data da primeira aparição do cartaz do Garoa Hacker Clube descrita lá em cima (ver comentário acima do header <!DOCTYPE>).

Voltando ao cerne

Como o objetivo é criar um cartaz totalmente hackeável sob rigor do molde existente, isto é, recriar o cartaz do Garoa obedecendo o design criado por Tony, dois modos surgem:

 My crime is that of curiosity [...]

Modo antiético

Recriar à risca o modelo mais recente do cartaz em SVG puro sem uso de <path> implica no uso das variações Garoa Bold (paga com versão gratuita chamada Garoa Hacker Clube Bold) e Garoa Medium (apenas na versão paga).

Vejamos duas soluções éticas:

Você baixa e usa a Garoa Hacker Clube Bold e, para a Garoa Medium, você adquire uma cópia licenciada paga.
Você contata o Type Designer e solicita autorização de uso caso possua uma cópia que não foi adquirida por você (e.g., uma cópia do arquivo que alguém comprou).

Aviso: As informações abaixo têm intuito ilustrativo/didático. Precisa das demais fontes criadas por Tony e Diego Maldonado? Então esse é o caminho correto.

 [...] after all, we're all alike. (The Mentor, Phrack #1-7-3, 1986)

O Myfonts permite a pré-visualização de qualquer fonte do site em formato PNG. Este preview pode ser controlado via URI através dos parâmetros abaixo:

rt: texto ou raster text.
rs: tamanho ou raster size.
w: largura ou width.
fg: cor da fonte ou foreground.
bg: cor de fundo ou background.

Apesar de PNG (raster) e SVG (vector) trabalhar de formas diferentes, a possibilidade de criar um PNG indefinidamente grande com rs e w traz o mesmo resultado de ter uma versão da fonte em TTF, OTF, WOFF, etc. para usar no SVG. Somado aos parâmetros fg e bg, pode-se criar diretamente no navegador qualquer texto usando qualquer fonte em qualquer resolução com mais de 16 milhões (precisamente 16 elevado a 6) de cores para fonte e fundo.

Passos

Acessar o SVG em https://garoa.net.br/mediawiki/images/Cartaz_A4_Garoa.svg
Abrir o DevTools no navegador (e.g., Blink-based ou WebKit-based).
Acessar o Console.
Colar o código a seguir:

 document.querySelector("svg").innerHTML+=`
   <g>
     <rect x="25" y="723" width="450" height="35" fill="#fff"/>
     <image x="25" y="723" width="374.28" height="50" href="
       https://sig.monotype.com/render/105/font/23c352afd07e571bc276ebfaeea166b4?rt=Rua%20Pascoal%20Bianco,%2048
     "/>
   </g>`

Pressionar Enter.
Oui, voilà!

Esse é só um exemplo! De fato, algo como https://sig.monotype.com/render/105/font/23c352afd07e571bc276ebfaeea166b4?rt=Ol%C3%A1,%20mundo!&rs=300&w=1920&fg=00ff00&bg=000000 ou um documento inteiro é possível usando Percent-Encoding.

Modo ético

Recriar o cartaz original que contém apenas a fonte Garoa Bold e usar a versão gratuita da mesma no SVG puro.

Para isso, primeiro convertemos a fonte de OTF para WOFF para que possa ser interpretada pelo navegador.

Passos

Baixar a fonte do Garoa daqui.
Extrair o arquivo OTF com unzip *.zip.
Instalar o sfnt2woff e woff2 com sudo apt install sfnt2woff-zopfli woff2 (caso Debian-based) ou DIY daqui e daqui.
Rodar sfnt2woff-zopfli *.otf && woff2_compress *.otf.

Em seguida, baixar e abrir este SVG com o navegador (remover comentário  e inserir as fontes WOFF/WOFF2 no mesmo diretório do SVG).

Puro SVG, hackeável, editável no Inkscape.. menos de 200 LoC!

Caso contrário, referenciar a localização dos arquivos neste trecho:

 @font-face {
   font-family: 'Garoa Hacker Clube Bold';
   src:
     url('../foo/bar/fonte.woff2') format('woff2'),
     url('../foo/bar/fonte.woff') format('woff')
   ;
 }

Compatibilidade

É claro que se tentar abrir o SVG no Inkscape, o mesmo estará sem a fonte do Garoa. É preciso referenciar/instalar a fonte em seu sistema, por exemplo, seguindo este tutorial da Wiki do Inkscape.

Hackeando ad infinitum

Em breve. Que tal continuar você?

Em cartaz

Índice

Objetivo

Introdução

Linha do Tempo

LEIAME.txt

Proto-Garoa Hacker Clube

Pré-lançamento do Garoa em 23/06/2009

Lançamento do Garoa entre 25/01/2010 e 31/01/2010

Pós-lançamento do Garoa em 15/07/2010

Garoa Hacker Clube

Proto-Garoa Hacker Clube Bold

Post: "Que nome eu dou pra essa fonte?" em 15/11/2010

Post: "Jujubalin" em 17/11/2010

Cartaz Aliendígena em 01/12/2010

Cartaz Epoch0 em 19/02/2011

Post: "O que é um hackerspace?" em 23/03/2011

Cartaz Garoa em 25/03/2011

Livro Poemas Para Brincar em 15/04/2011

Post: "Garoa, ligações perigosas" em 06/07/2011

Garoa Hacker Clube Bold

Evento BarraPub em 16/12/2011

Sobre a fonte

Páginas oficiais do Just in Type

Download da Garoa Hacker Clube Bold

Download das variações

Hacking

Explorando mais a fundo

Detalhe 1: trata-se de Design

Detalhe 2: é uma cifra

Detalhe 3: conectando os pontos

Voltando ao cerne

Modo ético

Passos

Compatibilidade

Hackeando ad infinitum

Menu de navegação

Pesquisa