Temporary_Lawhpc/index.html at main · rogeliovc/Temporary_Lawhpc · 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!DOCTYPE html>
<html lang="es" class="no-js">
  <head>
    <!-- Metadatos básicos -->
    <meta name="google-site-verification" content="L5QaziDIBmPySatvPSiQaBVgz0mYjJlqQwoP2qio9f4" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Metadatos SEO -->
    <title>LAWHPC - Inicio | Latin American Women in High Performance Computing</title>
    <meta name="description" content="Latin American Women in High Performance Computing - Promoviendo la participación de mujeres en HPC en América Latina">
    <meta name="author" content="LAWHPC">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#6f00ff">
    <meta name="referrer" content="strict-origin">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://lawhpc.org/">
    <meta property="og:title" content="LAWHPC - Latin American Women in High Performance Computing">
    <meta property="og:image" content="https://lawhpc.org/pages/homePage/assets/optimized/banner.webp">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Mujeres en tecnología y computación de alto rendimiento">
    <meta property="og:locale" content="es_ES">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="LAWHPC - Latin American Women in High Performance Computing">
    <meta name="twitter:description" content="Promoviendo la participación de mujeres en HPC en América Latina">
    <meta name="twitter:image" content="https://lawhpc.org/pages/homePage/assets/optimized/banner.webp">
    <meta name="twitter:image:alt" content="Mujeres en tecnología y computación de alto rendimiento">
    <meta property="og:description" content="Promoviendo la participación de mujeres en HPC en América Latina">
    <meta property="og:image" content="https://lawhpc.org/assets/images/og-image.jpg">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://lawhpc.org/">
    <meta name="twitter:title" content="LAWHPC - Latin American Women in High Performance Computing">
    <meta name="twitter:description" content="Promoviendo la participación de mujeres en HPC en América Latina">
    <meta name="twitter:image" content="https://lawhpc.org/assets/images/twitter-card.jpg">

    <!-- Seguridad -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https:; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; font-src 'self' https: data:; connect-src 'self' https:; frame-ancestors 'self';">

    <!-- Preconexiones -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Hojas de estilo -->
    <link rel="stylesheet" href="/css/Globalstyles.css" />
    <link rel="stylesheet" href="/pages/homePage/homePageStyles.css" />

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="alternate icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!-- Scripts -->
    <script>
      // Eliminar clase no-js si JavaScript está habilitado
      document.documentElement.classList.remove('no-js');
      document.documentElement.classList.add('js');
    </script>
  </head>
  <body>
    <!-- Header dinámico con js -->
    <div id="headerContainer">
    </div>
    <div class="banner">
      <picture>
        <!-- Usar WebP si está disponible -->
        <source
          type="image/webp"
          srcset="/pages/homePage/assets/optimized/banner.webp"
          sizes="100vw"
        >
        <!-- Imagen de respaldo en PNG -->
        <img
          src="/pages/homePage/assets/banner.png"
          alt="Mujeres latinoamericanas en computación de alto rendimiento trabajando en tecnología"
          class="bannerImg"
          loading="eager"
          width="1920"
          height="600"
          decoding="async"
          fetchpriority="high"
        >
      </picture>
    </div>
    <main>
      <section class="aboutSection">
        <div class="container">
          <div class="sectionHeader">
            <h2>¿Quiénes Somos?</h2>
          </div>
          <p>
            Latin American Women in High Performance Computing (LA-WHPC) es un capítulo regional conformado por investigadoras, profesionales, estudiantes y líderes de la industria interesadas en fortalecer la participación y liderazgo de las mujeres en el ecosistema de la computación de alto rendimiento en América Latina.
Esta iniciativa busca articular esfuerzos interdisciplinarios, promover la equidad de género y fomentar la excelencia científica y tecnológica a través de redes colaborativas, mentorías, formación y visibilidad internacional en todos los ámbitos de la supercomputación..
          </p>
        </div>
        <div class="logosContainer">
          <!-- Logo 1 -->
          <div class="imageLogoContainer">
            <img
              src="/pages/homePage/assets/logos/logo.webp"
              alt="Logo LA-WHPC"
              class="mission-logo"
              loading="lazy"
              width="200"
              height="auto"
              decoding="async">
          </div>
          <!-- Logo 2 -->
          <div class="imageLogoContainer">
            <img
              src="/pages/homePage/assets/logos/Logo_RedClara.png"
              alt="Logo RedClara"
              class="mission-logo"
              loading="lazy"
              width="200"
              height="auto"
              decoding="async">
          </div>
          <!-- Logo 3 -->
          <div class="imageLogoContainer">
            <img
              src="/pages/homePage/assets/logos/Logo_scalac.png"
              alt="Logo SCALAC"
              class="mission-logo"
              loading="lazy"
              width="200"
              height="auto"
              decoding="async">
          </div>
        </div>
        <div class="seeMoreBtnContainer">
          <a href="https://sites.google.com/view/la-whpc/inicio" target="_blank" rel="noopener noreferrer" aria-label="Ver más sobre LA-WHPC" title="Ver más sobre LA-WHPC" >
            <button class="seeMoreBtn">VER MÁS </button>
          </a>
        </div>
      </section>
    <div class="secondBanner">
      <picture>
        <!-- Usar WebP si está disponible -->
        <source
          type="image/webp"
          srcset="/pages/homePage/assets/optimized/WS_LAWHP_2.webp"
          sizes="100vw"
        >
        <!-- Imagen de respaldo en PNG -->
        <img
          src="/pages/homePage/assets/WS_LAWHP_2.png"
          alt="CARLA 2025 - LATIN AMERICA HIGH PERFORMANCE COMPUTING CONFRENCE - KINGSTON, JAMAICA - SEPTEMBER 22-26"
          class="secondBannerImg"
          loading="eager"
          width="1920"
          height="600"
          decoding="async"
          fetchpriority="high"
        >
      </picture>
    </div>
      <section class="objectiveSection">
        <div class="containerObjectiveSection">
          <div class="sectionHeader">
            <h2>Objetivo General</h2>
          </div>
          <p>
            Fortalecer la presencia, liderazgo y desarrollo profesional de las mujeres en el ámbito de la computación de alto rendimiento en América Latina, desde la investigación básica hasta las aplicaciones de frontera promoviendo una comunidad inclusiva, colaborativa y orientada a la innovación científica y tecnológica con impacto regional y global.
          </p>
          <div class="accordionContainer">
            <!-- Objetivos Particulares Accordion -->
            <div class="accordion">
              <button class="accordionHeader" aria-expanded="false" aria-controls="objectivesContent">
                <span>Objetivos Particulares</span>
                <span>+</span>
              </button>
              <div id="objectivesContent" class="accordionContent">
                <div class="accordionBody">
                  <div class="listItem">
                    <div class="itemBadge">1</div>
                    <div class="itemText">Fomentar la formación y mentoría de mujeres en HPC mediante programas educativos, talleres y actividades de capacitación técnica especializada.</div>
                  </div>
                  <div class="listItem">
                    <div class="itemBadge">2</div>
                    <div class="itemText">Visibilizar el trabajo y contribuciones de mujeres en HPC en la región, destacando trayectorias académicas, profesionales y casos de éxito.</div>
                  </div>
                  <div class="listItem">
                    <div class="itemBadge">3</div>
                    <div class="itemText">Impulsar redes de colaboración regional e internacional que faciliten proyectos conjuntos, movilidad académica y alianzas institucionales.</div>
                  </div>
                  <div class="listItem">
                    <div class="itemBadge">4</div>
                    <div class="itemText">Promover políticas inclusivas y prácticas equitativas en ambientes académicos, científicos y tecnológicos relacionados con HPC.</div>
                  </div>
                  <div class="listItem">
                    <div class="itemBadge">5</div>
                    <div class="itemText">Facilitar el acceso a oportunidades de desarrollo profesional, financiamiento, participación en conferencias y representación en espacios de toma de decisión.</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Metas Accordion -->
            <div class="accordion">
              <button class="accordionHeader" aria-expanded="false" aria-controls="goalsContent">
                <span>Metas</span>
                <span>+</span>
              </button>
              <div id="goalsContent" class="accordionContent">
                <div class="accordionBody">
                  <div class="listItem">
                    <div class="itemBadge">1</div>
                    <div class="itemText"><strong>Red activa:</strong> Crear y consolidar una red latinoamericana de mujeres en HPC activa y sostenible.</div>
                  </div>
                  <div class="listItem">
                    <div class="itemBadge">2</div>
                    <div class="itemText"><strong>Participación:</strong> Incrementar la participación de mujeres en eventos y conferencias de HPC en América Latina.</div>
                  </div>
                  <div class="listItem">
                    <div class="itemBadge">3</div>
                    <div class="itemText"><strong>Visibilidad:</strong> Destacar las contribuciones y logros de las mujeres en HPC en América Latina a través de plataformas y eventos.</div>
                  </div>
                  <div class="listItem">
                    <div class="itemBadge">4</div>
                    <div class="itemText"><strong>Eventos regionales:</strong> Organizar al menos un evento anual de visibilización y networking, articulado con conferencias regionales.</div>
                  </div>
                  <div class="listItem">
                    <div class="itemBadge">5</div>
                    <div class="itemText"><strong>Eventos internacionales:</strong> Participar en eventos internacionales como SC e ISC.</div>
                  </div>
                  <div class="listItem">
                    <div class="itemBadge">6</div>
                    <div class="itemText"><strong>Colaboraciones:</strong> Establecer colaboración con instituciones académicas, centros de supercomputación y organizaciones globales.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </section>

      <section class="newsSection">
        <div class="container">
          <div class="sectionHeader">
            <h2>Últimas Noticias</h2>
          </div>
          <article class="news-card">
            <div class="imageContainer">
              <!--<picture>
                <source
                  type="image/webp"
                  srcset="/pages/homePage/assets/optimized/noticia-sm.webp 480w,
                          /pages/homePage/assets/optimized/noticia-md.webp 800w,
                          /pages/homePage/assets/optimized/noticia.webp 1200w"
                  sizes="(max-width: 768px) 90vw,
                         (max-width: 1200px) 70vw,
                         600px">
                <img
                  src="/pages/homePage/assets/optimized/noticia.webp"
                  alt="Carla Osthoff: liderazgo y contribuciones en CARLA 2025"
                  loading="lazy"
                  width="600"
                  height="400"
                  decoding="async" />
              </picture>-->
              <img
              src="/pages/homePage/assets/optimized/noticia.webp"
              alt="Carla Osthoff: liderazgo y contribuciones en CARLA 2025"
              loading="lazy"
              width="600"
              height="400"
              decoding="async"
              style="width: 100%;" />
            </div>
            <div class="news-content">
              <h3>Carla Osthoff: liderazgo y contribuciones en CARLA 2025</h3>
              <p>La investigadora Carla Osthoff, del LNCC (Brasil), tuvo una destacada participación en CARLA 2025 en Jamaica, compartiendo su experiencia en supercomputación, IA y bioinformática, moderando paneles internacionales y promoviendo la visibilidad de mujeres en HPC en América Latina y el Caribe</p>
              <a href="/news/" class="read-more">Leer más</a>
            </div>
          </article>
        </div>
      </section>
    </main>

    <!-- Footer dinamico con js -->
    <div id="footerContainer"></div>
    <!-- Scripts con carga diferida -->
    <script>
      // Cargar scripts no críticos de forma asíncrona
      function loadScript(src, callback) {
        var script = document.createElement('script');
        script.src = src;
        script.async = true;
        script.defer = true;
        if (callback) script.onload = callback;
        document.body.appendChild(script);
      }

      // Cargar scripts no críticos después de la carga de la página
      window.addEventListener('load', function() {
        loadScript('/js/header.js');
        loadScript('/js/accordion.js');
        loadScript('/js/main.js');
      });
    </script>
    <!-- Scripts al final del body para mejor rendimiento -->
    <script src="/js/loadComponents.js"></script>
    <script src="/js/main.js" defer></script>
    <script>
      // Cargar el header dinámico
      fetch('/components/header.html')
        .then(response => {
          if (!response.ok) throw new Error('No se pudo cargar el header');
          return response.text();
        })
        .then(html => {
          document.getElementById('headerContainer').innerHTML = html;
        })
        .catch(error => {
          console.error('Error cargando el header:', error);
          // Mostrar el header de no-JS en caso de error
          document.querySelector('.no-js-header').style.display = 'block';
        });
    </script>
    <script src="/js/accordion.js" defer></script>

    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    </script>
  </body>
</html>