PageSourceSearch

http://mutabit.com/grafoscopio/

html mutabit.com collected 2026-10-03 22:01:39 UTC 27,267 bytes, 472 lines download raw bytes

1<!doctype html>
2<!--
3  Material Design Lite
4  Copyright 2015 Google Inc. All rights reserved.
5
6  Licensed under the Apache License, Version 2.0 (the "License");
7  you may not use this file except in compliance with the License.
8  You may obtain a copy of the License at
9
10      https://www.apache.org/licenses/LICENSE-2.0
11
12  Unless required by applicable law or agreed to in writing, software
13  distributed under the License is distributed on an "AS IS" BASIS,
14  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15  See the License for the specific language governing permissions and
16  limitations under the License
17-->
18
19<html lang="es">
20  <head>
21    <meta charset="utf-8">
22    <meta http-equiv="X-UA-Compatible" content="IE=edge">
23    <meta name="description" content="Grafoscopio: escritura interactiva + visualización de datos">
24    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
25    <title>Grafoscopio | mutabiT</title>
26    <!--Icons-->
27    
27<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
27
28    <!-- Page styles -->
29    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
30    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
31    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.min.css">
32    <link rel="stylesheet" href="styles.css">
33    <style>
34    #view-source {
35      position: fixed;
36      display: block;
37      right: 0;
38      bottom: 0;
39      margin-right: 40px;
40      margin-bottom: 40px;
41      z-index: 900;
42    }
43    </style>
44  </head>
45  <body>
46    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
47
48      <div class="android-header mdl-layout__header mdl-layout__header--waterfall">
49        <div class="mdl-layout__header-row">
50          <span class="android-title mdl-layout-title">
51            <img class="android-logo-image" src="images/grafoscopio-logotype.png">
52
53          </span>
54          <!-- Add spacer, to align navigation to the right in desktop -->
55          <div class="android-header-spacer mdl-layout-spacer"></div>
56          <div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
57            <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
58              <i class="material-icons">search</i>
59            </label>
60            <div class="mdl-textfield__expandable-holder">
61              <input class="mdl-textfield__input" type="text" id="search-field">
62            </div>
63          </div>
64          <!-- Navigation -->
65          <div class="android-navigation-container">
66            <nav class="android-navigation mdl-navigation">
67              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="#intro">Intro</a>
68              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="#galeria">Galería</a>
69              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="#descarga">Descarga</a>
70              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="#aprende">Aprende</a>
71              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="#creditos">Créditos</a>
72              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="#contacto">Contacto</a>
73            </nav>
74          </div>
75          <span class="android-mobile-title mdl-layout-title">
76            <img class="android-logo-image" src="images/grafoscopio-logotype.png">
77          </span>
78        </div>
79      </div>
80
81      <div class="android-content mdl-layout__content">
82        <a name="intro"></a>
83        <div class="mdl-typography--text-center">
84          <div class="logo-font android-slogan">Grafoscopio</div>
85          <div class="logo-font android-sub-slogan">
86              publicación e investigación reproducible
87              ⊕ documentación interactiva
88              ⊕ visualización flexible y aǵil de datos
89          </div>
90        </div>
91        <div class="android-more-section">
92          <div class="android-card-container mdl-grid">
93            <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
94              <div class="mdl-card__title">
95                 <h4 class="mdl-card__title-text">Escribe, estructura y unifica</h4>
96              </div>
97              <div class="mdl-card__media">
98                <img src="https://mutabit.com/repos.fossil/offray-blog/doc/tip/user/pages/entry/panama-papers-1/data-environment-full.png">
99              </div>
100              <div class="mdl-card__supporting-text">
101                <span class="mdl-typography--font-light mdl-typography--subhead">
102                    Distintos tipos documentos todos ellos en un sólo sitio. 
103                    Jeraquiza, agrupa y visibiliza aquello que quieres y crea diferentes vistas de la misma información.
104                </span>
105              </div>
106              <div class="mdl-card__actions">
107                 <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase"
108                    href="https://mutabit.com/offray/blog/en/entry/panama-papers-1">
109                   Mira un ejemplo
110                   <i class="material-icons">chevron_right</i>
111                 </a>
112              </div>
113            </div>
114
115            <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3d
115p">
116              <div class="mdl-card__title">
117                 <h4 class="mdl-card__title-text">Cálcula y visualiza</h4>
118              </div>
119              <div class="mdl-card__media">
120                <img src="https://mutabit.com/repos.fossil/offray-blog/doc/tip/user/pages/entry/sdv-infomed/omeprazol-by-property.png">
121              </div>
122              <div class="mdl-card__supporting-text">
123                <span class="mdl-typography--font-light mdl-typography--subhead">
124                    Puedes conectar varias fuentes de información heterogeneas e intégrarlas mediante visualizaciones 
125                    poderosas y flexibles.
126                </span>
127              </div>
128              <div class="mdl-card__actions">
129                 <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase"
130                    href="https://mutabit.com/offray/blog/en/entry/sdv-infomed">
131                   Mira un ejemplo
132                   <i class="material-icons">chevron_right</i>
133                 </a>
134              </div>
135            </div>
136
137            <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
138              <div class="mdl-card__title">
139                 <h4 class="mdl-card__title-text">Colabora y publica</h4>
140              </div>
141              <div class="mdl-card__media">
142                <img src="images/timeline-2.png">
143              </div>
144              <div class="mdl-card__supporting-text">
145                <span class="mdl-typography--font-light mdl-typography--subhead">
146                    Las plantillas y el control histórico de cambios, facilitarán el trabajo individual y colectivo, 
147                    así como su publicación en PDF y HTML.
148                </span>
149              </div>
150              <div class="mdl-card__actions">
151                 <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase"
152                    href="https://mutabit.com/repos.fossil/mapeda/">
153                   Mira un ejemplo
154                   <i class="material-icons">chevron_right</i>
155                 </a>
156              </div>
157            </div>
158
159            <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
160              <div class="mdl-card__title">
161                 <h4 class="mdl-card__title-text">Explora y modifica</h4>
162              </div>
163              <div class="mdl-card__media">
164                <img src="images/smalltalk-ide-light-1.png">
165              </div>
166              <div class="mdl-card__supporting-text">
167                <span class="mdl-typography--font-light mdl-typography--subhead">
168                    Usa el poderoso entorno interactivo de programación integrado, para ver cómo está hecha la 
169                    herramienta y adaptarla a diversas necesidades.
170                </span>
171              </div>
172              <div class="mdl-card__actions">
173                 <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase"
174                    href="http://smalltalkhub.com/#!/~Offray/Grafoscopio">
175                   Más info
176                   <i class="material-icons">chevron_right</i>
177                 </a>
178              </div>
179            </div>
180          </div>
181          <div class="mdl-card__supporting-text">
182            <span class="mdl-typography--font-light mdl-typography--subhead">
183                Grafoscopio es una herramienta amoldable para documentación interactiva y
184                visualización de datos, que está siendo usada para ciencia abierta, ciudadanas y de
185                garage, investigación reproducibles, (h)ac(k)tivismo, innovación abierta y
186                comunitaria, visualizaciones de dominio específico, y periodismo de datos, entre otros
187                usos actuales y potenciales.
188                Grafoscopio está cubierto por una licencia libre y de código abierto (MIT) y se
189                socializa, realimenta y modifica en un taller-hackatón recurrente de una semana
190                llamado el <a href="https://mutabit.com/dataweek/">Data Week</a>, que está orientado
191                principalmente desde preguntas ciudadanas mediadas por datos y visualización.<br>
192                Grafoscopio es y usa "infraestructuras de bolsillo", sencillas y autocontenidas, que
193                pueden ejecutarse On/Off-line,
194                desde una memoria USB, una rasberry-Pi, un servidor modesto y cualquier otra
195                infraestructura intermedia o más potente.
196            </span>
197          </div>
198        </div>
199        <div class="android-screen-section mdl-typography--text-center">
200          <a name="galeria"></a>
201          <div class="mdl-typography--display-1-color-contrast">Galería</div>
202          <div class="android-screens">
203            <div class="android-tv android-screen">
204              <a class="android-image-link"
205                 href="https://mutabit.com/repos.fossil/grafoscopio/doc/tip/Docs/Es/Articulos/Libertadores/bootstrapping-objeto-investigacion.pdf">
206                <img class="android-screen-image" src="images/first-paper.png">
207              </a>
208              <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase"
209                 href="https://mutabit.com/repos.fossil/grafoscopio/doc/tip/Docs/Es/Articulos/Libertadores/bootstrapping-objeto-investigacion.pdf">
210                Ciencia Abierta</a>
211            </div>
212            <div class="android-tv android-screen">
213              <a class="android-image-link"
214                 href="https://mutabit.com/repos.fossil/piamed/doc/tip/Libro/libro.pdf">
215                <img class="android-screen-image" src="images/paper-med-info.png">
216              </a>
217              <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" 
218                  href="https://mutabit.com/repos.fossil/piamed/doc/tip/Libro/libro.pdf">
219                  Innovación Abierta: <br> Acceso a medicamentos</a>
220            </div>
221            <div class="android-tv android-screen">
222              <a class="android-image-link" href="https://mutabit.com/offray/blog/en/entry/panama-papers-1">
223                <img class="android-screen-image"
224                     src="https://mutabit.com/repos.fossil/offray-blog/doc/tip/user/pages/entry/panama-papers-1/minisite.png">
225              </a>
226              <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase mdl-typography--text-left"
227                 href="https://mutabit.com/offray/blog/en/entry/panama-papers-1">
228                  Investigación Reproducible: <br> Panama Papers</a>
229            </div>
230            <div class="android-tv android-screen">
231              <a class="android-image-link"
232                 href="https://mutabit.com/offray/blog/en/entry/ds-twitter-mockup">
233                <img class="android-screen-image"
234                     src="https://offray.withknown.com/file/e9cc5646d905a316c2cce14402aa5a05/thumb.png">
235              </a>
236              <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase mdl-typography--text-left"
237                 href="https://mutabit.com/offray/blog/en/entry/ds-twitter-mockup">
238                  (h)ac(k)tivismos: Twitter Data Selfies</a>
239            </div>
240          </div>
241        </div>
242        <br>
243        <br>
244        <div class ="android-screen-section">
245            <a name="descarga"></a>
246            <div class="android-wear-band">
247            <div class="android-wear-band-text">
248              <div class="mdl-typography--display-2 mdl-typography--font-thin">Descarga</div>
249              <p class="mdl-typography--headline mdl-typography--font-thin">
250                Grafoscopio funciona sobre Pharo Smalltalk, sobre plataformas Windows, Gnu/Linux y Mac.
251              </p>
252              <p>
253                <a class="mdl-typography--font-regular mdl-typography--text-uppercase android-alt-link"
254                   href="https://mutabit.com/repos.fossil/grafoscopio/wiki?name=instalacion">
255                  Descarga y ejecuta &nbsp;<i class="material-icons">chevron_right</i>
256                </a>
257              </p>
258          </div>
259        </div>
260        </div>
261        <div class="android-more-section">
262            <a name="aprende"></a>
263            <div class="android-section-title mdl-typography--display-1-color-contrast">Aprende</div>
264            <div class="android-card-container mdl-grid">
265                <div class="mdl-grid mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-card mdl-shadow--4dp">
266                    <div class="mdl-card__media mdl-cell mdl-cell--12-col-tablet">
267                    <div class="android-tv android-screen">
268                      <a class="android-image-link" href="https://mutabit.com/dataweek">
269                        <img class="android-screen-image"
270                             src="https://archive.org/download/dataweek4/dataweek4.jpe">
271                      </a>
272                    </div>
273                    <div class="android-tv android-screen">
274                      <a class="android-image-link"
275                         href="https://mutabit.com/repos.fossil/grafoscopio/uv/Docs/En/Books/Manual/manual.pdf">
276                        <img class="android-screen-image"
277                             src="./Docs/Imagenes/docs-manual.png">
278                      </a>
279                    </div>
280                    <div class="android-tv android-screen">
281                      <a class="android-image-link"
282                         href="./Docs/En/Talks/Overview/grafoscopio-mapa.svg">
283                         <img class="android-screen-image"
284                             src="./Docs/En/Talks/Overview/grafoscopio-mapa.svg">
285                      </a>
286                    </div>
287                    </div>
288                    <div class="mdl-cell mdl-cell--8-col">
289                        <h2 class="mdl-card__title-text">Talleres y Documentación</h2>
290                        <div class="mdl-card__supporting-text padding-top">
291                        </div>
292                        <div class="mdl-card__supporting-text no-left-padding">
293                            <p>
294                            Nuestro principal espacio de aprendizaje experiencial y cara a cara es
295                            taller-hackatón de una semana (36 hours).
296                            Mira más detalles en
297                            <a href="https://mutabit.com/dataweek/">la página del Data Week</a>.
298                            </p>
299                            <p>
300                            El manual y los tutoriales para Grafoscopio se escribe dentro de la misma
301                            herramienta, como ejemplo de documentación interactiva y las capacidades
302                            de exportación a pdf.
303                            </p>
304                            <p>
305				            Te invitamos a leer/navegar los siguientes documentos:
306                            </p>
307                            <ul>
308                                <li><a href="https://mutabit.com/repos.fossil/grafoscopio/">
309                                    Repositorio de documentos</a>.</li>
310                                <li>Manual de usuario (Inglés)
311                                  [<a href="https://mutabit.com/repos.fossil/grafoscopio/uv/Docs/En/Books/Manual/manual.pdf">PDF</a>]
312                                </li>
313                                <li>Presentación panorámica (Inglés)
314                                  [<a href="./Docs/En/Talks/Overview/grafoscopio-mapa.svg">
315                                    vectorial (SVG)</a>] |
316                                  [<a href="./Docs/En/Talks/Overview/grafoscopio-mapa.mm">
317                                    mapa mental (mm)</a>] |
318                                  [<a href="./Docs/En/Talks/Overview/grafoscopio-mapa.html">
319                                    árbol HTML (html)</a>]
320                                </li>
321                                <li><a href="./Docs/Es/Articulos/Libertadores/bootstrapping-objeto-investigacion.pdf">
322                                Metáforas y artefactos alternativos de escritura para jalonar la
323                                investigación abierta y la ciencia ciudadana y de garage</a>.
324                                Artículo académico que explica la historia y motivaciones tras
325                                grafoscopio (borrador).
326                                </li>
327                                <li>Mapa mental para los talleres:
328                                    <a href="./Docs/En/Talks/Overview/grafoscopio-mapa.mm">Freemind</a> |
329                                    <a href="./Docs/En/Talks/Overview/grafoscopio-mapa.mm">SVG</a>
330                                </li>
331                            </ul>
332                            <b>Prensa y publicaciones:</b>
333                                <p>Aquí algunas publicaciones que hacen referencia al Grafoscópio:</p>
334
335                                <ul>
336                                <li><a href="http://joss.theoj.org/papers/10.21105/joss.00251">Grafoscopio: A moldable tool for literate computing and reproducible research</a>.</li>
337                                <li><a href="https://medium.com/smalltalk-talk/behold-pharo-the-modern-smalltalk-38e132c46053">Behold Pharo: The Modern Smalltalk</a>.</li>
338                                <li><a href="https://pharoweekly.wordpress.com/2016/10/26/about-alternate-ways-to-teach-pharo/">About alternate ways to teach Pharo</a>.</li>
339                                <li><a href="https://medium.com/@dasein42/how-the-results-of-disruption-changes-the-discussion-between-aficionados-of-specific-languages-and-bd424b420f54">How the Results of Disruption Changes the Discussion Between Aficionados of Specific Languages and Environments</a>.</li>
340                                <li>
340<a href="http://blog.nomono.co/2017/08/04/resena-del-grafoscopio-escritura-digital-y-visualizacion-de-datos/">Reseña del Grafoscópio: Escritura digital y visualización de datos</a>.</li>
341                                <li><a href="http://objectmodels.blogspot.nl/2015/11/ann-smalltalks-2015-esta-la-vuelta-de.html">Modelos de Software con Objetos</a>.</li>
342                                <li><a href="http://astares.blogspot.nl/2015/01/grafoscopio.html">Grafoscopio</a>.</li>
343                                </ul>
344                        </div>
345                    </div>
346                </div>
347            </div>
348        </div>
349        <div class="android-more-section">
350            <a name="creditos"></a>
351            <div class="android-section-title mdl-typography--display-1-color-contrast">Créditos</div>
352            <div class="android-card-container mdl-grid">
353                <div class="mdl-grid mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-card mdl-shadow--4dp">
354                    <div class="mdl-card__media mdl-cell mdl-cell--12-col-tablet">
355                    <div class="android-tv android-screen">
356                      <a class="android-image-link" href="http://mutabit.com">
357                        <img class="android-screen-image"
358                             src="https://mutabit.com/images/logo-mutabit-negro.png">
359                      </a>
360                    </div>
361                    <div class="android-tv android-screen">
362                      <a class="android-image-link" href="http://hackbo.co">
363                        <img class="android-screen-image"
364                             src="Docs/Imagenes/hackbo.png">
365                      </a>
366                    </div>
367                    <div class="android-tv android-screen">
368                      <a class="android-image-link" href="http://pharo.org/">
369                        <img class="android-screen-image"
370                             src="http://pharo.org/web/files/pharo.png">
371                      </a>
372                    </div>
373                    <div class="android-tv android-screen">
374                      <a class="android-image-link" href="http://moosetechnology.org/">
375                        <img class="android-screen-image"
376                             src="http://objectprofile.com/img/users/moose.png">
377                      </a>
378                    </div>
379                    <div class="android-tablet android-screen">
380                      <a class="android-image-link" href="http://agilevisualization.com/">
381                        <img class="android-screen-image"
382                             src="http://objectprofile.com/img/ObjectProfileLogo.png">
383                      </a>
384                    </div>
385                    </div>
386                    <div class="mdl-cell mdl-cell--8-col">
387                        <div class="mdl-card__supporting-text padding-top">
388                        </div>
389                        <div class="mdl-card__supporting-text no-left-padding">
390                            <p>
391                            Grafoscopio no hubiera sido posible sin la ayuda de muchas personas vinculadas a diversas
392                            lugares comunitarios e institucionales.
393                            Acá un listado de algunos de esos lugares y personas:
394                            </p>
395                            <p>
396                            <ul>
397                                <li><a href="https://mutabit.com/">mutabiT</a>.</li>
398                                <li><a href="http://hackbo.co/">HackBo</a>, a hackerspace in Bogotá, en  particular las personas asistentes a los talleres de Indie Web Science, especialmente: Rafael Medida, Iván Pulido, Camilo Hurtado & Fernando Castro Toro.</li>
399                                <li>Las comunidades de <a href="http://pharo.org/">Pharo</a>, <a href="http://moosetechnology.org/">Moose</a>
400                                y <a href="http://agilevisualization.com/">Agile Visualization</a>.
401                                En especial: Tudor Girba, Alexandre Bergel, Nicolai Hess, Peter Uhnák, Miltón Mamani & Johan Fabry.</li>
402                               <li>The HiTec Lab in the Fundación Universitaria Los Libertadores, specialy: Jose David Cuartas.
403                               </li>
404                            </ul>
405                            </p>
406                            <p>
407                            Algunas personas han ayudado mucho con su escucha y apoyo,
408                            al margen de cualquier vinculación intitucional y/o comunitaria.
409                            Entre ellas: Andrés Calderón, Hilda Cárdenas, Divian Luna y Yanneth Gil.
410                            </p>
411                        </div>
412                    </div>
413                </div>
414            </div>
415        </div>
416        <br>
417        <br>
418        <div class="android-more-section">
419            <div class ="android-screen-section">
420                <div class="android-wear-band">
421                <div class="android-wear-band-text">
422                  <a name="contacto"></a>
423                  <div class="mdl-typography--display-2 mdl-typography--font-thin">Contacto</div>
424                  <p class="mdl-typography--headline mdl-typography--font-thin">
425                    Tenemos dos métodos principales de contacto:
426                  </p>
427                  <p class="mdl-typography--headline mdl-typography--font-thin">
428                    <ul>
429                        <li>Lista de correo abierta comunitaria:
430                            <ul>
431                                <li><a href="https://lists.riseup.net/www/arc/grafoscopio">Ver archivo histórico</a>.</li>
432                                <li><a href="https://lists.riseup.net/www/subscribe/grafoscopio">Inscribirse</a>.</li>
433                            </ul>
434                        </li>
435                        <li><a href="https://t.me/grafoscopio"><i class="fab fa-telegram"></i>Canal de Telegram</a>.</li>
436                    </ul>
437                    Si está interesado en apoyar Grafoscopio económicamente, pagando por
438                    adaptarlo o extenderlo, crear visualizaciones a la medida o un taller de
439                    capacitación como el <a href="https://mutabit.com/dataweek/">Data Week</a>, escríbanos a nuestro
440                    <a href="mailto:[email protected]?Subject=Grafoscopio" target="_top">correo empresarial</a>.
441                  </p>
442                </div>
443                </div>
444            </div>
445      </div>
446        <footer class="android-footer mdl-mega-footer">
447          <div class="mdl-mega-footer--top-section">
448            <div class="mdl-mega-footer--left-section">
449              <button class="mdl-mega-footer--social-btn"></button>
450              &nbsp;
451              <button class="mdl-mega-footer--social-btn"></button>
452              &nbsp;
453              <button class="mdl-mega-footer--social-btn"></button>
454            </div>
455            <div class="mdl-mega-footer--right-section">
456              <a class="mdl-typography--font-light" href="#top">
457                Back to Top
458                <i class="material-icons">expand_less</i>
459              </a>
460            </div>
461          </div>
462
463          <div class="mdl-mega-footer--middle-section">
464            <p class="mdl-typography--font-light">© 2014 - 2016 Offray Vladimir Luna Cárdenas</p>
465            <p class="mdl-typography--font-light">Made in <a href="http://mutabit.com">mutabiT</a></p>
466          </div>
467        </footer>
468      </div>
469    </div>
470    
470<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
470
471  </body>
472</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.