1696 lines
54 KiB
HTML
1696 lines
54 KiB
HTML
<!--
|
||
|
||
THE WISDOM AND/OR MADNESS OF CROWDS
|
||
by Nicky Case | apr 2018
|
||
|
||
- - - - - - - - - - -
|
||
|
||
FAN TRANSLATION GUIDE:
|
||
https://github.com/ncase/crowds#how-to-translate-this-thing
|
||
|
||
Hello fan-translaters! Thank you so, so much for your help.
|
||
I hope you know what you've gotten yourself into.
|
||
There's about 3600+ WORDS to translate, including
|
||
the Bonus Boxes and References.
|
||
|
||
To make things easier (or less painful, anyway) I've marked
|
||
what needs to be translated and how with big "TRANSLATE" comments.
|
||
Ctrl+F for "TRANSLATE" in uppercase to see what needs to be translated!
|
||
|
||
BUT BEFORE YOU TRANSLATE ANYTHING, DO THIS:
|
||
1) Look up the two-letter code of the language you're translating to:
|
||
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
|
||
2) *COPY* index.html, and name the copy [two-letter-code].html
|
||
For example: de.html, ar.html, zh.html, etc...
|
||
3) Translate *THAT* page. Do NOT modify the original index.html!
|
||
|
||
And once you're done, go to "translations.txt", and follow the
|
||
instructions there to let this game "know" your translation exists.
|
||
|
||
Good luck, and thanks again!
|
||
|
||
<3,
|
||
~ Nicky Case
|
||
|
||
-->
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="pt"> <!-- lang="(TRANSLATE: set your language code here, same as the page name!) e.g: es, es-ES, pt-BR, ja, it, fr-CA, de, ..." -->
|
||
<head>
|
||
|
||
<!-- Meta Info -->
|
||
<title>A Sabedoria e/ou Loucura das Multidões</title> <!-- <title>(TRANSLATE this part only)</title> -->
|
||
<meta name="description" content="um guia interativo das relações humanas"/> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||
<meta content="utf-8" http-equiv="encoding">
|
||
<meta charset="utf-8">
|
||
<link rel="icon" type="image/png" href="favicon.png">
|
||
|
||
<link rel="alternate" href="http://ncase.me/crowds/" hreflang="en">
|
||
<link rel="alternate" href="http://ncase.me/crowds/cs.html" hreflang="cs">
|
||
<link rel="alternate" href="http://ncase.me/crowds/es.html" hreflang="es-ES">
|
||
<link rel="alternate" href="http://ncase.me/crowds/es-MX.html" hreflang="es-MX">
|
||
<link rel="alternate" href="http://ncase.me/crowds/fr.html" hreflang="fr">
|
||
<link rel="alternate" href="http://ncase.me/crowds/it.html" hreflang="it">
|
||
<link rel="alternate" href="http://ncase.me/crowds/ja.html" hreflang="ja">
|
||
<link rel="alternate" href="http://ncase.me/crowds/pt.html" hreflang="pt">
|
||
<link rel="alternate" href="http://ncase.me/crowds/ru.html" hreflang="ru">
|
||
<link rel="alternate" href="http://ncase.me/crowds/uk.html" hreflang="uk">
|
||
<link rel="alternate" href="http://ncase.me/crowds/vi.html" hreflang="vi">
|
||
<link rel="alternate" href="http://ncase.me/crowds/zh-CN.html" hreflang="zh-CN">
|
||
<link rel="alternate" href="http://ncase.me/crowds/zh-TW.html" hreflang="zh-TW">
|
||
|
||
<!-- Sharing -->
|
||
<meta itemprop="name" content="A Sabedoria e/ou Loucura das Multidões"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta itemprop="description" content="um guia interativo das relações humanas"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta itemprop="image" content="http://ncase.me/crowds/social/thumb.png">
|
||
|
||
<meta name="twitter:title" content="A Sabedoria e/ou Loucura das Multidões"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta name="twitter:description" content="um guia interativo das relações humanas"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:site" content="@ncasenmare">
|
||
<meta name="twitter:creator" content="@ncasenmare">
|
||
<meta name="twitter:image" content="http://ncase.me/crowds/social/thumb.png">
|
||
|
||
<meta property="og:title" content="A Sabedoria e/ou Loucura das Multidões"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta property="og:description" content="um guia interativo das relações humanas"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="http://ncase.me/crowds/pt.html">
|
||
<meta property="og:image" content="http://ncase.me/crowds/social/thumb.png">
|
||
|
||
<!-- Styles -->
|
||
<link rel="stylesheet" type="text/css" href="css/index.css?v=7">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- THE SLIDESHOW -->
|
||
<div id="container">
|
||
|
||
<!-- Simulation(s) in background -->
|
||
<div id="simulations_container">
|
||
<div id="simulations"></div>
|
||
</div>
|
||
|
||
<!-- Slideshow: words & buttons -->
|
||
<div id="slideshow_container">
|
||
<div id="slideshow"></div>
|
||
</div>
|
||
|
||
<!-- Scratch Transition -->
|
||
<canvas id="scratch" width="711" height="400"></canvas>
|
||
|
||
<!-- Skip -->
|
||
<div id="skip">pular ></div> <!-- TRANSLATE -->
|
||
|
||
<!-- Modal -->
|
||
<div id="modal_container">
|
||
<div id="modal_bg"></div>
|
||
<div id="modal">
|
||
<div id="modal_close">⨯</div>
|
||
<div id="modal_content_container">
|
||
<div id="modal_content"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Navigation: Audio, Contents, Share, Translations -->
|
||
<div id="navigation_container">
|
||
<div id="sound" mute="no">
|
||
<div id="sound_icon"></div>
|
||
<span id="sound_on">LIGADO</span> <!-- TRANSLATE -->
|
||
<span id="sound_off">DESLIGADO</span> <!-- TRANSLATE -->
|
||
</div>
|
||
<div id="sharing">
|
||
<a id="fb" target="_blank" href="TODO"></a>
|
||
<a id="tw" target="_blank" href="TODO"></a>
|
||
<a id="em" target="_blank" href="TODO"></a>
|
||
<span id="share_title">
|
||
A Sabedoria e/ou Loucura das Multidões <!-- TRANSLATE -->
|
||
</span>
|
||
<span id="share_desc">
|
||
<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
|
||
Por que grupos de pessoas agem de forma inteligente, burra, gentil, cruel? Um guia interativo das relações humanas: <!-- TRANSLATE -->
|
||
</span>
|
||
</div>
|
||
<div id="navigation">
|
||
|
||
<!-- The chapters -->
|
||
<!-- TRANSLATE all the Chapter names! -->
|
||
<div chapter="Introduction">
|
||
<span>0</span>
|
||
<span>0. Introdução</span>
|
||
</div>
|
||
<div chapter="Networks">
|
||
<span>1</span>
|
||
<span>1. Conexões</span>
|
||
</div>
|
||
<div chapter="Simple">
|
||
<span>2</span>
|
||
<span>2. Contágios</span>
|
||
</div>
|
||
<div chapter="Complex">
|
||
<span>3</span>
|
||
<span>3. Contágios Complexos</span>
|
||
</div>
|
||
<div chapter="BB">
|
||
<span>4</span>
|
||
<span>4. Ligações & Pontes</span> <!-- note: & is html for the "and" sign -->
|
||
</div>
|
||
<div chapter="SmallWorld">
|
||
<span>5</span>
|
||
<span>5. Pequeno Mundo</span>
|
||
</div>
|
||
<div chapter="Conclusion">
|
||
<span>6</span>
|
||
<span>6. Concluindo...</span>
|
||
</div>
|
||
<div chapter="Credits">
|
||
<span>7</span>
|
||
<span>7. Créditos</span>
|
||
</div>
|
||
<div chapter="Sandbox">
|
||
<span>★</span>
|
||
<span>★ Modo Experimental! ★</span>
|
||
</div>
|
||
|
||
<!-- A divider -->
|
||
<span class="nav_divider"></span>
|
||
|
||
<!-- Bonus Notes & References -->
|
||
<div modal="bonus">
|
||
<span>?</span>
|
||
<span>Caixas Bônus!</span> <!-- TRANSLATE -->
|
||
</div>
|
||
<div modal="references">
|
||
<span style="margin-top: 7px; font-size: 35px;">*</span>
|
||
<span>Links & Referências</span> <!-- TRANSLATE -->
|
||
</div>
|
||
<div modal="translations">
|
||
<span style="margin-top:5px; position:relative;"><span style="
|
||
position: absolute;
|
||
top: -8px;
|
||
left: 6px;
|
||
">A</span><span style="
|
||
position: absolute;
|
||
font-size: 16px;
|
||
top: -1px;
|
||
left: 16px;
|
||
">あ</span></span>
|
||
<span>Traduções</span> <!-- TRANSLATE -->
|
||
</div>
|
||
|
||
<!-- The hover bubble -->
|
||
<span id="nav_bubble"></span>
|
||
|
||
</div>
|
||
<div id="translations"></div>
|
||
<div id="social"></div>
|
||
</div>
|
||
|
||
<!-- The Pencil -->
|
||
<div id="pencil_container">
|
||
<canvas id="pencil"></canvas>
|
||
</div>
|
||
|
||
<!-- Preloader -->
|
||
<div id="pre_preloader">
|
||
<div>carregando...</div> <!-- TRANSLATE -->
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
<!-- - - - - -->
|
||
<!-- SCRIPTS -->
|
||
<!-- - - - - -->
|
||
|
||
<script src="js/lib/helpers.js"></script>
|
||
<script src="js/lib/minpubsub.src.js"></script>
|
||
<script src="js/lib/howler.min.js"></script>
|
||
<script src="js/lib/Key.js"></script>
|
||
<script src="js/lib/Mouse.js"></script>
|
||
<script src="js/lib/Sprite.js"></script>
|
||
|
||
<script src="js/slideshow/Slideshow.js"></script>
|
||
<script src="js/slideshow/Pencil.js"></script>
|
||
<script src="js/slideshow/Boxes.js"></script>
|
||
<script src="js/slideshow/Scratch.js"></script>
|
||
<script src="js/slideshow/Navigation.js"></script>
|
||
<script src="js/slideshow/SimUI.js"></script>
|
||
<script src="js/slideshow/SandboxUI.js"></script>
|
||
<script src="js/slideshow/Modal.js"></script>
|
||
<script src="js/slideshow/Preloader.js"></script>
|
||
<script src="js/slideshow/Translations.js?v=2"></script>
|
||
|
||
<script src="js/sim/Peep.js?v=2"></script>
|
||
<script src="js/sim/Connection.js"></script>
|
||
<script src="js/sim/ConnectorCutter.js"></script>
|
||
<script src="js/sim/Simulations.js"></script>
|
||
|
||
<script src="js/chapters/A_Preloader.js"></script>
|
||
<script src="js/chapters/B_Introduction.js"></script>
|
||
<script src="js/chapters/C_Networks.js"></script>
|
||
<script src="js/chapters/D_Simple_Contagion.js"></script>
|
||
<script src="js/chapters/E_Complex_Contagion.js"></script>
|
||
<script src="js/chapters/F_Bonding_And_Bridging.js"></script>
|
||
<script src="js/chapters/G_Small_World.js"></script>
|
||
<script src="js/chapters/H_Conclusion.js"></script>
|
||
<script src="js/chapters/I_Credits.js"></script>
|
||
<script src="js/chapters/J_Sandbox.js?v=2"></script>
|
||
|
||
<script src="js/main.js"></script>
|
||
|
||
|
||
<!-- - - - - - - - - - - - -->
|
||
<!-- THE SLIDESHOW'S WORDS -->
|
||
<!-- - - - - - - - - - - - -->
|
||
|
||
<!--
|
||
|
||
This is the bulk of what you need to TRANSLATE!
|
||
Translate just the text that's within the <tag></tags>
|
||
If you're using a code editor (like Sublime Text https://www.sublimetext.com/),
|
||
it should automatically highlight what the text is (usually in white).
|
||
|
||
-->
|
||
|
||
<span style="display:none">
|
||
|
||
<!-- Preloader -->
|
||
|
||
<words id="preloader_title">
|
||
|
||
<div style="font-size: 30px;">
|
||
<span>a</span>
|
||
<br>
|
||
<span style="font-size: 60px;letter-spacing: 4px;">SABEDORIA</span>
|
||
<span style="position:relative;top: -10px;">e/ou</span>
|
||
<span style="font-size: 60px;">LOUCURA</span>
|
||
<br>
|
||
<span style="position: relative;top: -11px;">das</span>
|
||
<br>
|
||
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px; display:block;">MULTIDÕES</span>
|
||
</div>
|
||
|
||
<div style="color:#999">
|
||
<!-- TRANSLATE note: comment out the line below... -->
|
||
<!-- playing time: 30 min • by nicky case, april 2018 -->
|
||
<!-- ...and UN-comment + TRANSLATE this line! -->
|
||
<small>por nicky case • traduzido por Italo Lelis e Iuri Rezende • <a href='.'>original in English</a></small>
|
||
</div>
|
||
|
||
</words>
|
||
|
||
<words id="preloader_button">
|
||
<next></next>
|
||
</words>
|
||
|
||
<words id="preloader_loading">
|
||
carregando...
|
||
</words>
|
||
|
||
<words id="preloader_play">
|
||
vamos jogar! <div class="rarr"></div>
|
||
</words>
|
||
|
||
<!-- Introduction -->
|
||
<!--
|
||
|
||
TRANSLATE note: to make the text stay in a circle, I added lots of <br> breaks.
|
||
You may have to re-arrange the <br>'s in order to do your translation.
|
||
It shouldn't look too bad if they're slightly off, though!
|
||
|
||
Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
|
||
|
||
-->
|
||
|
||
<words id="intro">
|
||
|
||
<br><br>
|
||
|
||
Isaac Newton tinha certeza de que era um
|
||
<br>
|
||
sabichão. Depois de inventar o cálculo e a teoria da
|
||
<br>
|
||
gravidade, ele deveria ser inteligente o suficiente para
|
||
<br>
|
||
fazer um investimento financeiro, certo? Bem, resumindo a história,
|
||
<br>
|
||
ele perdeu $4,600,000 (na cotação atual do dólar) na bolha nacional
|
||
<br>
|
||
especulativa conhecida como a Quebra dos Mares do Sul de 1720.
|
||
|
||
<br><br>
|
||
|
||
Como o próprio Sir Newton disse posteriormente: <i>“Eu consigo calcular
|
||
<br>
|
||
o movimento dos corpos celestiais, mas não a loucura das pessoas.”</i>
|
||
|
||
<next>é, que ruim pra ele <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<words id="intro_2">
|
||
|
||
<div style="height:0.5em"></div>
|
||
|
||
Claro, não foi a única vez que
|
||
<br>
|
||
mercados, instituições, ou democracias
|
||
<br>
|
||
inteiras saíram de controle — a <i>loucura</i> das massas.
|
||
<br>
|
||
Ainda assim, logo que se perde a esperança na humanidade,
|
||
<br>
|
||
veem-se cidadãos coordenando para se resgatar uns aos
|
||
<br>
|
||
outros em furacões, comunidades criando soluções para problemas,
|
||
<br>
|
||
pessoas lutando por um mundo melhor — a <i>sabedoria</i> das massas!
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
<b>Mas <i>por que</i> algumas massas se rendem à loucura, ou à sabedoria?</b>
|
||
<br>
|
||
Nenhuma teoria consegue explicar tudo, mas acredito que um novo
|
||
<br>
|
||
campo de estudo, <b>ciência das redes</b>, pode nos guiar! E sua ideia
|
||
<br>
|
||
central é esta: para entender massas, deveríamos olhar não
|
||
<br>
|
||
às <i>pessoas individuais</i>, mas para...
|
||
|
||
<next>...suas <i>conexões.</i> <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<!-- Networks -->
|
||
|
||
<words id="networks_tutorial_start">
|
||
<b>Vamos desenhar uma rede!</b>
|
||
Cada conexão representa uma amizade entre duas pessoas:
|
||
</words>
|
||
|
||
<words id="networks_tutorial_connect">
|
||
desenhe para conectar
|
||
</words>
|
||
|
||
<words id="networks_tutorial_disconnect">
|
||
risque para desconectar
|
||
</words>
|
||
|
||
<words id="networks_tutorial_end">
|
||
|
||
quando você estiver pronto desenhando e brincando,
|
||
<next wiggle>vamos continuar <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<words id="networks_threshold">
|
||
|
||
Agora, conexões sociais são mais do que apenas figuras bonitinhas.
|
||
As pessoas <i>olham para</i> suas conexões sociais para entender o mundo.
|
||
Por exemplo, as pessoas olham para seus próximos para
|
||
descobrir <b>qual % de seus amigos</b> (não contando a si mesmos),
|
||
digamos, bebem demais. <icon name="yellow"></icon>
|
||
|
||
</words>
|
||
|
||
<words id="networks_threshold_instruction">
|
||
<b>Desenhe/apague conexões, e veja o que acontece! <div class="rarr"></div> </b>
|
||
</words>
|
||
|
||
<words id="networks_threshold_end">
|
||
<next>legal, entendi</next>
|
||
</words>
|
||
|
||
<words id="networks_pre_puzzle">
|
||
Entretanto, redes podem <i>enganar</i> pessoas.
|
||
Assim como a Terra parece plana porque estamos nela,
|
||
as pessoas podem equivocar-se sobre a sociedade porque estão <i>dentro</i> dela.
|
||
</words>
|
||
|
||
<words id="optional_reading">
|
||
<div style="position:absolute; top:5px;">
|
||
<i>opcional</i> notas bônus extras! ↑
|
||
</div>
|
||
<div style="position:absolute; left:216px; top:10px;">
|
||
↓ links e referências
|
||
</div>
|
||
</words>
|
||
|
||
<words id="networks_pre_puzzle_2">
|
||
|
||
<bon id="books"></bon>
|
||
|
||
<br>
|
||
|
||
Por exemplo, um estudo de 1991<ref id="drunk"></ref> mostrou que
|
||
“virtualmente todos os estudantes [universitários] reportaram que seus amigos bebiam mais que eles próprios.”
|
||
Mas isso parece impossível!
|
||
Como isso pode ser?
|
||
Bem, você está prestes a obter a resposta desenhando uma rede.
|
||
É hora de...
|
||
|
||
<next>ENGANAR TODO MUNDO <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<words id="networks_puzzle">
|
||
|
||
<b style="font-size:2em">HORA DO DESAFIO!</b>
|
||
<br>
|
||
Engane <i>todo mundo</i> para pensar que
|
||
a maioria de seus amigos bebem demais <icon name="yellow"></icon>
|
||
(mesmo que quem bebe demais seja minoria de 2 para 1!)
|
||
|
||
</words>
|
||
<words id="networks_puzzle_metric">
|
||
<b>ENGANADOS:</b>
|
||
</words>
|
||
<words id="networks_puzzle_metric_2">
|
||
de 9 pessoas
|
||
</words>
|
||
<words id="networks_puzzle_end">
|
||
Parabéns! Você manipulou um grupo de estudantes a acreditar
|
||
na prevalência de uma norma social incrivelmente não saudável! Muito bem!
|
||
<next wiggle>...okay. obrigado?</next>
|
||
</words>
|
||
|
||
<words id="networks_post_puzzle">
|
||
|
||
O que você acabou de criar se chama A Ilusão da Maioria<ref id="majority"></ref>,
|
||
o que também explica porque as pessoas acham que sua visão política é consenso,
|
||
ou porque o extremismo parece mais comum do que é na realidade.
|
||
<i>Loucura.</i>
|
||
|
||
<bon id="connections"></bon>
|
||
|
||
Mas as pessoas não apenas <i>observam</i> passivamente ideias e comportamentos dos outros,
|
||
elas ativamente os <i>copiam</i>.
|
||
Então agora, vamos olhar para algo que os cientistas chamam de...
|
||
|
||
<next>“Contágios!” <div class="rarr"></div> </next>
|
||
|
||
|
||
</words>
|
||
|
||
<!-- Simple Contagions -->
|
||
|
||
<words id="simple_simple">
|
||
<i>Vamos desconsiderar a palavra "maioria" por agora.</i>
|
||
Abaixo: temos uma pessoa <icon name="red"></icon> com alguma informação.
|
||
Uma <i>des</i>informação. "Fake news", como os garotos populares dizem.
|
||
Todo dia, essa pessoa espalha o rumor, como um vírus, para seus amigos.
|
||
E eles, por sua vez, espalham aos amigos <i>dos amigos</i>. E assim vai.
|
||
<br>
|
||
<b>
|
||
Iniciar a simulação! <div class="darr"></div>
|
||
(p.s: não é possível desenhar <i>durante</i> a simulação)
|
||
</b>
|
||
</words>
|
||
|
||
<words id="simple_simple_2">
|
||
Nota: apesar do nome negativo, "contágios" podem ser bons ou ruins (ou neutros ou ambíguos).
|
||
Existe forte evidência estatística<ref id="contagion"></ref> de que
|
||
fumar, saúde, felicidade, eleições, e níveis de cooperação
|
||
são todos "contagiosos" --
|
||
e até alguma evidência de que suicídios<ref id="suicides"></ref> e tiroteios em massa<ref id="shootings"></ref> também são.
|
||
</words>
|
||
|
||
<words id="simple_simple_end">
|
||
<next wiggle>bem, isso é deprimente <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="simple_cascade">
|
||
É verdade.
|
||
De qualquer forma, <b>HORA DO DESAFIO!</b>
|
||
<br>
|
||
Desenhe uma rede & simule,
|
||
de modo que <i>todo mundo</i> se infeccione com o "contágio".
|
||
<br>
|
||
(regra nova: você não pode cortar conexões <i>grossas</i>)
|
||
</words>
|
||
|
||
<words id="simple_cascade_end">
|
||
<next wiggle>fan-super-tástico <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="simple_post_cascade">
|
||
Essa propagação de loucura é chamada <b>"cascata de informações"</b>.
|
||
O Sr. Newton caiu nessa cascata em 1720.
|
||
As instituições financeiras caíram nessa cascata em 2008.<ref id="subprime"></ref>
|
||
<br><br>
|
||
Entretanto: <i>esta simulação está incorreta.</i>
|
||
A maioria das ideias <i>não</i> propagam como vírus.
|
||
Para várias crenças e comportamentos, você deve ser "exposto" ao contágio mais que apenas uma vez
|
||
para ser "infectado".
|
||
Então, cientistas criaram uma maneira nova e melhor de
|
||
descrever como ideias/comportamentos propagam, e os chamaram de...
|
||
<next wiggle>“Contágios <i>Complexos</i>!” <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<!-- Complex Contagions -->
|
||
|
||
<words id="complex_complex">
|
||
|
||
Vamos voltar com a ideia de "maioria" e o beber demais <icon name="yellow"></icon> do exemplo anterior!
|
||
Quando você brincou com isso na primeira vez, as pessoas não mudavam seu comportamento.
|
||
|
||
<br><br>
|
||
|
||
Agora, vamos simular o que acontece se as pessoas começarem a beber demais
|
||
<i>quando 50%+ de seus amigos o fazem!</i>
|
||
<b>Antes de simular, se pergunte o que <i>deveria</i> acontecer.</b>
|
||
|
||
<br><br>
|
||
|
||
<b>Agora, comece a simular, e veja o que realmente acontece! <div class="rarr"></div> </b>
|
||
|
||
</words>
|
||
|
||
<words id="complex_complex_2">
|
||
<span style="line-height:1.3em; display:block;">
|
||
|
||
Diferente do contágio anterior "fake news" <icon name="red"></icon>,
|
||
este contágio <icon name="yellow"></icon> <i>não</i> propaga a todo mundo!
|
||
As primeiras pessoas se "infectam", porque apesar de estarem expostos a um indivíduo
|
||
que bebe demais, esse bebedor representa 50% de seus amigos. (é, eles são solitários)
|
||
Em contraste, a pessoa próxima ao final da cadeia <i>não</i> se "infectou",
|
||
porque enquanto ela foi exposta a um amigo que bebe demais,
|
||
esse amigo não passou do limiar de + de 50%.
|
||
|
||
<div style="height:0.75em"></div>
|
||
|
||
Essa % <i>relativa</i> de amigos "infectados" importa.
|
||
<i>Essa é</i> a diferença entre a teoria dos <b>contágios complexos</b><ref id="complex"></ref>
|
||
e a inocente teoria viral dos <b>contágios simples</b>.
|
||
(dá para dizer que "contágios simples" são contágios com limiar de infecção de "mais de 0%")
|
||
|
||
<div style="height:0.75em"></div>
|
||
|
||
Entretanto, contágios não são necessariamente ruins —
|
||
então chega de <i>loucura</i> das multidões, que tal...
|
||
<next>...<i>sabedoria</i> das multidões?</next>
|
||
|
||
</span>
|
||
</words>
|
||
|
||
<words id="complex_complex_3">
|
||
|
||
Aqui, temos uma pessoa <icon name="blue"></icon> que faz trabalho voluntário para... não sei,
|
||
resgatar pessoas em furacões, ou ensinar crianças sem privilégios na comunidade local, ou algo legal assim.
|
||
O ponto é, esse é um contágio complexo "bom".
|
||
Dessa vez, entretanto, digamos que o limiar é de apenas 25% —
|
||
as pessoas querem fazer trabalho voluntário, mas apenas se 25% ou mais de seus amigos também fazem.
|
||
Ei, boa vontade necessita de um pouco de encorajamento social.
|
||
|
||
<br><br>
|
||
|
||
<b>← "Infecte" todo mundo com as boas vibrações!</b>
|
||
|
||
</words>
|
||
|
||
<words id="complex_complex_3_end">
|
||
<span style="line-height:1.3em; display:block;">
|
||
|
||
<b>NOTA:</b> Trabalho Voluntário é apenas <i>um</i> dos muitos tipos de contágio complexo!
|
||
Também estão incluídos: presença em votações, estilo de vida,
|
||
desafiar suas crenças,
|
||
dedicar um tempo para compreender um problema de forma profunda — qualquer coisa
|
||
que precise de mais de uma "exposição".
|
||
Contágios complexos não são <i>necessariamente</i> sensatos,
|
||
mas ser sensato é um contágio complexo.
|
||
|
||
<div style="height:0.75em"></div>
|
||
|
||
(Então, o que é um contágio <i>simples</i> na vida real?
|
||
Geralmente curiosidades, como "o gambá possui 13 mamilos"<ref id="possum"></ref>)
|
||
|
||
<bon id="contagions"></bon>
|
||
|
||
Agora, para <i>realmente</i> mostrar o poder e a esquisitice de contágios complexos, vamos revisitar...
|
||
|
||
<next>...um desafio anterior <div class="rarr"></div> </next>
|
||
|
||
</span>
|
||
</words>
|
||
|
||
<words id="complex_cascade">
|
||
Lembra disso? Desta vez, com um contágio <i>complexo</i> <icon name="blue"></icon>, vai ser um pouco mais difícil...
|
||
<br>
|
||
<b>Tente "infectar" todo mundo com sabedoria complexa! <div class="darr"></div></b>
|
||
</words>
|
||
|
||
<words id="complex_cascade_feel_free">
|
||
(sinta-se livre para apertar 'iniciar' e <i>tentar</i> quantas soluções quiser)
|
||
</words>
|
||
|
||
<words id="complex_cascade_end">
|
||
<next wiggle>DING DING DING <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="complex_post_cascade">
|
||
Agora, você pode achar que você só precisa adicionar conexões para propagar qualquer contágio,
|
||
"complexo" ou "simples", bom ou ruim, sábio ou louco.
|
||
Mas isso realmente é verdade? Bem, vamos revisitar...
|
||
</words>
|
||
<words id="complex_post_cascade_end">
|
||
<next wiggle>...outro desafio anterior <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="complex_prevent">
|
||
Se você apertar "iniciar" abaixo, o contágio complexo <icon name="blue"></icon> vai se propagar para todo mundo.
|
||
Nenhuma surpresa aqui.
|
||
Mas agora, vamos fazer o <i>oposto</i> de tudo o que fizemos até agora:
|
||
<b>desenhe uma rede para <i>evitar</i> que o contágio se espalhe para todo mundo! <div class="darr"></div></b>
|
||
</words>
|
||
|
||
<words id="complex_prevent_2">
|
||
Você viu?
|
||
Enquanto mais conexões irão sempre ajudar a propagar ideias <i>simples</i>,
|
||
<b>mais conexões podem atrapalhar o propagação de ideias <i>complexas</i>!</b>
|
||
(faz você pensar sobre a internet, né?)
|
||
E este não é apenas um problema teórico. Isso pode ser questão de vida...
|
||
</words>
|
||
|
||
<words id="complex_prevent_end">
|
||
<next wiggle>...ou morte. <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="complex_groupthink">
|
||
|
||
<small>As pessoas na NASA eram sabichões.
|
||
Digo, eles usaram as teorias de Newton para nos levar à lua.
|
||
De qualquer modo, resumindo, em 1986,
|
||
<i>apesar das advertências dos engenheiros</i>,
|
||
eles lançaram o <i>Challenger</i>,
|
||
que explodiu e matou 7 pessoas.
|
||
A causa imediata:
|
||
estava muito frio naquela manhã.</small>
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
<small>A causa menos imediata: os gerentes ignoraram as advertências dos engenheiros.
|
||
Por quê? Devido ao <b>pensamento de grupo</b><ref id="groupthink"></ref>.
|
||
Quando um grupo está ligado <i>demais</i>, (como tendem a ser no topo de instituições)
|
||
ele se torna resistente a ideias complexas que desafiam suas crenças ou ego.</small>
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
<small>Então, é assim que instituições podem cair na loucura das multidões.
|
||
Mas como podemos "planejar" a <i>sabedoria</i> das multidões?
|
||
Em resumo, duas palavras:</small>
|
||
|
||
<next>Ligações & Pontes <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<!-- Bonding & Bridging -->
|
||
|
||
<words id="bonding_1">
|
||
← Poucas conexões e uma ideia não consegue se espalhar.
|
||
<br>
|
||
Muitas conexões e você tem o pensamento de grupo. <div class="rarr"></div>
|
||
</words>
|
||
|
||
<words id="bonding_2">
|
||
<b>
|
||
Desenhe um grupo que está no meio termo:
|
||
faça conexões suficientes para espalhar uma ideia complexa!
|
||
<div class="darr"></div>
|
||
</b>
|
||
</words>
|
||
|
||
<words id="bonding_end">
|
||
Muito simples!
|
||
O número de conexões <i>dentro</i> de um grupo é chamado <b>capital social de ligação</b><ref id="social_capital"></ref>.
|
||
Mas e as conexões...
|
||
<next wiggle>...<i>entre</i> grupos?</next>
|
||
</words>
|
||
|
||
<words id="bridging_1">
|
||
Como você já deve ter imaginado,
|
||
o número de conexões <i>entre</i> grupos é chamado
|
||
<b>capital social de ponte</b>.
|
||
Isso é importante porque ajuda os grupos a saírem de sua bolha de visão limitada!
|
||
<br>
|
||
<b>Construa uma ponte para "infectar" todo mundo com bondade:</b>
|
||
</words>
|
||
|
||
<words id="bridging_end">
|
||
Assim como a ligação, existe também um meio termo ideal para as pontes.<ref id="bridge"></ref>
|
||
(desafio extra: tente desenhar uma ponte tão densa que o contágio complexo
|
||
<i>não consegue</i> passar por ela!)
|
||
Agora que nós sabemos como "construir" conexões <i>dentro</i> e <i>entre</i> grupos, vamos...
|
||
<next wiggle>...fazer AMBOS!</next>
|
||
</words>
|
||
|
||
<words id="bb_1">
|
||
|
||
<b style="font-size:2em">DESAFIO FINAL!</b>
|
||
<br>
|
||
Desenhe conexões dentro dos grupos (ligações) e entre os grupos (pontes)
|
||
para espalhar sabedoria por toda a multidão:
|
||
|
||
</words>
|
||
<words id="bb_2">
|
||
|
||
Parabéns, você acaba de desenhar um tipo muito especial de rede!
|
||
Redes com a mistura exata de ligações e pontes
|
||
são profundamente importantes, e são chamadas...
|
||
<next wiggle>“Redes de Pequeno Mundo” <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
<words id="bb_small_world_1">
|
||
|
||
<i>"Unidade sem uniformidade". "Diversidade sem divisão". "E Pluribus Unum: de muitos, um".</i>
|
||
<br>
|
||
Não importa como é dito,
|
||
pessoas de diferentes épocas e culturas geralmente chegam nessa mesma sabedoria:
|
||
<b>
|
||
uma sociedade saudável precisa de um ponto estável de ligações <i>dentro</i> dos grupos
|
||
e pontes <i>entre</i> os grupos.
|
||
</b>
|
||
Assim:
|
||
|
||
</words>
|
||
<words id="bb_small_world_2">
|
||
Não isto...
|
||
<br>
|
||
(porque ideias não propagam)
|
||
</words>
|
||
<words id="bb_small_world_3">
|
||
nem isto...
|
||
<br>
|
||
(porque você vai ter pensamento de grupo)
|
||
</words>
|
||
<words id="bb_small_world_4">
|
||
...mas <i>ISTO:</i>
|
||
</words>
|
||
<words id="bb_small_world_5">
|
||
|
||
Cientistas de rede hoje possuem uma definição matemática para essa sabedoria antiga:
|
||
a <b>rede de pequeno mundo</b><ref id="small_world"></ref>.
|
||
Essa mistura ótima de ligações+pontes descreve como
|
||
nossos neurônios estão conectados<ref id="swn_neurons"></ref>,
|
||
nutre criatividade coletiva<ref id="swn_creativity"></ref>
|
||
e solucionamento de problemas<ref id="swn_social_physics"></ref>,
|
||
e até uma vez ajudou o Presidente dos EUA John F. Kennedy a (quase) evitar uma guerra nuclear!<ref id="swn_jfk"></ref>
|
||
Então, sim, mundos pequenos têm grande importância.
|
||
|
||
</words>
|
||
<words id="bb_small_world_end">
|
||
<next>ok, vamos resumir isto... <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<!-- Sandbox -->
|
||
|
||
<words id="sandbox_caption">
|
||
(oi... quer um segredo?<ref id="sandbox"></ref>)
|
||
</words>
|
||
|
||
<words id="sandbox_contagion">
|
||
Contágio:
|
||
</words>
|
||
<words id="sandbox_contagion_simple">
|
||
simples
|
||
</words>
|
||
<words id="sandbox_contagion_complex">
|
||
complexo
|
||
</words>
|
||
<words id="sandbox_color_chooser">
|
||
A Cor do Contágio:
|
||
</words>
|
||
<words id="sandbox_tool_chooser">
|
||
Selecione uma ferramenta...
|
||
</words>
|
||
|
||
<words id="sandbox_tool_pencil">
|
||
Desenhar rede
|
||
</words>
|
||
<words id="sandbox_tool_add">
|
||
+ Pessoa
|
||
</words>
|
||
<words id="sandbox_tool_add_infected">
|
||
+ "Infectado"
|
||
</words>
|
||
<words id="sandbox_tool_move">
|
||
Arrastar Pessoa
|
||
</words>
|
||
<words id="sandbox_tool_delete">
|
||
- Pessoa
|
||
</words>
|
||
<words id="sandbox_tool_clear">
|
||
<b>LIMPAR TUDO</b>
|
||
</words>
|
||
|
||
<words id="sandbox_shortcuts_label">
|
||
(...ou use atalhos de teclado!)
|
||
</words>
|
||
|
||
<words id="sandbox_shortcuts">
|
||
[1]: + Pessoa [2]: + "Infectado"
|
||
<br>
|
||
[Esp]: Arrastar [Backspace]: Apagar
|
||
</words>
|
||
|
||
<!-- Conclusion -->
|
||
|
||
<words id="conclusion_1">
|
||
|
||
<div style="font-size: 30px;">
|
||
CONCLUINDO: tudo trata de...
|
||
</div>
|
||
<div style="
|
||
width: 100%;
|
||
position: absolute;
|
||
font-size: 88px;
|
||
top: 20px;
|
||
line-height: 100px; display:block;
|
||
">
|
||
Contágios & Conexões
|
||
</div>
|
||
|
||
<div style="
|
||
width: 710px;
|
||
position: absolute;
|
||
top: 120px;
|
||
left: 250px;
|
||
">
|
||
<small><b>Contágios:</b>
|
||
Assim como neurônios transmitem sinais no cérebro,
|
||
pessoas transmitem crenças & comportamentos em uma sociedade.
|
||
Não apenas influenciamos nossos amigos,
|
||
influenciamos os amigos de nossos amigos, e até os amigos dos amigos de nossos amigos!<ref id="three_degrees"></ref>
|
||
(“seja a mudança que você quer ver no mundo” etc etc)
|
||
Mas, como nos neurônios, não são apenas os sinais que importam...</small>
|
||
</div>
|
||
|
||
<div style="
|
||
width: 710px;
|
||
position: absolute;
|
||
top: 280px;
|
||
left: 250px;
|
||
">
|
||
<small><b>Conexões:</b>
|
||
Muito poucas conexões e ideias complexas não propagam.
|
||
Conexões <i>demais</i> e ideias complexas são exterminadas por pensamento de grupo.
|
||
O truque é construir uma rede de pequeno mundo, a mistura ótima entre
|
||
ligações e pontes: <i>de muitos, um.</i></small>
|
||
</div>
|
||
|
||
<div style="
|
||
width: 350px;
|
||
position: absolute;
|
||
top: 410px;
|
||
left: 220px;
|
||
text-align: center;
|
||
color: #999;
|
||
">
|
||
(quer fazer suas próprias simulações?
|
||
Olhe o Modo Experimental, clicando na (★) abaixo!)
|
||
</div>
|
||
|
||
<div style="
|
||
width: 400px;
|
||
position: absolute;
|
||
top: 395px;
|
||
right: 0px;
|
||
text-align: right;
|
||
">
|
||
Então, e a questão do comecinho?
|
||
Por que algumas multidões <i>tendem</i> à...
|
||
</div>
|
||
<div style="
|
||
width: 300px;
|
||
position: absolute;
|
||
top: 460px;
|
||
right: 0px;
|
||
">
|
||
<next>...sabedoria e/ou loucura?</next>
|
||
</div>
|
||
|
||
</words>
|
||
|
||
<words id="conclusion_2">
|
||
<span style="line-height:1.4em; display:block;">
|
||
|
||
<div style="height:0.5em"></div>
|
||
|
||
De Newton à NASA à
|
||
<br>
|
||
ciência de rede, cobrimos muito aqui
|
||
<br>
|
||
hoje. Resumindo tudo, a loucura das multidões
|
||
<br>
|
||
não necessariamente se deve a <i>pessoas individuais</i>, mas
|
||
<br>
|
||
a como estamos enroscados em uma grudenta teia da rede.
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
Isso <i>NÃO</i> significa abandonar responsabilidade pessoal, porque
|
||
<br>
|
||
também somos os <i>tecelões</i> dessa teia. Então, melhore seus contágios:
|
||
<br>
|
||
seja cético de ideias que te lisonjeiem<ref id="flatter"></ref>, use tempo entendendo ideias
|
||
<br>
|
||
complexas. E melhore suas conexões: ligue-se a pessoas similares,
|
||
<br>
|
||
mas também construa pontes entre divisões culturais/políticas.
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
Podemos tecer uma rede sábia. Claro, é mais difícil
|
||
<br>
|
||
que desenhar linhas em uma tela...
|
||
|
||
<next>...mas ainda assim, compensa.</next>
|
||
|
||
</span>
|
||
</words>
|
||
|
||
<words id="conclusion_3">
|
||
<i>
|
||
“Os grandes triunfos e tragédias da história são provocados
|
||
não pelas pessoas serem fundamentalmente boas ou más,
|
||
mas por elas serem, fundamentalmente, pessoas.”
|
||
</i>
|
||
<br>
|
||
<span style="position:relative; top:5px">~</span> Neil Gaiman & Terry Pratchett
|
||
<div style="height:0.8em"></div>
|
||
<next small><3</next>
|
||
</words>
|
||
|
||
<!-- Credits -->
|
||
|
||
<words id="credits">
|
||
|
||
<div style="text-align:center; color:#fff; letter-spacing: 1px; font-size: 24px; line-height: 27px;">
|
||
|
||
<span style="color:#777; position:relative; top:5px;">
|
||
criado por</span>
|
||
<div style="font-size: 3em; line-height: 1.0em;">
|
||
NICKY CASE</div>
|
||
<a target="_blank" href="http://ncase.me" style="text-decoration:none">
|
||
brinque com meus outros experimentos</a> ·
|
||
<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
|
||
me siga no twitter</a>
|
||
|
||
<br><br>
|
||
|
||
<span style="color:#777; position:relative; top:5px; display: inline-block; margin-top: 15px;">
|
||
muito amor e obrigado a</span>
|
||
<div style="font-size: 3em; line-height: 1.0em;">
|
||
MEUS APOIADORES NO PATREON</div>
|
||
<a onclick='publish("reference/show", ["supporters"]);'>
|
||
veja nomes & desenhos dos apoiadores</a> ·
|
||
<a onclick='publish("reference/show", ["playtesters"]);'>
|
||
veja testadores</a>
|
||
<br>
|
||
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
|
||
me ajude a fazer mais disso! <3</a>
|
||
|
||
<br><br>
|
||
|
||
<span style="display: inline-block; margin-top: 15px;">
|
||
♫ música:
|
||
<a target="_blank" href="http://freemusicarchive.org/music/Komiku/Tale_on_the_Late/" style="text-decoration:none">
|
||
"Friends 2018" and "Friends 2068"</a>
|
||
por Komiku
|
||
<br>
|
||
</> <i>Multidões (Crowds)</i> é
|
||
<a target="_blank" href="https://github.com/ncase/crowds" style="text-decoration:none">
|
||
completamente open source</a>
|
||
</span>
|
||
|
||
<br>
|
||
|
||
<bon id="further_reading"></bon>
|
||
|
||
</div>
|
||
|
||
</words>
|
||
|
||
<!-- x. misc -->
|
||
<words id="WIN">
|
||
ACERTOU
|
||
</words>
|
||
<words id="sim_start">
|
||
iniciar simulação
|
||
</words>
|
||
<words id="sim_stop">
|
||
reiniciar & redesenhar
|
||
</words>
|
||
<words id="translations_exist">
|
||
Traduções de fãs:
|
||
</words>
|
||
<words id="translations_do_not_exist">
|
||
<!-- There's no need to TRANSLATE this line since, well, -->
|
||
<!-- it'll only show up if no translations exist -->
|
||
Mas o quê, ainda não existem traduções de fãs?!
|
||
</words>
|
||
<words id="translations_add">
|
||
(adicione suas próprias!)
|
||
</words>
|
||
|
||
<!-- - - - - - - -->
|
||
<!-- BONUS BOXES -->
|
||
<!-- - - - - - - -->
|
||
|
||
<!--
|
||
Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
|
||
(And then afterwards, the final thing, translate the References)
|
||
-->
|
||
|
||
<bonus id="books">
|
||
|
||
<h3>
|
||
Uma resposta rápida à <i>Sabedoria das Multidões</i> de James Surowiecki
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<img src="sprites/bonus/surowieki.jpg" width="200" height="300" style="float:left; margin-right:1em"/>
|
||
|
||
Primeiramente, eu não estou desmentindo
|
||
<a target="_blank" href="https://en.wikipedia.org/wiki/The_Wisdom_of_Crowds">
|
||
este livro.</a>
|
||
Trata-se de um livro bom, e Surowiecki estava tentando chegar à mesma pergunta que eu:
|
||
<b>“por que algumas multidões se voltam pra loucura ou pra sabedoria?”</b>
|
||
|
||
<br><br>
|
||
|
||
A resposta de Surowiecki: multidões tomam boas decisões quando cada indivíduo é tão independente quanto possível.
|
||
Ele conta a história de uma feira municipal,
|
||
na qual os cidadãos foram convidados a estimar o peso de um boi.
|
||
Surpreendentemente, a média de <i>todos</i> os palpites foi melhor do que <i>qualquer um</i> dos palpites isoladamente</i>.
|
||
Mas este é o detalhe: as pessoas tem que dar os seus palpites de forma <i>independente</i> dos outros.
|
||
Caso contrário,
|
||
eles seriam influenciados pelos palpites anteriores incorretos,
|
||
e a resposta média seria altamente enviesada.
|
||
|
||
<br><br>
|
||
|
||
Mas... Eu não acho que "tornar as pessoas as mais independentes possível" é a resposta completa.
|
||
Até mesmo gênios, que nós caracterizamos de forma errada como os pensadores mais independentes,
|
||
são altamente influenciados pelos outros. Como Sir Isaac Newton disse,
|
||
<i>“Se vi mais longe foi por estar de pé sobre ombros de gigantes.”</i>
|
||
|
||
<br><br>
|
||
|
||
Pois então, qual ideia está correta?
|
||
Por acaso sabedoria resulta de pensar por você mesmo ou pensar com os outros?
|
||
A resposta é: "sim".
|
||
|
||
<br><br>
|
||
|
||
É por isso que eu vou tentar explicar de uma forma que gera mais perguntas:
|
||
tentar encontrar o meio termo entre dependência e interdependência —
|
||
isso é, como encontrar uma multidão sensata.
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
<bonus id="connections">
|
||
|
||
<h3>
|
||
Quais são os outros tipos de conexões existentes?
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
Para simplificar,
|
||
minha simulação finge que as pessoas só podem estar conectadas através de amizades,
|
||
e todos os tipos de amizades são iguais.
|
||
Mas cientistas de conexões <i>consideram</i> outras formas de se conectar, como por exemplo:
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/connection1.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>Conexões unidirecionais.</b> Alice é o chefe de Bob, mas Bob não é o chefe de Alice.
|
||
Carol é mãe de Dave, mas Dave não é pai de Carol.
|
||
"Chefes" & "pais" são relacionamentos <i>unidirecionais</i>:
|
||
o relacionamento é de via única.
|
||
Em contrapartida, "amizade" é um relacionamento <i>bidirecional</i>:
|
||
a relação flui em ambos os lados. (bem, pelo menos é assim que deveria ser)
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/connection2.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>Conexões de Peso.</b> Elinor e Frankie são meros conhecidos.
|
||
George e Harry são Melhores Amigos.
|
||
Mesmo que exista uma relação de "amizade" em ambos os casos, a segunda é mais forte.
|
||
Nós então dizemos que essas duas conexões tem "pesos" diferentes.
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/map.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
Lembre-se: <b>todas estas simulações estão erradas.</b> Da mesma forma que um mapa está "errado".
|
||
Você está vendo o mapa na esquerda? Edifícios não são blocos cinza sem expressão!
|
||
Palavras não voam por cima da cidade! Todavia, mapas são úteis não <i>apesar</i> de serem simplificados,
|
||
mas <i>porque</i> são simplificados. O mesmo se aplica às simulações, ou qualquer teoria científica.
|
||
É <i>claro</i> que eles estão "errados" — é isso que os torna <i>úteis</i>.
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
<bonus id="contagions">
|
||
|
||
<h3>
|
||
Quais são os outros tipos de contágios existentes?
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
Existem muitas, mas muitas outras formas que cientistas de conexões podem simular o "contágio"!
|
||
Eu escolhi a forma mais simples por motivos educacionais.
|
||
Mas existem outras formas de fazer isso:
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion1.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>Contágio por Aleatoriedade</b>.
|
||
Ser "exposto" por um contágio não <i>garante</i> que você será infectado,
|
||
isso apenas torna o evento mais <i>provável</i>.
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion2.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>Pessoas tem diferentes limiares de contágio.</b>
|
||
Minha simulação finge que todo mundo tem o mesmo limiar para beber demais (50%) ou
|
||
voluntariado (25%) ou desinformação (0%).
|
||
Claro, isso não acontece na vida real, e você pode fazer sua simulação refletir isso.
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion3.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>A ecologia do contágio.</b>
|
||
E se existissem <i>múltiplos</i> contágios com <i>diferentes</i> limiares?
|
||
Por exemplo, um tipo de contágio de "loucura" simples e um tipo de contágio de "sabedoria" complexo.
|
||
Se alguém está infectado com loucura, ele pode ser infectado com sabedoria?
|
||
ou vice-versa?
|
||
Alguém consegue ser infectado com ambos?
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion4.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>Contágios mutantes e que evoluem.</b>
|
||
Ideias não são transmitidas perfeitamente de uma pessoa à outra como um vírus.
|
||
Como um jogo de Telefone sem Fio, a mensagem vai se modificando cada vez que é contada —
|
||
e, às vezes, a mensagem mutante vai ser mais infecciosa que a original!
|
||
Então, com o decorrer do tempo, ideias "evoluem" para serem mais cativantes, copiáveis, contagiantes.
|
||
|
||
<div style="clear:both"></div>
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
<bonus id="further_reading">
|
||
|
||
<h3>
|
||
Quero aprender mais! O que mais eu posso ler e/ou jogar?
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
Essa explicação jogável foi apenas um ponto de partida para a sua curiosidade,
|
||
então você pode ir mais fundo em um vasto oceano de conhecimento!
|
||
Aqui estão mais coisas sobre conexões e sistemas sociais:
|
||
|
||
<br><br>
|
||
|
||
<img src="sprites/bonus/connected.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
<b>Livro:</b>
|
||
<a target="_blank" href="http://www.connectedthebook.com/">
|
||
Conectados (Connected)</a>
|
||
por Nicholas Christakis e James Fowler (2009).
|
||
Um tour acessível de como as conexões afetam nossas vidas, para o bem ou para o mal.
|
||
<a target="_blank" href="http://www.connectedthebook.com/pdf/excerpt.pdf">
|
||
Aqui está um fragmento: Prefácio & Capítulo 1 (em inglês)
|
||
</a>
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/trust.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
<b>Interativo:</b>
|
||
<a target="_blank" href="https://brunolemos.github.io/trust/">
|
||
A Evolução da Confiança</a> por Nicky Case (eu) (2017) <a target="_blank" href="http://ncase.me/trust/">(original em inglês)</a>.
|
||
Um jogo acerca da teoria dos jogos sobre como a cooperação é construída... ou destruída.
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/polygons.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
<b>Interativo:</b>
|
||
<a target="_blank" href="http://ncase.me/polygons-pt-br/">
|
||
Parábola dos Polígonos</a> por Vi Hart e Nicky Case (eu de novo) (2014) <a target="_blank" href="http://ncase.me/polygons/">(original em inglês)</a>.
|
||
Uma história de como escolhas inofensivas podem criar um mundo perigoso.
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/ee.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
Ou se você apenas deseja ver uma galeria de projetos educacionais interativos, aqui está o
|
||
<a target="_blank" href="http://explorabl.es/">
|
||
Explorable Explanations (em inglês)</a>,
|
||
um hub para aprender jogando!
|
||
|
||
<div style="clear:both"></div>
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
|
||
<!-- - - - - - - -->
|
||
<!-- REFERENCES -->
|
||
<!-- - - - - - - -->
|
||
|
||
<!--
|
||
Final thing! These references also need you to TRANSLATE:
|
||
-->
|
||
|
||
<reference id="drunk">
|
||
|
||
<h3>
|
||
“quase todos os estudantes [universitários] reportaram que seus amigos bebiam mais do que eles.”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://www.ncbi.nlm.nih.gov/pubmed/1758185">
|
||
“Vieses na percepção de normas de consumo de bebidas entre os estudantes universitários” (em inglês)</a> por Baer et al (1991)
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="majority">
|
||
|
||
<h3>
|
||
“A Ilusão da Maioria”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0147617">
|
||
“A Ilusão da Maioria nas Conexões Sociais” (em inglês)</a> por Lerman et al (2016).
|
||
<br>
|
||
Relacionado: <a target="_blank" href="https://pt.wikipedia.org/wiki/Paradoxo_das_amizades">
|
||
Paradoxo das Amizades</a>.
|
||
</div>
|
||
</reference>
|
||
<reference id="contagion">
|
||
|
||
<h3>
|
||
“forte evidência estatística de que
|
||
fumar, saúde, felicidade, eleições e
|
||
níveis de cooperação
|
||
são todos contagiosos”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
Do livro <a target="_blank" href="http://www.connectedthebook.com/">
|
||
Conectados</a>, maravilhosamente escrito — e acessível a pessoas leigas —
|
||
por Nicholas Christakis e James Fowler (2009).
|
||
|
||
</div>
|
||
</reference>
|
||
<reference id="suicides">
|
||
|
||
<h3>
|
||
“algumas evidências apontam que suicídios também são [contagiosos]”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="http://www.jstor.org/stable/42000514?seq=4#page_scan_tab_contents">
|
||
“Contágio do Suicídio e o Relatório do Suicídio: Recomendações de um Workshop Nacional” (em inglês)</a>
|
||
por O'Carroll et al (1994), endossado pelo maldito Centro de Controle & Prevenção de Doenças (CDC).
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="shootings">
|
||
|
||
<h3>
|
||
“algumas evidências apontam que tiroteios também são [contagiosos]”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0117259">
|
||
“Contágio em Massacres e Tiroteios em Escolas” (em inglês)</a> por Towers et al (2015).
|
||
|
||
<br><br>
|
||
|
||
Veja também: a campanha
|
||
<a target="_blank" href="http://www.dontnamethem.org/">
|
||
Don't Name Them</a>,
|
||
que estimula que veículos de notícias <i>NÃO</i> exiba nome,manifesto e feed social de assassinos que realizaram massacres.
|
||
Isso espalha o contágio.
|
||
No lugar, os veículos de notícias deveriam focar nas vítimas, primeiros socorros, heróis civis
|
||
e a comunidade em luto e se recuperando.
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="subprime">
|
||
|
||
<h3>
|
||
“As instituições financeiras do mundo caíram em uma cascata em 2008.”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://newrepublic.com/article/63023/wall-streets-lemmings">
|
||
“Lemmings de Wall Street” (em inglês)</a> por Cass Sunstein, é uma leitura rápida e não técnica.
|
||
Publicado em Outubro de 2008, logo no início da crise de 2008.
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="complex">
|
||
|
||
<h3>
|
||
“a teoria do contágio complexo.”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<a target="_blank" href="https://www.unc.edu/~fbaum/teaching/articles/Granovetter_AJS_1978.pdf">
|
||
“Modelos de Limiares do Comportamento Coletivo” (em inglês)</a> por Granovetter (1978)
|
||
foi a primeira vez que alguém descreveu um modelo de "contágio complexo".
|
||
(apesar de ele não usar esse nome em específico)
|
||
|
||
<br><br>
|
||
|
||
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0180802">
|
||
“Evidência para um modelo de contágio complexo a partir de dados observáveis” (em inglês)</a>
|
||
por Sprague & House (2017)
|
||
mostra que contágios complexos, de fato, existem. (pelo menos, no meio que eles observaram)
|
||
|
||
<br><br>
|
||
|
||
Finalmente,
|
||
<a target="_blank" href="https://arxiv.org/pdf/cond-mat/0403699.pdf">
|
||
“Comportamento Universal em um modelo generalizado de contágio” (em inglês)</a> por Dodds & Watts (2004)
|
||
propõe um modelo que unifica <i>todos</i> os tipos de contágio:
|
||
simples e complexo, biológico e social!
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="possum">
|
||
<h3>
|
||
“o gambá tem 13 mamilos
|
||
</h3>
|
||
<div>
|
||
distribuídos em um anel de 12 mamilos, mais um no centro
|
||
</div>
|
||
</reference>
|
||
<reference id="groupthink">
|
||
|
||
<h3>
|
||
“pensamento de grupo (groupthink)”
|
||
</h3>
|
||
|
||
<div>
|
||
Essa palavra <i>(pensamento de grupo ou groupthink)</i> inspirada no pensamento Orwelliano foi inventado por Irving L. Janis em 1971.
|
||
<a target="_blank" href="https://web.archive.org/web/20100401033524/http://apps.olin.wustl.edu/faculty/macdonald/GroupThink.pdf">
|
||
No seu artigo original (em inglês)</a>,
|
||
Janis investiga casos de pensamento em grupo, lista suas causas e — felizmente —
|
||
algumas possíveis soluções.
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="social_capital">
|
||
|
||
<h3>
|
||
“capital social de ligação e de ponte”
|
||
</h3>
|
||
|
||
<div>
|
||
Esses dois tipos de capital social — "ligação" e "ponte" —
|
||
foram nomeados por Robert Putnam em seu perspicaz livro,
|
||
<a target="_blank" href="http://bowlingalone.com/">
|
||
Bowling Alone</a> (disponível apenas em inglês). Sua descoberta:
|
||
em quase <i>todas</i> as formas empíricas de conectividade social,
|
||
os Norte-Americanos estão mais sozinhos que nunca.
|
||
Uau!
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="bridge">
|
||
|
||
<h3>
|
||
“capital social de ponte tem um meio termo”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://sociology.stanford.edu/sites/default/files/publications/the_strength_of_weak_ties_and_exch_w-gans.pdf">
|
||
“A Força de Laços Frágeis” (em inglês)</a> por Granovetter (1973)
|
||
mostrou que as conexões através de grupos ajudam a espalhar contágios simples (como por exemplo, informação),
|
||
mas
|
||
<a target="_blank" href="http://www.jstor.org/stable/10.1086/521848?seq=1#page_scan_tab_contents">
|
||
“Contágios Complexos e a Fragilidade de Laços Longos” (em inglês)</a> por Centola & Macy (2007)
|
||
mostra que as conexões entre grupos não necessariamente ajudam contágios complexos
|
||
e, na verdade, podem atrapalhar sua disseminação!
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="small_world">
|
||
|
||
<h3>
|
||
“as conexões de pequeno mundo”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
A ideia de "pequeno mundo" se popularizou pelo
|
||
<a target="_blank" href="http://www.jstor.org/stable/2786545">experimento de Travers & Milgram's 1969 (em inglês)</a>,
|
||
o qual mostrou que, em média, quaisquer duas pessoas aleatórias nos Estados Unidos
|
||
estavam a apenas seis amizades de distância — "seis graus de separação"!
|
||
|
||
<br><br>
|
||
|
||
As conexões de pequeno mundo conseguiram mais carga matemática com o artigo
|
||
<a target="_blank" href="http://leonidzhukov.net/hse/2014/socialnetworks/papers/watts-collective_dynamics-nature_1998.pdf">
|
||
“Dinâmicas coletivas de conexões de pequeno mundo” (em inglês)</a> por Watts & Strogatz (1998),
|
||
que propôs um algoritmo para criar conexões
|
||
com ambos distância média curta (baixo nível de separação)
|
||
e alto agrupamento (amigos possuem vários amigos em comum) —
|
||
ou seja, uma rede que atinge o meio termo ideal!
|
||
|
||
<br><br>
|
||
|
||
Você também pode brincar com
|
||
<a target="_blank" href="http://worrydream.com/ScientificCommunicationAsSequentialArt/">
|
||
a adaptação visual e interativa deste artigo (em inglês)</a> de Bret Victor (2011).
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_neurons">
|
||
|
||
<h3>
|
||
“[conexões de mundo pequeno] descrevem como nossos neurônios estão conectados”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://www.ncbi.nlm.nih.gov/pubmed/17079517">
|
||
“Conexões no cérebro de Pequeno Mundo” (em inglês)</a> por Bassett & Bullmore (2006).
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_creativity">
|
||
|
||
<h3>
|
||
“[conexões de pequeno mundo] dão origem à criatividade coletiva”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<a target="_blank" href="http://www.jstor.org/stable/10.1086/432782?seq=1#page_scan_tab_contents">
|
||
“Colaboração e Criatividade: O Problema do Pequeno Mundo” (em inglês)</a> por Uzzi & Spiro (2005).
|
||
Esse artigo analisa as conexões sociais das peças da Broadway ao longo do tempo
|
||
e descobriu que, sim, os grupos são mais criativos quando trata-se de um grupo de "pequeno mundo"!
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_social_physics">
|
||
|
||
<h3>
|
||
“[conexões de pequeno mundo] dão origem à resolução de problemas de forma coletiva”
|
||
</h3>
|
||
|
||
<div>
|
||
Veja
|
||
<a target="_blank" href="http://socialphysics.media.mit.edu/">
|
||
“Física Social” (em inglês)</a> pelo Professor do MIT, Alex "Sandy" Pentland (2014),
|
||
para uma abordagem baseada em dados para a inteligência coletiva.
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_jfk">
|
||
|
||
<h3>
|
||
“[conexões de pequeno mundo] ajudaram John F. Kennedy (por pouco) a evitar uma guerra nuclear!”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
Além da explosão do ônibus espacial Challenger da NASA, o mais notório exemplo de pensamento em grupo
|
||
foi o fiasco da Baía dos Porcos.
|
||
Em 1961, o então presidente dos Estados Unidos, John F. Kennedy, e seu time de conselheiros pensaram que seria
|
||
— por alguma razão —
|
||
uma boa ideia invadir secretamente Cuba e derrubar Fidel Castro.
|
||
Eles falharam.
|
||
Na verdade, pior que falhar: isso levou à Crise dos Mísseis de Cuba de 1962,
|
||
<i>o mais perto que o mundo já esteve de uma guerra nuclear em grande escala.</i>
|
||
|
||
<br><br>
|
||
|
||
Sim, JFK realmente pisou na bola dessa vez.
|
||
|
||
<br><br>
|
||
|
||
Mas, após aprender algumas duras lições do fiasco de Baía dos Porcos,
|
||
JFK re-organizou seu time para evitar o pensamento de grupo.
|
||
Entre várias outras coisas, ele:
|
||
1) apoiou ativamente as pessoas a apontarem críticas,
|
||
assim diminuindo o "limiar de contágio" para ideias alternativas.
|
||
E
|
||
2) ele dividiu seu time em subgrupos antes de se reunirem,
|
||
o que deu ao grupo deles um design semelhante a uma "rede de pequeno mundo"!
|
||
Juntas, essa organizações permitiram criar um ambiente saudável de diversidades de opinião,
|
||
mas sem estar muito segmentado — uma sabedoria das multidões.
|
||
|
||
<br><br>
|
||
|
||
E então, com os mesmos <i>indivíduos</i> que decidiram na Baía dos Porcos,
|
||
porém rearranjados de forma <i>coletiva</i> para decidirem na Crise Cubana de Mísseis...
|
||
o time de JFK conseguiu alcançar um acordo de paz com o líder Soviético Nikita Khrushchev.
|
||
Os Soviéticos removeriam seus mísseis de Cuba e, em retorno,
|
||
os EUA prometeriam não invadir Cuba novamente.
|
||
(e também concordaram, em segredo, em remover os mísseis Americanos da Turquia)
|
||
|
||
<br><br>
|
||
|
||
E essa é a história de como toda a humanidade quase morreu.
|
||
Mas uma rede de pequeno mundo salvou o dia! Mais ou menos.
|
||
|
||
<br><br>
|
||
|
||
Você pode ler mais sobre isso
|
||
<a target="_blank" href="https://hbr.org/2013/11/how-john-f-kennedy-changed-decision-making">
|
||
no Harvard Business Review (em inglês)</a>,
|
||
ou
|
||
<a target="_blank" href="https://web.archive.org/web/20100401033524/http://apps.olin.wustl.edu/faculty/macdonald/GroupThink.pdf">
|
||
no artigo original sobre pensamento de grupo (groupthink) (em inglês)</a>.
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="three_degrees">
|
||
|
||
<h3>
|
||
“nós influenciamos [...] os amigos dos amigos dos nossos amigos!”
|
||
</h3>
|
||
|
||
<div>
|
||
Novamente, do livro maravilhoso de Nicholas Christakis e James Fowler,
|
||
<a target="_blank" href="http://www.connectedthebook.com/">
|
||
Conectados</a> (2009).
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="flatter">
|
||
<h3>
|
||
“fique cético de ideias que te deixam maravilhados”
|
||
</h3>
|
||
<div>
|
||
sim, incluindo as ideias <i>neste</i> guia interativo.
|
||
</div>
|
||
</reference>
|
||
<reference id="sandbox">
|
||
|
||
<h3>
|
||
★ Modo Experimental ★
|
||
</h3>
|
||
|
||
<div>
|
||
Os atalhos do teclado (1, 2, espaço, backspace)
|
||
funcionam em <i>todos</i> os desafios, não apenas no Modo Experimental!
|
||
Sério,você pode voltar para um capítulo diferente
|
||
e editar a simulação que está lá.
|
||
De fato, foi assim que <i>EU</i> criei todos os desafios. Divirta-se!
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="supporters" hidden=yes large=yes>
|
||
<div>
|
||
To
|
||
<a target="_blank" href="https://www.patreon.com/ncase">meus apoiadores no Patreon</a>:
|
||
Eu estou profundamente grato.
|
||
Sua generosidade <i>literalmente</i> me alimenta e paga meu aluguel,
|
||
e garante a liberdade criativa para fazer esses jogos esquisitos de matemática/ciências-sociais.
|
||
Do fundo do meu coração, muito obrigado!
|
||
</div>
|
||
</reference>
|
||
<reference id="playtesters" hidden=yes large=yes>
|
||
<div>
|
||
|
||
Muito obrigado a todos que testaram <i>Crowds</i>
|
||
durante seus vários estágios de vida!
|
||
|
||
<br><br>
|
||
<b>O Protótipo:</b>
|
||
<br>
|
||
Maria ·
|
||
Monica Srivastava
|
||
|
||
<br><br>
|
||
<b>O Alpha:</b>
|
||
<br>
|
||
Glen Chiacchieri ·
|
||
Kalli Repzeti ·
|
||
Mali Akmanalp ·
|
||
Toph Tucker
|
||
|
||
<br><br>
|
||
<b>O Beta:</b>
|
||
<br>
|
||
Alex Dytrych ·
|
||
Amit Patel ·
|
||
Cassandra McClure ·
|
||
Catherine Ray ·
|
||
Josh Comeau ·
|
||
Kayle Sawyer ·
|
||
Matthew Conlen ·
|
||
Srini Kadamati ·
|
||
Vanessa Shen ·
|
||
Wick Perry
|
||
|
||
</div>
|
||
</reference>
|
||
|
||
</span>
|
||
|
||
<!--
|
||
|
||
And that's it! That's the last of what needed to a TRANSLATE
|
||
|
||
Thank you so, so much for doing this again, wow.
|
||
|
||
Finally, go to "translations.txt" and follow the instructions there,
|
||
in order to let this game "know" your translation exists.
|
||
|
||
-->
|