index.html 30.5 KB
Newer Older
1 2 3 4 5 6 7
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8"/>

8
    <title>The GAFAM poster campaign toolkit</title>
9
    <meta name="description"
10
          content="We collect, maintain and promote translations of material from the GAFAM poster campaign by La Quadrature du Net. CC0 licensed and a friendly community.">
11
    <meta name="keywords" content="gafam, poster, sticker, campaign, information, translation, localization, toolkit">
12

13
    <meta property="og:title" content="The GAFAM poster campaign toolkit"/>
14
    <meta property="og:description"
15
          content="We collect, maintain and promote translations of material from the GAFAM poster campaign by La Quadrature du Net. CC0 licensed and a friendly community."/>
16
    <meta property="og:image" content="https://gafam.info/static/img/gafam-poster-ces2018-small.jpg"/>
17

18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
    <!-- Let browser know website is optimized for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <!-- Load whole application -->

    <!-- Development -->
    <script type="text/javascript" src="./static/assets/commons.bundle.js"></script>
    <script type="text/javascript" src="./static/assets/app.bundle.js"></script>

    <!-- Production -->
    <!--
    <script type="text/javascript" src="./static/assets/commons.bundle.min.js"></script>
    <script type="text/javascript" src="./static/assets/app.bundle.min.js"></script>
    -->

</head>

<body>

37 38 39
<a class="github-fork-ribbon" href="https://github.com/gafam/www.gafam.info" title="Fork me on GitHub">Fork me on
    GitHub</a>

40
<!-- Hero header -->
41 42 43 44 45 46 47 48 49
<section class="hero is-info site-header">
    <div class="hero-body columns">
        <div class="column is-9">
            <div class="container header-container">
                <h1 class="title is-spaced">
                    The GAFAM poster campaign toolkit
                </h1>

                <p class="subtitle">
50
                    We collect, maintain and promote translations of material from the
51 52 53 54
                    <br/>
                    <strong><a href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">GAFAM poster campaign</a></strong>
                    by
                    <strong><a href="https://www.laquadrature.net/">La Quadrature du Net</a></strong>.
55 56 57
                    <br/>
                    CC0 licensed and a friendly community.
                </p>
58 59
            </div>
        </div>
60 61 62 63 64 65
        <div class="column is-3">
            <img src="static/img/gafam-pictograms.jpg"/>
        </div>
    </div>
</section>

66
<!-- About -->
67
<section class="section" id="more-translations-needed">
68 69
    <div class="container">
        <h3 class="title">
70
            About
71 72 73 74
        </h3>

        <div class="columns is-variable is-8">
            <div class="column is-6">
75 76 77 78 79 80 81 82 83
                <p class="content is-spaced">
                    <a href="https://www.laquadrature.net/">La Quadrature du Net</a> started the
                    <a href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">GAFAM poster campaign</a>
                    around November 2017 in order to support their
                    <a href="https://support.laquadrature.net/">call for donations</a>.

                    After getting hooked at the 34C3 congress, we picked this up in January 2018
                    to support the lovely people of LQDN in covering the whole world.
                </p>
84 85 86
                <p class="content is-spaced">
                    We wrote down the original French texts and its translations
                    to the English language from the GAFAM campaign poster texts
87
                     and
88 89 90
                    <a href="https://github.com/gafam/gafam-poster-translations">put them on GitHub</a> using the <a
                        href="https://en.wikipedia.org/wiki/Gettext">GNU gettext</a> format.
                </p>
91 92 93 94 95 96 97 98 99 100 101 102 103
                <div class="notification is-warning">
                    <div class="media">
                        <div class="media-left">
                            <i class="fa fa-language fa-3x" aria-hidden="true"></i>
                        </div>
                        <div class="media-content">
                            <strong>
                                Now, we are looking for <a href="#contribute">contributors</a>
                                to add more <a href="#translations">translations</a> into different languages.
                            </strong>
                        </div>
                    </div>
                </div>
104 105
            </div>
            <div class="column is-6">
106
                <img src="static/img/gafam-poster-ces2018.jpg"/>
107 108
            </div>
        </div>
109 110 111
    </div>
</section>

112 113 114 115 116 117 118 119 120 121
<!-- How to reproduce -->
<section class="section" id="reproduce">
    <div class="container">
        <h3 class="title">
            How to reproduce?
        </h3>

        <p class="content is-spaced">
            Read all about how to print the posters locally.
            <ol>
122 123 124 125 126 127 128 129
                <li class="content">
                    <p class="is-size-5 has-text-weight-semibold">
                        Get access to a laser printer
                    </p>
                    <p>
                        Please don't use Inkjets as they will draw too much ink
                        for filling the black areas. Really, don't do it.
                    </p>
130
                </li>
131 132 133 134 135 136 137
                <li class="content">
                    <p class="is-size-5 has-text-weight-semibold">
                    Get some colored paper
                    </p>
                    <p>
                        which fits your printer. You will need red, white, blue, yellow and green.
                    </p>
138
                </li>
139 140 141 142
                <li class="content">
                    <p class="is-size-5 has-text-weight-semibold">
                        Choose one of the <a href="#resources">design resources</a>
                    </p>
143
                    <p>
144
                        which fulfills your needs regarding format and language and download it to your computer.
145 146
                    </p>
                    <p>
147
                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-fr.pdf">
148 149 150 151
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            French posters in PDF format
                        </a>
152
                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-en.pdf">
153 154 155 156
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            English posters in PDF format
                        </a>
157 158 159 160 161
                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-de.pdf">
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            German posters in PDF format
                        </a>
162 163 164
                    </p>
                </li>
                <li class="content is-spaced">
165 166
                    <p class="is-size-5 has-text-weight-semibold">
                        Follow these steps to prepare for and perform printing
167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218
                    </p>

                    <div class="columns is-variable is-8">

                        <div class="column is-4">
                            <div class="card">
                                <div class="card-image">
                                    <img src="static/img/gafam-poster-printing-1.jpg"/>
                                </div>
                                <div class="card-content">
                                    <div class="content">
                                        Make multiple staples of N sheets each for each color.
                                        Then, put them together in the sequence of red, white, blue, yellow and green.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="column is-4">
                            <div class="card">
                                <div class="card-image">
                                    <img src="static/img/gafam-poster-printing-2.jpg"/>
                                </div>
                                <div class="card-content">
                                    <div class="content">
                                        This looks good.
                                        <br/>
                                        Now, put this whole staple into your printer in a way that the red
                                        sheets will be picked up first.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="column is-4">
                            <div class="card">
                                <div class="card-image">
                                    <img src="static/img/gafam-poster-printing-3.jpg"/>
                                </div>
                                <div class="card-content">
                                    <div class="content">
                                        Send print jobs of N duplicates for each page of
                                        the multipage poster document PDF file.
                                        <br/><br/>
                                        Ready.
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </li>
                <li class="content is-spaced">
219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243

                    <p class="is-size-5 has-text-weight-semibold">
                        Go ahead, disseminate the printouts in your local neighbourhood and send pictures. Cheers!
                    </p>

                    <div class="columns is-variable is-8">
                        <div class="column is-4">
                            <div class="card">
                                <div class="card-image">
                                    <div id="lqdn-gafam-posters-paris-video"/>
                                </div>
                                <div class="card-content">
                                    <div class="content">
                                        Night, cold, rain - nothing stops those who support La Quadrature.
                                    </div>
                                </div>
                                <footer class="card-footer">
                                    <a class="card-footer-item" href="https://twitter.com/laquadrature/status/944148790684069888">
                                        <time datetime="2017-12-22">22 Dec 2017</time>
                                    </a>
                                </footer>
                            </div>
                        </div>
                    </div>

244 245 246 247 248 249 250
                </li>
            </ol>
        </p>

    </div>
</section>

251
<!-- Resources -->
252 253 254
<section class="section" id="resources">
    <div class="container">
        <h3 class="title">
255
            Resources for download
256 257 258
        </h3>

        <p class="content is-spaced">
259
            The resources and materials collected so far.
260
            These are PDF files published by LQDN.
261 262
        </p>

263 264
        <div class="columns">

265
            <!-- French -->
266 267 268 269
            <div class="column is-4">
                <div class="card">
                    <header class="card-header">
                        <div class="card-header-title">
270 271
                            <div class="full-width">
                                <div class="is-pulled-left">
272 273 274 275 276
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-primary">Language</span>
                                        <span class="tag is-medium">French</span>
                                    </div>
                                </div>
277
                                <div class="is-pulled-right">
278 279 280 281 282 283 284 285 286 287
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-link">Format</span>
                                        <span class="tag is-medium">PDF</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>
                    <div class="card-image">
                        <figure class="image">
288
                            <a href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-fr.pdf">
289 290
                                <img class="resource-card-image" src="static/img/gafam-french-card.gif"/>
                            </a>
291
                        </figure>
292
                    </div>
293
                    <div class="card-content">
294

295 296 297 298 299 300 301 302
                        <div class="media">
                            <div class="media-left">
                                <figure class="image is-48x48">
                                    <img src="static/img/lqdn-logo.jpg"/>
                                </figure>
                            </div>
                            <div class="media-content">
                                <p class="title is-4">La Quadrature du Net</p>
303 304
                                <p class="subtitle is-6">
                                    <a href="https://twitter.com/laquadrature">@laquadrature</a>
305 306 307
                                </p>
                            </div>
                        </div>
308

309 310
                        <div class="content">
                            <p>
311 312 313 314 315
                                By popular demand, the PDFs of the campaign posters.
                                LQDN has already covered Paris and counts on you to cover the rest of the country and the
                                world!
                                The posters were printed on A3 colored paper, but do as you please! CC0
                            </p>
316
                        </div>
317
                    </div>
318 319 320

                    <footer class="card-footer">
                        <a class="card-footer-item" href="https://twitter.com/laquadrature/status/942764007286591490">
321
                            <time datetime="2017-12-18">18 Dec 2017</time>
322
                        </a>
323
                        <a class="card-footer-item" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-fr.pdf">
324 325 326 327 328 329
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            Download as PDF
                        </a>
                    </footer>

330
                </div>
331 332
            </div>

333 334
            <!-- English -->
            <div class="column is-4">
335 336 337
                <div class="card">
                    <header class="card-header">
                        <div class="card-header-title">
338 339
                            <div class="full-width">
                                <div class="is-pulled-left">
340 341
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-primary">Language</span>
342 343 344
                                        <span class="tag is-medium">English</span>
                                    </div>
                                </div>
345
                                <div class="is-pulled-right">
346 347
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-link">Format</span>
348
                                        <span class="tag is-medium">PDF</span>
349 350 351 352 353
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>
354 355
                    <div class="card-image">
                        <figure class="image">
356
                            <a href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-en.pdf">
357 358 359 360
                                <img class="resource-card-image" src="static/img/gafam-english-card.gif"/>
                            </a>
                        </figure>
                    </div>
361
                    <div class="card-content">
362 363 364 365 366 367 368 369
                        <div class="media">
                            <div class="media-left">
                                <figure class="image is-48x48">
                                    <img src="static/img/lqdn-logo.jpg"/>
                                </figure>
                            </div>
                            <div class="media-content">
                                <p class="title is-4">La Quadrature du Net</p>
370 371
                                <p class="subtitle is-6">
                                    <a href="https://twitter.com/laquadrature">@laquadrature</a>
372 373 374 375
                                </p>
                            </div>
                        </div>

376 377
                        <div class="content">
                            <p>
378 379 380 381 382 383 384
                                After 7 weeks of an intensive campaign, LQDN reached 66% of their goal.
                                Thanks to all of you who support LQDN and have shared their calls for donations.
                                The posters were shared on social networks so they translated them into English.
                                <br/>
                                Files in SVG format will be added soon! ;)
                            </p>
                        </div>
385
                    </div>
386 387 388

                    <footer class="card-footer">
                        <a class="card-footer-item" href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">
389
                            <time datetime="2018-01-03">3 Jan 2018</time>
390
                        </a>
391
                        <a class="card-footer-item" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-en.pdf">
392 393 394 395 396 397
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            Download as PDF
                        </a>
                    </footer>

398 399 400
                </div>
            </div>

401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465
            <!-- German -->
            <div class="column is-4">
                <div class="card">
                    <header class="card-header">
                        <div class="card-header-title">
                            <div class="full-width">
                                <div class="is-pulled-left">
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-primary">Language</span>
                                        <span class="tag is-medium">German</span>
                                    </div>
                                </div>
                                <div class="is-pulled-right">
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-link">Format</span>
                                        <span class="tag is-medium">PDF</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>
                    <div class="card-image">
                        <figure class="image">
                            <a href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-de.pdf">
                                <img class="resource-card-image" src="static/img/gafam-german-card.gif"/>
                            </a>
                        </figure>
                    </div>
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <figure class="image is-48x48">
                                    <img src="static/img/lqdn-logo.jpg"/>
                                </figure>
                            </div>
                            <div class="media-content">
                                <p class="title is-4">La Quadrature du Net</p>
                                <p class="subtitle is-6">
                                    <a href="https://twitter.com/laquadrature">@laquadrature</a>
                                </p>
                            </div>
                        </div>

                        <div class="content">
                            <p>
                                LQDN shared the German PDF file variant. Santé!
                            </p>
                        </div>
                    </div>

                    <footer class="card-footer">
                        <div class="card-footer-item">
                            <time datetime="2018-01-16">16 Jan 2018</time>
                        </div>
                        <a class="card-footer-item" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-de.pdf">
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            Download as PDF
                        </a>
                    </footer>

                </div>
            </div>


466
        </div>
467 468 469
    </div>
</section>

470
<!-- Contribute -->
471 472 473 474 475
<section class="section" id="contribute">
    <div class="container">
        <h3 class="title">
            Contribute
        </h3>
476

477 478 479
        <div class="columns">

            <div class="column is-6">
480
                <img src="static/img/gafam-poster-paris.jpg"/>
481 482 483 484 485 486 487 488 489
            </div>

            <div class="column is-6">
                Adding a translation is really easy, it's just about downloading
                a template file, editing a few lines and sending it back to us:
                <br/><br/>
                <ol>
                    <li class="content is-spaced">
                        Download the translation template file
490
                        <a href="https://raw.githubusercontent.com/gafam/gafam-poster-translations/master/po/gafam-poster.pot">gafam-poster.pot</a>
491 492 493 494 495 496
                        to your computer.
                    </li>
                    <li class="content is-spaced">
                        Rename the file using the language code of choice,
                        e.g. "pt.po" for translating into the Portuguese language.
                        <p class="is-size-7">
497 498 499 500
                            You might want to have a look at the
                            list of <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1 codes</a>
                            and the <a href="https://en.wikipedia.org/wiki/ISO_639_macrolanguage">ISO 639
                            macrolanguage</a> as a reference.
501 502 503 504 505 506 507
                        </p>
                    </li>
                    <li class="content is-spaced">
                        Edit the ".po" file you just created and perform the
                        translation by assigning appropriate values to all
                        "msgstr" variables.
                        You might want to use either the
508 509
                        <a href="https://github.com/gafam/gafam-poster-translations/blob/master/po/fr.po">French
                            original</a>
510
                        or the
511
                        <a href="https://github.com/gafam/gafam-poster-translations/blob/master/po/en.po">English</a>
512
                        or
513
                        <a href="https://github.com/gafam/gafam-poster-translations/blob/master/po/de.po">German</a>
514
                        translations
515 516
                        as reference.
                        <br/>
517

518
                        <p class="is-size-7">
519 520
                            Please use the UTF-8 character encoding when editing
                            the translation file.
521 522 523
                        </p>
                    </li>
                    <li class="content is-spaced">
524 525
                        Send the file containing the translated texts to <a
                            href="mailto:translators@gafam.info?subject=[GAFAM] New translation for ...">translators@gafam.info</a>.
526 527
                        <br/><br/>
                        If you know your way around Git, we also appreciate receiving
528 529
                        pull requests to the translation file repository on GitHub, <a
                            href="https://github.com/gafam/gafam-poster-translations">gafam-poster-translations</a>.
530 531 532 533 534
                    </li>
                    <li class="content is-spaced">
                        Thank you so much for helping to spread the word.
                        As soon as we have stickers, we will
                        definitively get a bunch of them to you!
535 536 537 538 539
                    </li>
                </ol>
            </div>

        </div>
540
</section>
541

542 543 544 545 546 547 548 549 550 551
<!-- Translations collected -->
<section class="section" id="translations">
    <div class="container">
        <h3 class="title">
            Collected translations
        </h3>

        <p class="content is-spaced">
            The translations collected so far.
            Using the embedded view below, you can switch between the languages already translated
552 553
            and display the translation files in
            <a href="https://en.wikipedia.org/wiki/Gettext">GNU gettext</a> format.
554 555
            If you want to dig deeper, you are welcome to have a look at the underlying
            <a href="https://github.com/gafam/gafam-poster-translations">GitHub repository</a>.
556
        </p>
557

558
        <p class="content is-spaced">
559 560 561
            We encourage you to <a href="#contribute">contribute</a>
            a translation if you feel it is missing from the list.

562
            In the beginning, we had French, English and German as translated by the people of LQDN.
563
            As of now, we have been able to add translations into Japanese, Esperanto, Russian
564
            (half-finished), Mandarin Chinese and Italian from the community. Thank you so much!
565
        </p>
566

567 568
        <p class="content is-spaced">
            However, there are still many languages to go for...
569 570 571 572 573 574 575
        </p>

        <div class="columns is-variable is-8">
            <div class="column is-8">
                <div class="card translations-details">
                    <header class="card-header">
                        <div class="card-header-title">
576 577
                            <div class="full-width">
                                <div class="is-pulled-right">
578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-link">Format</span>
                                        <span class="tag is-medium">gettext PO</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>
                    <div class="card-content github-embed-container">
                        <div class="github-gafam-poster-translations"></div>
                    </div>
                </div>
            </div>
            <div class="column is-6">
                <img src="static/img/gafam-poster-pillar.jpg" class="translations-details"/>
            </div>
        </div>
    </div>
</section>

598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631
<!-- What else? -->
<section class="section" id="what-else">
    <div class="container">
        <h3 class="title">
            What else?
        </h3>

        <div class="columns is-variable2 i2s-2">
            <div class="column is-5">
                <img src="static/img/gafa-batx.jpg"/>
            </div>
            <div class="column is-7">
                <p class="content is-spaced">
                    While the original poster campaign by LQDN is all about
                    <a href="https://fr.wikipedia.org/wiki/GAFAM">GAFAM</a> (<a href="https://twitter.com/hashtag/GAFAM">#GAFAM</a>),
                    the resources around it have been released
                    to the public domain (<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>).
                </p>
                <p class="content is-spaced">
                    <strong>
                        In this spirit, we encourage the community to apply the same to
                        BATX
                        (<a href="https://fr.wikipedia.org/wiki/BATX">Wikipedia</a>, <a href="https://twitter.com/hashtag/BATX">Twitter</a>)
                        and
                        NATU
                        (<a href="http://magazine.pickandpow.com/en/gafa-natu-the-king-is-dead-long-life-to-the-ki/">[1]</a>,
                        <a href="https://www.challenges.fr/challenges-soir/netflix-airbnb-tesla-et-uber-sont-elles-survalorisees_415028">[2]</a>).
                    </strong>
                </p>
            </div>
        </div>
    </div>
</section>

632
<!-- Footer -->
633 634
<footer class="footer">
    <div class="container">
635 636 637 638 639 640 641 642 643 644 645 646 647 648
        <div class="columns">
            <div class="column is-5">
                <div class="content">
                    <p class="has-emphasized-links">
                        This is
                        <a href="https://gafam.info/">the GAFAM poster campaign toolkit</a>
                        by
                        <a href="mailto:hello@gafam.info">the GAFAM tech collective</a>.
                        The content of this web page is in the public domain
                        (<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>)
                        and
                        <a href="https://github.com/gafam/www.gafam.info">available on GitHub</a>.
                    </p>
                    <p class="is-size-7">
649 650
                        Content attributions: Images and depictions on this web page might be copyright of
                        their respective owners. Resources have been taken from, in the order of appearance:
651 652 653 654 655 656 657 658 659
                        <a href="https://twitter.com/NabeelAdeni/status/943733947921518592">@NabeelAdeni</a>,
                        <a href="https://twitter.com/linto_ai/status/950756933199314945">@linto_ai</a>,
                        <a href="https://twitter.com/mauddelavO/status/941602492521111552">@mauddelavO</a>,
                        <a href="https://twitter.com/vincib/status/946859282498314240">@vincib</a>,
                        <a href="https://twitter.com/churchill58/status/952437523749404673">@churchill58</a>.
                        Thanks!
                    </p>
                </div>
            </div>
660
        </div>
661 662
    </div>
</footer>
663

664 665 666
</body>

</html>