index.html 10.9 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8"/>

    <title>The GAFAM resource toolkit</title>
    <meta name="description" content="We collect, maintain and care for localization of material from the LQDN GAFAM campaign. CC0 licensed and a friendly community.">
    <meta name="keywords" content="gafam, information, localization">

12 13 14 15
    <meta property="og:title" content="The GAFAM resource toolkit"/>
    <meta property="og:description" content="We collect, maintain and care for localization of material from the LQDN GAFAM campaign. CC0 licensed and a friendly community."/>
    <meta property="og:image" content="https://gafam.info/static/img/gafam-english.jpg"/>

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
    <!-- 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>

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

    <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 resource toolkit
                    </h1>
                    <p class="subtitle">
                        We collect, maintain and care for localization of material from the
46
                        <strong><a target="_blank" href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">LQDN GAFAM</a></strong> campaign.
47 48 49 50 51 52 53 54 55 56 57
                        <br/>
                        CC0 licensed and a friendly community.
                    </p>
                </div>
            </div>
            <div class="column is-3">
                <img src="static/img/gafam-pictograms.jpg"/>
            </div>
        </div>
    </section>

The GAFAM tech collective's avatar
The GAFAM tech collective committed
58
    <section class="section" id="call-for-help">
59
        <div class="container">
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
            <h3 class="title">
                A call for help
            </h3>
            <div class="columns is-variable is-8">
                <div class="column is-6">
                    <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
                        published by La Quadrature du Net and
                        <a href="https://github.com/gafam/gafam-l10n">put them on GitHub</a> using the <a href="https://en.wikipedia.org/wiki/Gettext">GNU gettext</a> format.
                    </p>
                    <p class="content is-spaced">
                        Now, we are looking for contributors helping out with
                        translations into more languages.
                    </p>
                    <p>
                        We really appreciate your help. Thanks in advance!
                    </p>
                </div>
                <div class="column is-6">
                    <img src="static/img/gafam-english.jpg"/>
                </div>
            </div>
        </div>
    </section>

The GAFAM tech collective's avatar
The GAFAM tech collective committed
86
    <section class="section" id="resources">
87 88 89 90 91 92 93 94 95 96 97 98
        <div class="container">
            <h3 class="title">
                Resources
            </h3>
            <p class="content is-spaced">
                The resources and materials we have collected so far.
                On the left side, you will find the PDF file originally
                published by LQDN. On the right side, all translation
                files from the <a href="https://github.com/gafam/gafam-l10n">GitHub repository</a> will be displayed.
                As of now, we have French and English so we are
                looking forward to your contribution!
            </p>
99 100 101 102 103 104 105 106 107
        <div class="columns">

        <div class="column is-4">
        <div class="card">
          <header class="card-header">
            <div class="card-header-title">
            <div class="columns" style="width: 100%">
                <div class="column is-7">
                    <div class="tags has-addons">
108 109
                      <span class="tag is-medium is-primary">Language</span>
                      <span class="tag is-medium">French</span>
110 111 112 113
                    </div>
                </div>
                <div class="column is-5">
                    <div class="tags has-addons">
114 115
                      <span class="tag is-medium is-link">Format</span>
                      <span class="tag is-medium">PDF</span>
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
                    </div>
                </div>
            </div>
            </div>
          </header>
          <div class="card-image">
            <figure class="image">
                <a class="level-right" target="_blank" href="https://wiki.laquadrature.net/images/5/50/Lqdn_affiche_gafam.pdf"><img src="static/img/gafam-french.jpg"/></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 target="_blank" href="https://twitter.com/laquadrature">@laquadrature</a></p>
              </div>
            </div>

            <div class="content">
              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
              <br/><br/>
              <a class="level-right" target="_blank" href="https://wiki.laquadrature.net/images/5/50/Lqdn_affiche_gafam.pdf">Download as PDF</a>
              <br/>
              Source: <a target="_blank" href="https://twitter.com/laquadrature/status/942764007286591490"><time datetime="2017-12-18">6:30 AM - 18 Dec 2017</time></a>
            </div>
          </div>
        </div>
        </div>

152 153 154 155 156 157
        <div class="column is-8">
        <div class="card">
          <header class="card-header">
            <div class="card-header-title">
            <div class="columns" style="width: 100%">
                <div class="column is-7">
158 159 160 161
                    <div class="tags has-addons2">
                      <span class="tag is-medium is-primary">Languages</span>
                      <span class="tag is-medium">French</span>
                      <span class="tag is-medium">English</span>
162 163 164 165
                    </div>
                </div>
                <div class="column is-5">
                    <div class="tags has-addons">
166 167
                      <span class="tag is-medium is-link">Format</span>
                      <span class="tag is-medium">gettext PO</span>
168 169 170 171 172 173 174 175 176 177 178
                    </div>
                </div>
            </div>
            </div>
          </header>
          <div class="card-content">
            <div class="gafam-l10n"></div>
          </div>
        </div>
        </div>

179 180 181 182
        </div>
        </div>
    </section>

The GAFAM tech collective's avatar
The GAFAM tech collective committed
183
    <section class="section" id="contribute">
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 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238
        <div class="container">
            <h3 class="title">
                Contribute
            </h3>
        <div class="columns">

            <div class="column is-6">
                <img src="static/img/gafam-paris.jpg"/>
            </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
                        <a href="https://github.com/gafam/gafam-l10n/blob/master/po/gafam.pot">gafam.pot</a>
                        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">
                        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.
                        </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
                        <a href="https://github.com/gafam/gafam-l10n/blob/master/po/fr.po">French original</a>
                        or the
                        <a href="https://github.com/gafam/gafam-l10n/blob/master/po/en.po">English translation</a>
                        as reference.
                        <br/>
                        <p class="is-size-7">
                        Please use the UTF-8 character encoding when editing
                        the translation file.
                        </p>
                    </li>
                    <li class="content is-spaced">
                        Send the file containing the translated texts to <a href="mailto:translators@gafam.info?subject=[GAFAM] New translation for ...">translators@gafam.info</a>. Thanks!
                    </li>
                </ol>
                <br/>
                If you know your way around Git, we also appreciate receiving
                pull requests to the translation file repository on GitHub, <a href="https://github.com/gafam/gafam-l10n">gafam-l10n</a>.
            </div>

        </div>
    </section>

239 240 241 242 243 244 245 246 247 248 249 250 251 252
    <footer class="footer">
      <div class="container">
        <div class="content has-text-centered">
          <p>
            <strong>The GAFAM resource toolkit</strong> by <a href="mailto:hello@gafam.info">The GAFAM tech collective</a>.
            <br/>
            The website content is licensed
            <a target="_blank" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0</a>
            and <a href="https://github.com/gafam/www.gafam.info" target="_blank">available on GitHub</a>.
          </p>
        </div>
      </div>
    </footer>

253 254 255
</body>

</html>