bic
/
welcome-to-the-fediverse
forked from rodia/welcome-to-the-fediverse


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
							<!doctype html>
<html lang="it">

	<head>
		<meta charset="utf-8">

		<title>The Fediverse</title>

		<meta name="description" content="A short description of Fediverse Galaxy for potential-users">
		<meta name="author" content="freebird">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/moon_freebird.css" id="theme">
		<link rel="stylesheet" href="plugin/title-footer/title-footer.css">

<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
	</head>

	<body>

		<div class="reveal">

<!-- Any section element inside of this container is displayed as a slide -->

			<div class="slides">
<!--Slide-->
<section>
<section data-background-video="./img/1125322784.mp4" data-background-color="#000000" data-background-video-loop="true">
						<h2>Welcome To</h2>
						<h1>The Fediverse</h1>
<!-- a video alternative for the welcome slide: https://player.vimeo.com/external/226635303.sd.mp4?s=7cd8567b0ab8593cf3249fbced6564876c206165&profile_id=164-->
				</section>
				<section>
						<h2>Hacklab _TO</h2>
							<h3>autistici.org/underscore</h3>
							<p>Ci troviamo tutti i mercoledì al Gabrio</p>
							<p>Facciamo stakkastakka su Radio Blackout</p>
							<p>Tanti progetti (autodifesa digitale?)</p>
				</section>
				<section>
					<h2>Warm-up hackit 0X16</h2>
					<h3>30maggio-2giugno / Firenze</h3>
				</section>
			</section>
<!--Slide-->
				<section>
					<h1>Il Fediverso</h1>
					<small><span style="color:red">Fediverso</span> (neologismo sincratico o portmanteau) da: <span style="color:red">Fed</span>erabile e Un<span style="color:red">iverso</span></small>
					<h3>Cosa, Come, Quando, ma soprattutto ... perchè</h3>

					<img width="250" height="250" data-src="./img/220px-Fediverse_logo_proposal.svg.png" style="background:none; border:none; box-shadow:none;">
				</section>
<!--Slide VERT-BLOCK-1-START-->

<section>
				<section>
					<h3>Cominciamo dal perchè</h3>
					<img data-src="./img/headlines.png" style="background:none; border:none; box-shadow:none;">
				<aside class="notes">scandalo Cambridge Analytica facebook e trump, caso Mainstream Network e facebook referendum brexit, profilazione a scopo commerciale e di controllo sociale, notizia dell'enorme trasferimento di denaro di Google in paradiso fiscale</aside>
				</section>
				<section>
					<h2>Prima di tutto ...</h2>
					<h2>una scelta politica</h2>
				</section>
<!--Slide-->
<!--Table START-->
			<style>
				table, th, td {
					border: 1px solid black;
					border-collapse: collapse;
					}
				th, td {
					padding: 5px;
					text-align: center;
					}
			</style>
			<section>
				<table style="width:100%">
				<tr>
					<th></th>
					<th><img src="./img/bluepill.png" style="background:none; border:none; box-shadow:none;"style="width:5%"></th>
					<th><img src="./img/redpill.png" style="background:none; border:none; box-shadow:none;"style="width:5%"></th>
				</tr>
				<tr>
					<td><small>Raccolta dati Utenti</small></td>
					<td><small>spesso vengono richieste molte informazioni (nome, cognome, telefono, altra mail, ecc...)</small></td>
					<td><small>vengono richieste solo le informazioni minime necessarie (indirizzo mail ed una password)</small></td>
				</tr>
				<tr>
					<td><small>Privacy</small></td>
					<td><small>normalmente tracciano gli ip di tutti i dispositivi da cui ci si connette</small></td>
					<td><small>molto spesso questi servizi non tracciano gli IP relativi alle connessioni</small></td>
				</tr>
				<tr>
					<td><small> </small></td>
					<td><small>il livello di privacy che avremo è limitato da chi gestisce il servizio</small></td>
					<td><small>siamo noi a scegliere il livello di privacy che preferiamo</small></td>
				</tr>
				<tr>
					<td><small>Profilazione</small></td>
					<td><small>spesso attuata per scopi commerciali ed a volte anche per controllo sociale</small></td>
					<td><small>i social open source nascono principalmente per combattere questi meccanismi</small></td>
				</tr>
				</table>
				<br>

			</section>
<!--Slide-->
			<section>
				<h3>e ancora...</h3>
				<table style="width:100%">
				<tr>
					<th>...</th>
					<th><xsmall><img src="./img/bluepill.png" style="background:none; border:none; box-shadow:none;"style="width:5%"></xsmall></th>
					<th><xsmall><img src="./img/redpill.png" style="background:none; border:none; box-shadow:none;"style="width:5%"></xsmall></th>
				</tr>
				<tr>
					<td><small>Gestione</small></td>
					<td><small>gestione demandata a colossi tecnologici e finanziari</small></td>
					<td><small>possibilità di partecipazione diretta alla gestione del nodo</small></td>
				</tr>
				<tr>
					<td><small>Filosofia</small></td>
					<td><small>utilizzo di codice "chiuso" di cui non conosciamo tutte le funzioni</small></td>
					<td><small>utilizzo di codice "aperto" <a href="https://github.com/tootsuite/mastodon" target="_blank">open source,</a> controllabile e modificabile</small></td>
				</tr>
				<tr>
					<td><small>Controllo</small></td>
					<td><small>lasciare il controllo in mano alle multinazionali</small></td>
					<td><small>riprendersi il controllo di quste tecnologie</small></td>
				</tr>
				<tr>
					<td><small>In & Out</small></td>
					<td><small>se crei un account, tu (forse) ne puoi uscire ma i tui dati restano</small></td>
					<td><small>quando decidi di andartene puoi cancellare tutti i tuoi dati</small></td>
				</tr>
				</table>
			</section>
</section>
<!--Table END-->
<!--Slide-->
<!--Slide VERT-BLOCK-1-STOP-->
<!--Slide VERT-BLOCK-2-START-->
				<section>
					<section>
						<h3>passiamo al cosa</h3>
						<p></p>
						<img data-src="./img/federated_universe.png" style="background:none; border:none; box-shadow:none;">
					</section>
<!--Slide-->
						<section>
							<h3>intanto ... dimentichiamo i social monolitici</h3>
							<xxsmall>tipo: facebook // twitter // whatsapp // messenger // skype // youtube // instagram </xxsmall>
							<p class="fragment fade-left">1 - non ci si iscrive ad un social ma ad un nodo</p>
							<p class="fragment fade-left">2 - le decisioni vengono prese a livello di nodo in accordo con gli utenti</p>
							<p class="fragment fade-right">3 - si può scegliere la piattaforma di accesso preferita</p>
							<p class="fragment fade-left">4 - si può entrare in contatto con tutto il fediverso (altri utenti, altri nodi, altre piattaforme)</p>
							<p class="fragment fade-right"><span style="color:red">... insomma, si fa un po' come "#" ci pare</span> ;-)</p>
						</section>
<!--Slide-->
					<section>
            <img data-src="./img/Mastodon-Connections-1.png">
						<p></p>
						<h3>Iscriversi ad un'istanza </h3>
						<p></p>
					</section>
<!--Slide-->
					<section>
						<p></p>
              <h5>Regole dell'istanza : ognuna sceglie le proprie </h5>
              <p></p>
              <h5>Permettendo alle diverse comunità di autodeterminarsi </h5>
              <p></p>
              <h5> Gli utenti possono scegliere dove si trovano meglio</h5>
              <p></p>
            <h5> Le regole di un'istanza sono definite nella policy, non sono tutte uguali.</h5>
            <p></p>
					</section>
<!--Slide-->
					<section>
            <h5> Per capirci vediamo la policy di cisti </h5>
            <p></p>
              <img data-src="./screenshot/policy.png">
					</section>
<!--Slide-->
          <section id="fragments">
            <h3>Ricapitolando sulla policy</h3>
            <p class="fragment fade-left">1 - Definisce le regole di un nodo, scegliamo il nodo anche in base alla policy.</p>
            <p class="fragment fade-left">2 - La policy verrà discussa ad ogni assemblea d'istanza</p>
            <p class="fragment fade-right">3 - La discussione della policy è anche un modo per includere la comunità</p>
            <p class="fragment fade-left">4 - Scegliamo a quali nodi essere amici anche in base alle loro rispettive policy.</p>
						</section>
<!--Slide-->
          <section>
            <h5>E quindi di chi siamo amici?</h5>
							<img data-src="./screenshot/mastodon-istanze.png">
          </section>
<!--Slide-->
          <section>
            <h5>Istanze bloccate? Ne abbiamo già un paio</h5>
              <img data-src="./screenshot/mastodon-istanze-bloccate.png">
          </section>
<!--Slide-->
					<section>
						<img data-src="./img/giphy.gif"> <img data-src="./img/argh.gif">
						<h3>no, dai! non fate così</h3>
						<h4>vediamo di capire un po' meglio come funziona</h4>
					</section>
<!--Slide-->
					<section><img data-src="./img/tradsocial.png" style="background:none; border:none; box-shadow:none;" alt="Fediverse Rel. Sketch"></section>
<!--Slide-->
					<section><img data-src="./img/federatesocial.png" style="background:none; border:none; box-shadow:none;" alt="Fediverse Rel. Sketch"></section>
<!--Slide-->
					<section>
						<img width="100" height="100" data-src="./img/220px-Fediverse_logo_proposal.svg.png" alt="Fediverse proposal logo" style="background:none; border:none; box-shadow:none;"><br>
						una rappresentazione grafica interattiva <a href="https://kumu.io/wakest/fediverse#known-network" target="_blank">kumo.io</a>
						<br>
						i progetti attuali <a href="https://the-federation.info" target="_blank">the-federation.info</a>
						<br>
						le alternative attuali <a href="https://switching.social/" target="_blank">switching.social</a>
					</section>
				</section>
<!--Slide VERT-BLOCK-2-STOP-->
<!--Slide VERT-BLOCK-3-START-->
    <section>
				<section>
					<h1>ma ... come e ... quando?</h1>
				</section>
<!--Slide-->
				<section>
					<h2>come, ve lo spieghiamo tra un minuto</h2>
				</section>
<!--Slide-->
        <section>
          <h5>Iscriversi dalla home di Mastodon</h5>
            <img data-src="./screenshot/mastodon-home.png">
        </section>
<!--Slide-->
        <section>
          <h5>Uno sguardo alla home dell'utente</h5>
            <img data-src="./screenshot/mastodon-home-utente.png">
        </section>
<!--Slide-->
        <section>
          <h3> Troppe barre verticali!!! Cosa sono?</h3>
          <h5> Vediamo : abbiamo la nostra home, con gli utenti Mastodon che seguiamo </h5>
          <h5> A destra le notifiche, la timeline locale e la timeline federata </h5>
          <h5> Possiamo anche TOOTARE, e iniziare a scrivere sulla nostra istanza! </h5>
        </section>
<!--Slide-->
        <section>
          <h5>TOOTARE : mandateci il primo gattino</h5>
					<xxsmall>scherzi a parte : i dischi sul server hanno un costo, non inondateci con i "selfie" del vostro micio :)</xxsmall>
            <img height="600" data-src="./screenshot/mastodon-toot.png">
        </section>
<!--Slide-->
        <section>
          <h5>NSFW : considerate la sensibilità di chi vi sta intorno</h5>
            <img data-src="./screenshot/mastodon-toot-nsfw.png">
        </section>
<!--Slide-->
        <section>
          <h5>NSFW : come appare un contenuto protetto nell timeline</h5>
            <img data-src="./screenshot/mastodon-toot-nsfw-timeline.png">
        </section>
<!--Slide-->
      <section>
        <h5> 42 follower e 42 following : una coincidenza? Io non credo </h5>
          <img data-src="./screenshot/mastodon-utente.png">
          <h5> Qui vediamo che avere il codice sorgente della piattaforma ha un'utilità!</h5>
      </section>
<!--Slide-->
      <section>
        <h5> E come apro il profilo di un utente su un'altra istanza?</h5>
          <img data-src="./screenshot/mastodon-fediverso.png">
      </section>
    </section>
<!--Slide VERT-BLOCK-3-STOP-->
<!--Slide-->
			<section>
				<section>
					<h2>quando?</h2>
          <img data-src="./img/impossible.gif"> <img data-src="./img/whatwait.gif"> <img data-src="./img/yescan.gif">
<aside class="notes">Shia LaBeouf</aside>
<!--Slide-->
				</section>
<!--Slide-->
				<section>
					<h2>make the <span style="color:red">right</span> thing!</h2>
          <img data-src="./img/morpheus.gif" width="150%">
				</section>
<!--Slide-->
				<section>
					<h1>join the social-media<span style="color:red">Revolution</span></h1>
				</section>
			</section>
<!--Slide-->
				<section>
					<h3>Pensierino della sera ...</h3>
					<p><a href="https://www.reddit.com/r/IAmA/comments/36ru89/just_days_left_to_kill_mass_surveillance_under/crglgh2/" rel="external">Edward Snowden</a>:</p> 
						<blockquote> 
						"Arguing that you don't care about the right to privacy because you have nothing to hide is no different than saying you don't care about free speech because you have nothing to say."
						</blockquote>
					<p><small>trad: <i><span style="color:orange">"Affermare che non si è interessati al diritto alla privacy perché non si ha nulla da nascondere è come dire che non si è interessati alla libertà di parola perché non si ha nulla da dire."</span></i></small></p>
					<p><xsmall>clicca  <a href="#">qui</a> per tornare all'inizio</xsmall></p>
					<xsmall>created with reveal.js - <a href="https://revealjs.com">https://revealjs.com</a> - thanks to hakimel</xsmall>
				</section>

				<section>
					<section>
							<h3>Non solo mastodon</h3>
							<img data-src="./img/cisti.png">
					</section>
					<section>
							<h3>Cisti è...</h3>
							<p class="fragment fade-left">Uno spazio digitale liberato.</p>
							<p class="fragment fade-left">Un server scapestrato e autogestito.</p>
							<p class="fragment fade-left">Anticapitalista, antifascista, antirazzista, antisessista.</p>
					</section>
					<section>
						<h3>Tanti strumenti</h3>
						<img data-src="./screenshot/cisti-servizi.png">
				</section>
					<section>
							<h3>Gancio</h3>
							<img data-src="./screenshot/gancio-home.png">
					</section>
					<section>
						<h3>Gancio</h3>
						<img data-src="./screenshot/gancio-evento.png">
				</section>
				<section>
					<h3>Gancio</h3>
					<img data-src="./screenshot/gancio-evento-insert.png">
			</section>
			<section>
				<h3>Pad</h3>
				<img data-src="./screenshot/pad.png">
		</section>
			</section>

							<!-- SLIDES BLOCK END -->

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>

			// More info https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				transition: 'slide', // none/fade/slide/convex/concave/zoom

				// More info https://github.com/hakimel/reveal.js#dependencies
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/search/search.js', async: true },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true },
					{ src: 'plugin/title-footer/title-footer.js', async: true, callback: function() { title_footer.initialize('Welcome to the Fediverse'); } }
				]
			});

		</script>

	</body>
</html>