WorkshopSegmentacionNoviembre/instal.html at main · SoniaPujolLab/WorkshopSegmentacionNoviembre · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
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
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preparación</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/instal.css">
</head>
<body>

<header>
    <div class="container-fluid">
      <div class="row align-items-center">
        <!-- 🟩 Columna Izquierda: Menú -->
        <div class="col-4 order-1">
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarMenu"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">
              <li class="nav-item"><a href="index.html" class="nav-link active">Inicio</a></li>
              <li class="nav-item"><a href="ponentes.html" class="nav-link">Ponentes</a></li>
              <li class="nav-item"><a href="about.html" class="nav-link">Equipo de Latinoamérica</a></li>
              <li class="nav-item"><a href="instal.html" class="nav-link">Preparación</a></li>
              <li class="nav-item"><a href="event.html" class="nav-link">Fotos</a></li>
            </ul>
          </div>
        </div>

        <!-- 🟦 Columna Centro: Logo -->
        <div class="col-4 order-2 logo">
          <img src="https://www.slicer.org/assets/img/3D-Slicer-Mark.svg" alt="3D Slicer Logo">
          <div class="logo-text">
            <h1>3D SLICER</h1>
            <p>for Latinoamérica</p>
          </div>
        </div>

        <!-- 🟥 Columna Derecha: Estado -->
        <div class="col-4 order-3 text-end">
          <p class="location">Estado de México, México, 2025</p>
        </div>
      </div>
    </div>
  </header>

    <section class="preparacion">
        <h1>Preparación para el Taller</h1>
        <p>Este documento es para que puedas preparar tu equipo de computo para los talleres. Es importante que todos los pasos deban completarse antes del evento, ya que pueden tardar en cargarse.</p>
        <p class="resaltado">
        Si tienes alguna duda o problema, ponte en contacto con nosotros por correo electrónico:
        <a href="mailto:vmmontanos@uaemex.mx">vmmontanos@uaemex.mx</a>
        o por medio de Google Meet, los días 10 y 11 de Noviembre de 2025 en un horario de 13:00 a 14:00 en:
        <a href="https://meet.google.com/smm-mhoc-uig">https://meet.google.com/smm-mhoc-uig</a>.
        </p>

        <h2>Descargar los Conjuntos de Datos</h2>
        <ul>
            <li><strong>Dropbox:</strong> Descargar conjuntos de datos haciendo clic <a href="https://www.dropbox.com/scl/fo/5dnkfb8l3gzjfnj3vfuy9/ANINtTUDHeApkjeQrodlwjE?rlkey=stg267mfmlagnrguxeek5drm1&st=dylbw4nn&dl=0"> aquí</a></li>
        </ul>

        <h2>Descargar y configura 3D Slicer</h2>
        <h3>Descargar 3D Slicer</h3>
        <p>Descarga la versión estable del 3D Sliecre haciendo clic en el enlace de tu sistema operativo:</p>
        <div class="so-grid">
            <div class="so-name">Windows</div>
            <div class="so-name">MacOS</div>
            <div class="so-name">Linux</div>

            <div class="so-icon-block">
                <img src="https://download.slicer.org/assets/img/platforms/windows-logo.svg" alt="Windows" class="so-icon">
            </div>
            <div class="so-icon-block">
                <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="MacOS" class="so-icon">
            </div>
            <div class="so-icon-block">
                <img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg" alt="Linux" class="so-icon">
            </div>

            <div class="so-link"><a href="https://download.slicer.org/bitstream/67c53d1129825655577d0b13">Descargar</a></div>
            <div class="so-link"><a href="https://download.slicer.org/bitstream/67c52e9629825655577d0353">Descargar</a></div>
            <div class="so-link"><a href="https://download.slicer.org/bitstream/67c51fc129825655577cfee9">Descargar</a></div>
        </div>

        <h3 class="subpaso">Descarga el paquete de lenguajes</h3>
        <ol>
            <li>Haz clic en el administrador de extensiones<br>
                <img src="img/assets/tuto/p1.png" alt="Administrador de extensiones">
            </li>
            <li>Busca LanguagesPacks y haz clic en instalar<br>
                <img src="img/assets/tuto/p2.png" alt="Instalar LanguagesPacks">
            </li>
            <li>Haz clic en el botón de reiniciar; el software se reiniciará e instalará las extensiones<br>
                <img src="img/assets/tuto/p3.png" alt="Reiniciar software">
            </li>
        </ol>

        <h3>Configurar 3D Slicer en español</h3>
        <p>Después de que se reinició Slicer se debe cambiar el idioma que trae configurado implementando los siguientes pasos</p>
        <ol>
            <li>Abre el módulo Language Tools:<br>
                <img src="img/assets/tuto/p4.png" alt="Language Tools" class="shadow-img">
            </li>
            <li>Selecciona la opción Github (actualizaciones diarias)<br>
                <img src="img/assets/tuto/p5.png" alt="Seleccionar idioma">
            </li>
            <li>Haz clic en "Actualizar archivos de traducción" y espera el mensaje "¡Actualización completada! ..."<br>
                <img src="img/assets/tuto/p6.png" alt="Actualizar traducciones">
                <img src="img/assets/tuto/p6_5.png" alt="Actualizar traducciones 2">
            </li>
            <li>Luego selecciona el idioma español y haz clic en reiniciar<br>
                <img src="img/assets/tuto/p7.png" alt="Reiniciar para aplicar idioma">
            </li>
        </ol>
        <p>Al final debes de ver el mensaje de bienvenida en español.</p>
        <img src="img/assets/tuto/p8.png" alt="Interfaz en español">

        <p>Puedes seguir el video tutorial de YouTube:
        <a href="https://www.youtube.com/watch?v=p1wEC94lY9o"
            onclick="window.open(this.href,'_blank'); return false;"
            rel="noopener noreferrer">
            Instalación de 3D Slicer
        </a>
        </p>

        <h2>Instalación de extensiones</h2>
        <p>Para este taller, necesitamos instalar las extensiones: TotalSegmentator, MonaiAuto3DSeg.</p>
        <ol>
            <li>Haz clic en el administrador de extensiones<br>
                <img src="img/assets/tuto/p1.png" alt="Administrador de extensiones">
            </li>
            <li>Busca TotalSegmentator en la barra de búsqueda y haz clic en instalar<br>
                <img src="img/assets/tuto/p9.png" alt="Instalar TotalSegmentator">
            </li>
            <li>Cuando termine el proceso de instalación cambiara el boton de "Instal" a verde. Esta extención tambien instala la extensión "NNUNet"<br>
                <img src="img/assets/tuto/p10.png" alt="TotalSegmentator instalado">
            </li>
            <li>Busca MonaiAuto3DSeg y haz clic en instalar<br>
                <img src="img/assets/tuto/p11.png" alt="Instalar MonaiAuto3DSeg">
            </li>
            <li>Cuando termine el proceso de instalación cambiara el boton de "Instal" a verde.<br>
                <img src="img/assets/tuto/p12.png" alt="MonaiAuto3DSeg instalado">
            </li>
            <li>Haz clic en el botón de reiniciar; el software se reiniciará e instalará las extensiones<br>
                <img src="img/assets/tuto/p13.png" alt="Reiniciar software">
            </li>
        </ol>

        <h2>Prueba las extensiones</h2>
        <ol>
            <li>Haz clic en "Descargar datos de muestra"<br>
                <img src="img/assets/tuto/p14.png" alt="Descargar datos de ejemplo">
            </li>
            <li>Haz clic en "CTChest":<br>
                <img src="img/assets/tuto/p15.png" alt="CTChest">
            </li>
            <li>Al final de este proceso, deberías tener los datos cargados<br>
                <img src="img/assets/tuto/p17.png" alt="Datos cargados">
            </li>
            <li>Ve al módulo TotalSegmentator:<br>
                <img src="img/assets/tuto/p18.png" alt="TotalSegmentator" class="shadow-img">
            </li>
            <li>Selecciona "CTChest" en "Volumen de entrada" y haz clic en "Aplicar"<br>
                <img src="img/assets/tuto/p20.png" alt="Aplicar modelo">
            </li>
            <li>Cuando aparezca la ventana emergente, haz clic en "OK"<br>
                <img src="img/assets/tuto/p21.png" alt="Confirmar">
            </li>
            <li>Si aparece "No se detecta GPU", selecciona "Rápido"<br>
                <img src="img/assets/tuto/p22.png" alt="Opción rápida">
            </li>
            <li>Al final de este proceso, el modelo debería estar segmentado. Para poderlo ver haz clic en "Mostrar 3D"<br>
                <img src="img/assets/tuto/p23.png" alt="Modelo segmentado">
            </li>
            <li>Ahora deberas poder ver el modelo en 3D segmentado<br>
                <img src="img/assets/tuto/p24.png" alt="Modelo segmentado">
            </li>
        </ol>
    </section>


<footer>
  <div class="footer-content">
    <!-- 🔹 Logos de convenios con nombre -->
    <div class="partners">
      <a href="https://www.uaemex.mx/" target="_blank">
        <img src="img/assets/partners/uaem.svg" alt="UAEM">
        <span>Universidad Autónoma del Estado de México</span>
      </a>
      <a href="https://www.ingenieria.uaemex.mx/" target="_blank">
        <img src="img/assets/partners/fi.jpeg" alt="Facultad de Ingeniería">
        <span>Facultad de Ingeniería</span>
      </a>
      <a href="https://hms.harvard.edu/" target="_blank">
        <img src="img/assets/partners/hms.png" alt="Harvard Medical School">
        <span>Harvard Medical School</span>
      </a>
      <a href="#" target="_blank">
        <img src="img/assets/partners/CTBC.jpeg" alt="Universidad Militar Nueva Granada">
        <span>Doctorado en Ciencias, Tecnología Biomédica y Control</span>
      </a>
      <a href="https://www.umng.edu.co/" target="_blank">
        <img src="img/assets/partners/umg.png" alt="Universidad Militar Nueva Granada">
        <span>Universidad Militar Nueva Granada</span>
      </a>
    </div>

    <!-- 🔹 Copyright al final -->
    <p>© 2025 Slicer Latinoamérica — Todos los derechos reservados.</p>
  </div>
</footer>

<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
  </script>
</body>
</html>