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&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 <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 451 <button class="mdl-mega-footer--social-btn"></button> 452 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.