/ lab1 / index.html
index.html
  1  <!DOCTYPE html>
  2  <html lang="es">
  3  
  4  <head>
  5      <meta charset="UTF-8">
  6      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7      <meta name="description" content="Trabajos de Ricardo Rodriguez Medina">
  8      <meta name="author" content="Ricardo Rodriguez Medina">
  9      <title>Ricardo Rodriguez Medina</title>
 10      <link rel="stylesheet" href="styles.css">
 11  </head>
 12  
 13  <body id="top">
 14      <a href="#top" class="scroll-top">
 15 16      </a>
 17  
 18      <header class="text-center">
 19          <div>
 20              <h1>Ricardo Rodriguez Medina</h1>
 21              <p>Estudiante de Ingeniería en Tecnologías Computacionales</p>
 22              <p><strong>Matrícula:</strong> A01710266 | <strong>Correo:</strong> <a
 23                      href="mailto:A01710266@tec.mx">A01710266@tec.mx</a></p>
 24          </div>
 25      </header>
 26  
 27      <nav>
 28          <h2 class="text-center">Menú de navegación</h2>
 29          <ul>
 30              <li><a href="#proyectos">Mis Proyectos</a></li>
 31              <li><a href="#aficiones">Aficiones</a></li>
 32              <li><a href="#preguntas">Preguntas y Respuestas</a></li>
 33              <li><a href="#contacto">Formulario de Contacto</a></li>
 34          </ul>
 35      </nav>
 36  
 37      <main>
 38          <section id="proyectos">
 39              <header>
 40                  <h2>Mis Principales Proyectos</h2>
 41              </header>
 42  
 43              <article class="card">
 44                  <header>
 45                      <h3>Joger</h3>
 46                  </header>
 47                  <p>Plataforma <strong>integral de administración de pádel</strong> que permite gestionar reservas de
 48                      canchas, torneos, pagos y estadísticas de jugadores en tiempo real.</p>
 49                  <footer>
 50                      <p><em>Tecnologías:</em> React, Rust, PostgreSQL</p>
 51                  </footer>
 52              </article>
 53  
 54              <article class="card">
 55                  <header>
 56                      <h3>Battleclass</h3>
 57                  </header>
 58                  <p>Sistema de <strong>aprendizaje gamificado para Junior High School</strong> basado en mecánicas de
 59                      RPG.</p>
 60                  <footer>
 61                      <p><em>Tecnologías:</em> React, Rust, PostgreSQL</p>
 62                  </footer>
 63              </article>
 64  
 65              <article class="card">
 66                  <header>
 67                      <h3>MyMetaverse</h3>
 68                  </header>
 69                  <p>Plataforma <strong>Play-to-Earn (P2E)</strong> que integra economía digital con experiencias de
 70                      gaming.</p>
 71                  <footer>
 72                      <p><em>Tecnologías:</em> React, Rust, PostgreSQL</p>
 73                  </footer>
 74              </article>
 75          </section>
 76  
 77          <section id="aficiones">
 78              <h2>Mis Aficiones</h2>
 79              <ul>
 80                  <li><strong>Pádel:</strong> Un deporte fácil que me gusta practicar.</li>
 81                  <li><strong>Blockchain y Web3:</strong> Explorando las posibilidades de la tecnología descentralizada
 82                  </li>
 83                  <li><strong>Coding:</strong> Siempre he mostrado gran interés por el desarrollo de software y las
 84                      implicaciones tecnologicas.</li>
 85              </ul>
 86          </section>
 87  
 88          <section id="preguntas">
 89              <h2>Preguntas y Respuestas sobre Tecnologías Web</h2>
 90  
 91              <article class="card">
 92                  <h3>¿Cómo se puede aplicar CSS a un documento HTML?</h3>
 93                  <p>Existen tres formas principales de aplicar CSS:</p>
 94                  <ol>
 95                      <li><strong>CSS Externo:</strong> Mediante un archivo separado .css enlazado con la etiqueta
 96                          <code>&lt;link&gt;</code> en el head. Es la mejor práctica para mantenibilidad.
 97                      </li>
 98                      <li><strong>CSS Interno:</strong> Utilizando la etiqueta <code>&lt;style&gt;</code> dentro del head
 99                          del documento HTML.</li>
100                      <li><strong>Estilos en línea (Inline):</strong> Mediante el atributo <code>style</code> directamente
101                          en las etiquetas HTML. No se recomienda para proyectos grandes.</li>
102                  </ol>
103              </article>
104  
105              <article class="card">
106                  <h3>¿Qué es un selector CSS?</h3>
107                  <p>Un selector es un patrón de elementos que le indica al navegador qué elementos HTML deben ser
108                      seleccionados para aplicarles las reglas de estilo (declaraciones) definidas dentro de las llaves.
109                  </p>
110              </article>
111  
112              <article class="card">
113                  <h3>¿Cuál es la diferencia entre un ID y una Clase?</h3>
114                  <p>La principal diferencia radica en la unicidad y reutilización:</p>
115                  <ul>
116                      <li><strong>ID (<code>#id</code>):</strong> Debe ser único en todo el documento. Se usa para
117                          identificar un solo elemento específico.</li>
118                      <li><strong>Clase (<code>.clase</code>):</strong> Puede aplicarse a múltiples elementos en el mismo
119                          documento. Se usa para aplicar estilos comunes a varios elementos.</li>
120                  </ul>
121              </article>
122  
123              <article class="card">
124                  <h3>¿Qué es la especificidad en CSS?</h3>
125                  <p>Es el conjunto de reglas que utiliza el navegador para decidir qué declaración de estilo se aplica a
126                      un elemento cuando hay múltiples reglas que compiten. Se calcula basándose en el tipo de selectores
127                      (ID tiene más peso que Clase, y Clase más que Elemento).</p>
128              </article>
129  
130              <article class="card">
131                  <h3>¿Qué es el "Box Model" o Modelo de Caja?</h3>
132                  <p>Es la base del diseño web en CSS. Cada elemento se representa como una caja rectangular que consta de
133                      cuatro partes:</p>
134                  <ul>
135                      <li><strong>Content:</strong> El contenido real (texto, imágenes).</li>
136                      <li><strong>Padding:</strong> El espacio entre el contenido y el borde.</li>
137                      <li><strong>Border:</strong> La línea que rodea el padding y el contenido.</li>
138                      <li><strong>Margin:</strong> El espacio exterior al borde que separa al elemento de otros.</li>
139                  </ul>
140              </article>
141  
142              <article class="card">
143                  <h3>¿Cuál es la diferencia entre Internet y la World Wide Web?</h3>
144                  <p>Según <cite>GeeksforGeeks</cite>: "El <strong>Internet</strong> es una red global de redes
145                      interconectadas que permite que dispositivos de todo el mundo se comuniquen. Está compuesto por
146                      hardware (routers, cables, satélites, servidores y computadoras), protocolos (TCP/IP) y servicios
147                      (correo electrónico, FTP, VoIP)."</p>
148                  <p>Mientras que "la <strong>World Wide Web (WWW)</strong> es un sistema de páginas web y sitios web
149                      conectados a través de hipervínculos y accesibles mediante Internet. Fue inventada en 1989 por Tim
150                      Berners-Lee en el CERN."</p>
151                  <p>La diferencia fundamental es que <em>Internet es la infraestructura</em> (las carreteras), mientras
152                      que <em>la Web es un servicio</em> que corre sobre esa infraestructura (el tráfico que circula por
153                      las carreteras).</p>
154              </article>
155  
156              <article class="card">
157                  <h3>¿Cuáles son las partes de un URL?</h3>
158                  <p>Una URL (Uniform Resource Locator) está compuesta por las siguientes partes:</p>
159                  <ol>
160                      <li><strong>Protocolo:</strong> Indica el método de acceso (http, https, ftp, etc.)</li>
161                      <li><strong>Subdominio:</strong> Parte opcional que precede al dominio principal (www, blog, etc.)
162                      </li>
163                      <li><strong>Dominio:</strong> Nombre del servidor donde se aloja el recurso</li>
164                      <li><strong>Puerto:</strong> Número de puerto opcional (:80 para HTTP, :443 para HTTPS)</li>
165                      <li><strong>Ruta:</strong> Ubicación específica del recurso en el servidor</li>
166                      <li><strong>Parámetros de consulta:</strong> Datos adicionales que comienzan con ?</li>
167                      <li><strong>Fragmento:</strong> Identificador de sección específica precedido por #</li>
168                  </ol>
169                  <p>Ejemplo: <code>https://www.ejemplo.com:8080/ruta/pagina?id=123#seccion</code></p>
170              </article>
171  
172              <article class="card">
173                  <h3>¿Cuál es el propósito de los métodos HTTP: GET, HEAD, POST, PUT, PATCH, DELETE?</h3>
174                  <p>Según la documentación de <cite>MDN Web Docs</cite>, los métodos HTTP son verbos que indican el
175                      propósito de la solicitud:</p>
176                  <dl>
177                      <dt><strong>GET</strong></dt>
178                      <dd>Solicita una representación del recurso especificado. Las solicitudes GET solo deben recuperar
179                          datos y no deben contener contenido en el cuerpo de la solicitud. Es <em>seguro, idempotente y
180                              cacheable</em>.</dd>
181  
182                      <dt><strong>HEAD</strong></dt>
183                      <dd>Solicita una respuesta idéntica a GET pero sin el cuerpo de respuesta. Útil para obtener
184                          metadatos sin transferir todo el contenido.</dd>
185  
186                      <dt><strong>POST</strong></dt>
187                      <dd>Envía una entidad al recurso especificado, causando un cambio de estado o efectos secundarios en
188                          el servidor. Se usa para crear recursos nuevos.</dd>
189  
190                      <dt><strong>PUT</strong></dt>
191                      <dd>Reemplaza todas las representaciones actuales del recurso de destino con el contenido de la
192                          solicitud. Es <em>idempotente</em>.</dd>
193  
194                      <dt><strong>PATCH</strong></dt>
195                      <dd>Aplica modificaciones parciales a un recurso. A diferencia de PUT que reemplaza todo el recurso,
196                          PATCH solo actualiza los campos especificados.</dd>
197  
198                      <dt><strong>DELETE</strong></dt>
199                      <dd>Elimina el recurso especificado. Es <em>idempotente</em>.</dd>
200                  </dl>
201              </article>
202  
203              <article class="card">
204                  <h3>¿Qué método HTTP se debe utilizar al enviar un formulario HTML con usuario y contraseña? ¿Por qué?
205                  </h3>
206                  <p>Se debe utilizar el método <strong>POST</strong>.</p>
207                  <p>Según <cite>MDN Web Docs</cite>: "El método POST envía una entidad al recurso especificado, a menudo
208                      causando un cambio de estado o efectos secundarios en el servidor."</p>
209                  <p>Las razones son:</p>
210                  <ul>
211                      <li>Los datos se envían en el <strong>cuerpo de la solicitud</strong>, no en la URL, lo que
212                          proporciona mayor seguridad</li>
213                      <li>Los datos sensibles (contraseñas) no quedan visibles en el historial del navegador ni en los
214                          logs del servidor</li>
215                      <li>POST está diseñado para operaciones que <em>modifican el estado</em> del servidor (como
216                          autenticar un usuario)</li>
217                      <li>Los datos tienen mayor capacidad de almacenamiento que en GET</li>
218                  </ul>
219              </article>
220  
221              <article class="card">
222                  <h3>¿Qué método HTTP se utiliza cuando se accede a una página a través de un URL?</h3>
223                  <p>Se utiliza el método <strong>GET</strong>.</p>
224                  <p>Según <cite>MDN Web Docs</cite>: "El método GET solicita una representación del recurso especificado.
225                      Las solicitudes usando GET solo deben recuperar datos."</p>
226                  <p>Cuando escribes una URL en el navegador o haces clic en un enlace, el navegador envía automáticamente
227                      una solicitud GET para obtener el contenido de esa página.</p>
228              </article>
229  
230              <article class="card">
231                  <h3>Un servidor web devuelve una respuesta HTTP con código 200. ¿Qué significa esto? ¿Ocurrió algún
232                      error?</h3>
233                  <p>El código <strong>200 OK</strong> significa que <em>la solicitud tuvo éxito</em>. No ocurrió ningún
234                      error.</p>
235              </article>
236  
237              <article class="card">
238                  <h3>¿Es responsabilidad del desarrollador corregir un error 404? ¿Por qué?</h3>
239                  <p><strong>Sí</strong>, es responsabilidad del desarrollador o administrador del sitio web.</p>
240                  <p>Según <cite>MDN Web Docs</cite>: "El código 404 Not Found significa que el servidor no puede
241                      encontrar el recurso solicitado. En el navegador, esto significa que la URL no es reconocida."</p>
242                  <p>El error 404 ocurre (algunos ejemplos) cuando:</p>
243                  <ul>
244                      <li>Una página ha sido eliminada o movida</li>
245                      <li>La URL está mal escrita</li>
246                  </ul>
247                  <p>El desarrollador debe corregirlo porque puede deberse a enlaces rotos internos, páginas eliminadas
248                      sin redirección adecuada, o problemas en la estructura del sitio que afectan la experiencia del
249                      usuario y el SEO.</p>
250              </article>
251  
252              <article class="card">
253                  <h3>¿Es responsabilidad del desarrollador corregir un error 500? ¿Por qué?</h3>
254                  <p><strong>Sí</strong>, definitivamente es responsabilidad del desarrollador.</p>
255                  <p>Según <cite>MDN Web Docs</cite>: "El servidor ha encontrado una situación que no sabe cómo manejar.
256                      Este error es genérico, indicando que el servidor no puede encontrar un código de estado 5XX más
257                      apropiado para responder."</p>
258                  <p>El error 500 (Internal Server Error) indica un problema en el lado del servidor como:</p>
259                  <ul>
260                      <li>Errores en el código de la aplicación</li>
261                      <li>Problemas de configuración del servidor</li>
262                      <li>Errores en la base de datos</li>
263                      <li>Fallos en scripts del lado del servidor</li>
264                  </ul>
265                  <p>El desarrollador debe identificar y corregir la causa raíz, ya que este error indica un fallo en la
266                      lógica del servidor.</p>
267              </article>
268  
269              <article class="card">
270                  <h3>¿Qué significa que un atributo HTML5 esté depreciado o desaprobado? Menciona elementos HTML 4
271                      desaprobados en HTML5</h3>
272                  <p>Un elemento o atributo <strong>deprecated (desaprobado)</strong> significa que aunque todavía
273                      funciona, <em>ya no se recomienda su uso</em> porque puede ser eliminado en versiones futuras o hay
274                      alternativas mejores disponibles.</p>
275                  <p>Según <cite>MDN Web Docs</cite>, elementos de HTML 4 que están desaprobados en HTML5 incluyen:</p>
276                  <ul>
277                      <li><code>&lt;center&gt;</code> - Usar CSS text-align: center</li>
278                      <li><code>&lt;font&gt;</code> - Usar CSS font-family, font-size, color</li>
279                      <li><code>&lt;b&gt;</code> - Usar <code>&lt;strong&gt;</code> para importancia semántica</li>
280                      <li><code>&lt;i&gt;</code> - Usar <code>&lt;em&gt;</code> para énfasis semántico</li>
281                      <li><code>&lt;strike&gt;</code> o <code>&lt;s&gt;</code> - Usar CSS text-decoration: line-through
282                      </li>
283                      <li><code>&lt;u&gt;</code> - Usar CSS text-decoration: underline</li>
284                      <li><code>&lt;frameset&gt;</code> y <code>&lt;frame&gt;</code> - Reemplazados por iframes</li>
285                      <li><code>&lt;big&gt;</code>, <code>&lt;tt&gt;</code>, <code>&lt;marquee&gt;</code>,
286                          <code>&lt;blink&gt;</code>
287                      </li>
288                  </ul>
289              </article>
290  
291              <article class="card">
292                  <h3>¿Cuáles son las diferencias principales entre HTML 4 y HTML5?</h3>
293                  <table>
294                      <caption>Comparación entre HTML 4 y HTML5</caption>
295                      <thead>
296                          <tr>
297                              <th>Característica</th>
298                              <th>HTML 4</th>
299                              <th>HTML5</th>
300                          </tr>
301                      </thead>
302                      <tbody>
303                          <tr>
304                              <td><strong>Doctype</strong></td>
305                              <td>Complejo y largo</td>
306                              <td>Simplificado: &lt;!DOCTYPE html&gt;</td>
307                          </tr>
308                          <tr>
309                              <td><strong>Elementos semánticos</strong></td>
310                              <td>No existen (usaba div con clases)</td>
311                              <td>Nuevos: header, nav, article, section, aside, footer, main</td>
312                          </tr>
313                          <tr>
314                              <td><strong>Multimedia</strong></td>
315                              <td>Requiere plugins (Flash)</td>
316                              <td>Elementos nativos audio y video</td>
317                          </tr>
318                          <tr>
319                              <td><strong>Gráficos</strong></td>
320                              <td>No soportado nativamente</td>
321                              <td>Elemento canvas para gráficos 2D/3D</td>
322                          </tr>
323                          <tr>
324                              <td><strong>Formularios</strong></td>
325                              <td>Tipos básicos de input</td>
326                              <td>Nuevos tipos (ejemplos): email, url, number, date, range, etc.</td>
327                          </tr>
328                          <tr>
329                              <td><strong>Almacenamiento local</strong></td>
330                              <td>No disponible</td>
331                              <td>localStorage y sessionStorage</td>
332                          </tr>
333                          <tr>
334                              <td><strong>APIs JavaScript</strong></td>
335                              <td>Límitadas</td>
336                              <td>Geolocation, Web Workers, WebSockets, etc.</td>
337                          </tr>
338                          <tr>
339                              <td><strong>Validación</strong></td>
340                              <td>DTD externo requerido</td>
341                              <td>Sintaxis más flexible y validación simplificada</td>
342                          </tr>
343                      </tbody>
344                  </table>
345              </article>
346  
347              <article class="card">
348                  <h3>¿Qué componentes de estructura y estilo tiene una tabla?</h3>
349                  <p>Según <cite>MDN Web Docs</cite>, una tabla HTML tiene los siguientes componentes de estructura:</p>
350                  <ul>
351                      <li><strong>&lt;table&gt;</strong> - Contenedor principal de la tabla</li>
352                      <li><strong>&lt;caption&gt;</strong> - Título o leyenda de la tabla</li>
353                      <li><strong>&lt;thead&gt;</strong> - Agrupa las filas del encabezado</li>
354                      <li><strong>&lt;tbody&gt;</strong> - Agrupa las filas del cuerpo de datos</li>
355                      <li><strong>&lt;tfoot&gt;</strong> - Agrupa las filas del pie de tabla</li>
356                      <li><strong>&lt;tr&gt;</strong> - Define una fila de celdas</li>
357                      <li><strong>&lt;th&gt;</strong> - Celda de encabezado (header cell)</li>
358                      <li><strong>&lt;td&gt;</strong> - Celda de datos estándar (data cell)</li>
359                      <li><strong>&lt;colgroup&gt;</strong> - Define un grupo de columnas</li>
360                      <li><strong>&lt;col&gt;</strong> - Define atributos para una o más columnas</li>
361                  </ul>
362                  <p>Atributos de estilo (en HTML5 se recomienda usar CSS):</p>
363                  <ul>
364                      <li><code>border</code> - Define el borde de la tabla y celdas</li>
365                      <li><code>colspan</code> - Celda que abarca múltiples columnas</li>
366                      <li><code>rowspan</code> - Celda que abarca múltiples filas</li>
367                      <li><code>scope</code> - Define si un encabezado aplica a fila, columna o grupo</li>
368                  </ul>
369              </article>
370  
371              <article class="card">
372                  <h3>¿Cuáles son los principales controles de una forma HTML5?</h3>
373                  <p>Según <cite>MDN Web Docs</cite>, HTML5 introduce numerosos tipos de controles para formularios:</p>
374  
375                  <h4>Controles básicos de texto:</h4>
376                  <ul>
377                      <li><strong>text</strong> - Texto de una línea</li>
378                      <li><strong>password</strong> - Texto oculto (contraseñas)</li>
379                      <li><strong>textarea</strong> - Texto multilínea</li>
380                      <li><strong>email</strong> - Dirección de correo con validación</li>
381                      <li><strong>url</strong> - URL con validación</li>
382                      <li><strong>tel</strong> - Número telefónico</li>
383                      <li><strong>search</strong> - Campo de búsqueda</li>
384                  </ul>
385  
386                  <h4>Controles numéricos:</h4>
387                  <ul>
388                      <li><strong>number</strong> - Valor numérico</li>
389                      <li><strong>range</strong> - Control deslizante (slider)</li>
390                  </ul>
391  
392                  <h4>Controles de fecha y tiempo:</h4>
393                  <ul>
394                      <li><strong>date</strong> - Selector de fecha</li>
395                      <li><strong>time</strong> - Selector de hora</li>
396                      <li><strong>datetime-local</strong> - Fecha y hora local</li>
397                      <li><strong>month</strong> - Mes y año</li>
398                      <li><strong>week</strong> - Semana del año</li>
399                  </ul>
400  
401                  <h4>Controles de selección:</h4>
402                  <ul>
403                      <li><strong>checkbox</strong> - Casilla de verificación</li>
404                      <li><strong>radio</strong> - Botón de opción única</li>
405                      <li><strong>select</strong> - Lista desplegable</li>
406                      <li><strong>datalist</strong> - Lista de sugerencias autocompletado</li>
407                      <li><strong>color</strong> - Selector de color</li>
408                      <li><strong>file</strong> - Selector de archivos</li>
409                  </ul>
410  
411                  <h4>Controles de botones:</h4>
412                  <ul>
413                      <li><strong>button</strong> - Botón genérico</li>
414                      <li><strong>submit</strong> - Enviar formulario</li>
415                      <li><strong>reset</strong> - Restablecer formulario</li>
416                      <li><strong>image</strong> - Botón con imagen</li>
417                  </ul>
418  
419                  <h4>Controles especiales HTML5:</h4>
420                  <ul>
421                      <li><strong>progress</strong> - Barra de progreso</li>
422                      <li><strong>meter</strong> - Medidor escalar</li>
423                      <li><strong>output</strong> - Resultado de cálculos</li>
424                  </ul>
425              </article>
426  
427              <article class="card">
428                  <h3>¿Qué tanto soporte HTML5 tiene el navegador que utilizas?</h3>
429                  <p>Según link: <a href="https://html5test.com" target="_blank">html5test.com</a> mi navegador tiene:
430                      526/555 points.</p>
431              </article>
432  
433              <article class="card">
434                  <h3>¿Cuál es el ciclo de vida de los sistemas de información?</h3>
435                  <p>El ciclo de vida de los sistemas de información (SI) comprende las etapas por las que pasa un sistema
436                      desde su concepción hasta su retiro:</p>
437                  <ol>
438                      <li><strong>Planificación:</strong> Identificación de necesidades y viabilidad del proyecto</li>
439                      <li><strong>Análisis:</strong> Estudio detallado de requisitos y procesos actuales</li>
440                      <li><strong>Diseño:</strong> Arquitectura del sistema, interfaces y bases de datos</li>
441                      <li><strong>Desarrollo/Implementación:</strong> Codificación y construcción del sistema</li>
442                      <li><strong>Pruebas:</strong> Verificación de funcionamiento correcto</li>
443                      <li><strong>Instalación/Despliegue:</strong> Puesta en producción del sistema</li>
444                      <li><strong>Uso y mantenimiento:</strong> Operación continua y corrección de errores</li>
445                      <li><strong>Retiro:</strong> Sustitución o eliminación del sistema</li>
446                  </ol>
447              </article>
448  
449              <article class="card">
450                  <h3>¿Cuál es el ciclo de desarrollo de sistemas de información?</h3>
451                  <p>El ciclo de desarrollo de sistemas (SDLC: Systems Development Life Cycle) es un proceso estructurado
452                      para crear sistemas de información:</p>
453  
454                  <h4>Metodologías tradicionales:</h4>
455                  <ul>
456                      <li><strong>Cascada (Waterfall):</strong> Etapas secuenciales sin retroceso</li>
457                      <li><strong>Espiral:</strong> Desarrollo iterativo con análisis de riesgos</li>
458                      <li><strong>Prototipos:</strong> Creación rápida de versiones preliminares</li>
459                  </ul>
460  
461                  <h4>Metodologías ágiles modernas:</h4>
462                  <ul>
463                      <li><strong>Scrum:</strong> Sprints iterativos de 2-4 semanas</li>
464                      <li><strong>Kanban:</strong> Flujo continuo de trabajo visualizado</li>
465                      <li><strong>XP (Extreme Programming):</strong> Énfasis en prácticas técnicas</li>
466                  </ul>
467  
468                  <p>Las fases comunes incluyen las que ya mencionamos.</p>
469              </article>
470  
471  
472              <article class="card">
473                  <h3>Como ingeniero de software ¿cuál es tu recomendación sobre el uso de !important en un CSS?</h3>
474                  <p>No se deberia usar ya que denota algo que se está haciendo de manera incorrecta.</p>
475              </article>
476  
477              <article class="card">
478                  <h3>Si se pone una imagen de fondo en una página HTML, ¿por qué debe escogerse con cuidado?</h3>
479                  <p>Porque la resolución podría no ser la correcta y mostrarse de una manera fea.</p>
480              </article>
481  
482  
483              <article class="card">
484                  <h3>Como ingeniero de software, ¿cuál es tu recomendación al elegir las unidades de un propiedad de
485                      estilo entre %, px y pt?</h3>
486                  <p>Cada uno es para un problema distinto. PX es muy exacto. % Cuando es un elemento hijo. pt es como una
487                      medida de impresion casi no se deberia usar porque es un medio digital. Existen otros muy similares
488                      que dependen de una configuración inicial.</p>
489              </article>
490  
491              <article class="card">
492                  <h3>¿Por qué el uso de una versión minimizada del CSS mejora el rendimiento del sitio?</h3>
493                  <p>Porque el archivo es mucho más pequeño y conciso por lo que es más fácil deprocesar y descargar.</p>
494              </article>
495  
496              <article class="card">
497                  <h3>¿Qué diferencias y semejanzas hay entre Java y JavaScript?</h3>
498                  <p>Todas. Son completamente distintos solo el nombre. Porque uno es más orientado al backend y el otro
499                      al frontend y corre en el navegador.</p>
500              </article>
501  
502              <article class="card">
503                  <h3>¿Qué métodos tiene el objeto Date? (Menciona al menos 5*)</h3>
504  
505                  <p>
506                      Algunos métodos del objeto <strong>Date</strong> son:
507                  </p>
508  
509                  <ul>
510                      <li><code>getMonth()</code> – Obtiene el mes.</li>
511                      <li><code>getFullYear()</code> – Obtiene el año.</li>
512                      <li><code>getHours()</code> – Obtiene la hora.</li>
513                      <li><code>toISOString()</code> – Convierte la fecha a formato ISO.</li>
514                      <li><code>getTime()</code> – Devuelve los milisegundos.</li>
515                  </ul>
516              </article>
517  
518              <article class="card">
519                  <h3>¿Qué métodos tienen los arreglos? (Menciona al menos 5*)</h3>
520  
521                  <ul>
522                      <li><code>map()</code> – Transforma cada elemento.</li>
523                      <li><code>filter()</code> – Filtra elementos.</li>
524                      <li><code>push()</code> – Agrega al final.</li>
525                      <li><code>pop()</code> – Elimina el último.</li>
526                      <li><code>includes()</code> – Verifica si existe un valor.</li>
527                  </ul>
528              </article>
529  
530  
531              <article class="card">
532                  <h3>¿Cómo se declara una variable con alcance local dentro de una función?</h3>
533  
534                  <p>
535                      <code>let</code> y <code>const</code>.
536                      let hace la variable inmutable y const constante
537                  </p>
538              </article>
539  
540  
541              <article class="card">
542                  <h3>¿Qué implicaciones tiene utilizar variables globales dentro de funciones?</h3>
543  
544                  <p>
545                      Puede causar efectos secundarios hace dificil el seguimiento del código y puede ser complicado
546                      reutilizar código.
547                  </p>
548              </article>
549  
550          </section>
551  
552          <section id="referencias">
553              <h2>Referencias y Fuentes</h2>
554              <p>Esta página fue desarrollada utilizando las siguientes fuentes autorizadas:</p>
555              <ul>
556                  <li><cite>MDN Web Docs</cite> - Documentación de métodos HTTP: <a
557                          href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods"
558                          target="_blank">developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods</a></li>
559                  <li><cite>MDN Web Docs</cite> - Códigos de estado HTTP: <a
560                          href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status"
561                          target="_blank">developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status</a></li>
562                  <li><cite>MDN Web Docs</cite> - Elementos HTML: <a
563                          href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements"
564                          target="_blank">developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements</a></li>
565                  <li><cite>GeeksforGeeks</cite> - Diferencia entre Internet y WWW: <a
566                          href="https://www.geeksforGeeks.org/computer-networks/difference-between-internet-and-www/"
567                          target="_blank">geeksforgeeks.org/computer-networks/difference-between-internet-and-www/</a>
568                  </li>
569                  <li><cite>W3C Validator</cite> - Validación HTML: <a href="https://validator.w3.org/"
570                          target="_blank">validator.w3.org</a></li>
571                  <li><cite>HTML5 Test</cite> - Soporte de navegadores: <a href="https://html5test.com/"
572                          target="_blank">html5test.com</a></li>
573              </ul>
574          </section>
575          <section id="contacto">
576              <h2>Datos de Contacto</h2>
577              <figure>
578                  <figcaption>Información del estudiante:</figcaption>
579                  <dl>
580                      <dt>Nombre:</dt>
581                      <dd>Ricardo Rodriguez Medina</dd>
582                      <dt>Matrícula:</dt>
583                      <dd>A01710266</dd>
584                      <dt>Correo:</dt>
585                      <dd><a href="mailto:A01710266@tec.mx">A01710266@tec.mx</a></dd>
586                      <dt>Institución:</dt>
587                      <dd>Tecnológico de Monterrey</dd>
588                  </dl>
589              </figure>
590  
591              <h3>Tecnologías utilizadas</h3>
592              <ul>
593                  <li>HTML5</li>
594                  <li>NEOVIM</li>
595              </ul>
596          </section>
597      </main>
598  
599      <footer class="text-center">
600          <p><small>&copy; 2026 Ricardo Rodriguez Medina. Todos los derechos reservados.</small></p>
601      </footer>
602  </body>
603  
604  </html>