cisti
/
welcome-to-the-fediverse
forked from freebird/welcome-to-the-fediverse


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
							<!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>
						<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>
                            <p>Scriviamo codice (orjail)</p>
                            <p>Nuove cose in futuro...</p>
                            <p>Insomma, smanettiamo un sacco!</p>
				</section>
</section>
<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>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>
                    <h4>Non tutti i social vengono per nuocere</h4>
				</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>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>Organizzazione</small></td>
                    <td><small>monopolio</small></td>
                    <td><small>federato: nessuno può chiudere, controllare o limitare mastodon</small></td>
                </tr>
                <tr>
                    <td><small>Gestione</small></td>
                    <td><small>verticale: demandata a colossi tecnologici e finanziari</small></td>
                    <td><small>orizzontale: autogestione, autodeterminazione</small></td>
                </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>
				</table>
				<br>

			</section>
<!--Slide-->
			<section>
				<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>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>
                <tr>
                    <td><small>Benessere dell'Utente</small></td>
                    <td><small>Danni patologici per estrarre valore dall'utente (<a target="blank" href="https://informationisbeautiful.net/visualizations/intermental/">link</a>)</small></td>
                    <td><small>Riduzione del danno (vedremo bene dopo)</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>
                        <h2>Comunità</h2>
                        <ul>
                            <li>Il mondo è grande, le culture sono diverse</li>
                            <li>Non esisto valori assoluti (verità, indecenza, odio)</li>
                            <li>Scegliamo le nostre comunità (città, famiglia, militanza)</li>
                            <li>La comunità è l'unico attore capace di interpretare i valori culturali condivisi</li>
                        </ul>
					</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>
				<section>
					<section>
							<h3>Non solo mastodon</h3>
							<img data-src="./img/cisti.png">
					</section>
					<section>
							<h3>Cisti è...</h3>
							<p class="fragment fade-left">Un sushi bar</p>
							<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>