Programación en el Cliente con JavaScript y Manipulación del DOM

🔹 Contenedores de Agrupación (<fieldset> y

)

El uso de <fieldset> permite agrupar lógicamente controles relacionados. Esto no solo ayuda a la organización visual, sino que es vital para la accesibilidad; los lectores de pantalla anuncian el contexto del grupo gracias a la etiqueta

que actúa como el titulo semántico del bloque.

🔹 Vinculación de Datos ()

La etiqueta en HTML se caracteriza por definir y asociar una descripción textual a un control de formulario, como campos de entrada, casillas de verificación o selectores. Su función es identificar claramente qué dato debe ingresar el usuario y crear una relación semántica entre el texto y el campo correspondiente. Esta asociación se realiza mediante el atributo for, cuyo valor debe coincidir exactamentev con el atributo id del elemento de entrada, permitiendo que al hacer clic sobre el texto del label se active automáticamente el campo vinculado. Esto amplía el área de interacción, mejora la usabilidad especialmente en dispositivos táctiles de forma que cumple los estándares de accesibilidad, ya que los lectores de pantalla pueden interpretar correctamente la relación entre la etiqueta y el control, beneficiando a usuarios con discapacidades visuales o motrices.

📌 Formularios y validación en HTML5

🔹 Componentes de Entrada

En este apartado, se presentan los principales componentes de entrada de datos en HTML, utilizados para capturar información desde el usuario dentro de un formulario web. Cada uno de estos elementos cumple un rol especifico según el tipo de dato que se desea ingresar; por ejemplo, texto breve, texto multilínea, selección de opciones o ejecución de acciones. Esta posee características propias de comportamiento y estructura. Conocer sus diferencias y usos adecuados permite diseñar formularios más claros, usables y semánticamente correctos. La siguiente tabla sintetiza los componentes de entrada más utilizados y su función principal dentro de la interfaz: Tabla 1. Componentes de Entrada Fuente: elaboración propia Componente entrada Descripción El elemento más polivalente, determinado por su atributo type. Diseñado para entradas de texto multilínea (ej: comentarios). A diferencia de <input>, requiere una etiqueta de cierre obligatoria.. <select> y <option> <button> Para la selección de valores predefinidos, optimizando el espacio en pantalla. El disparador de acciones. Se recomienda el uso de <button type="submit"> sobre <input type="submit"> debido a su mayor flexibilidad para incluir contenido HTML interno (como iconos) y su comportamiento más consistente en navegadores modernos.</p> <h3 id="-tipos-de-entrada-y-comportamientos">🔹 Tipos de entrada y comportamientos</h3> <p>A continuación, se adjunta una tabla resumen con algunos tipos de entrada que se pueden encontrar en algunos formularios y los comportamientos correspondientes de cada uno. Tabla 2. Tipos de <input> y su impacto en la experiencia de usuario Fuente: elaboración propia Tipo de Input Uso Específico text Entradas de texto genéricas (nombres, direcciones). Comportamiento Campo libre; teclado estándar en móviles; sin validación automática. email Direcciones de correo (formato user@domain). Valida formato; muestra error si no cumple; teclado con @ en móviles. password Contraseñas (caracteres ofuscados o transformados). Oculta caracteres; restringe sugerencias visibles; control de seguridad. number Valores numéricos puros (edad, cantidad). Solo acepta números; muestra flechas en escritorio; teclado numérico en móviles. tel Números de teléfono. Sin validación estricta; teclado telefónico en móviles date Selección de fechas (calendario). Muestra calendario nativo (widget del navegador o del SO). url Direcciones web (protocolo http/https). Valida estructura; teclado con / y .com en móviles.</p> <ul> <li>Ejemplificación práctica de tipos de entrada en formularios.</li> </ul> <h3 id="-atributos-y-validación-nativa-seguridad-y-flujo-de-datos">🔹 Atributos y validación nativa Seguridad y Flujo de Datos</h3> <p>La configuración técnica de un formulario determina cómo viajan los datos. Errores en estos atributos pueden comprometer la integridad de la aplicación en cuanto a su funcionamiento o comportamiento esperado.</p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p9-184.png" alt="Figura 1. Implementación de tipos de entrada en un formulario web mediante código HTML"> <em>Figura 1. Implementación de tipos de entrada en un formulario web mediante código HTML (Fuente: elaboración propia)</em></p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p9-185.png" alt="Figura 2. Vista final de formulario aplicado en el navegador"> <em>Figura 2. Vista final de formulario aplicado en el navegador (Fuente: elaboración propia)</em></p> <p>En HTML, los formularios utilizan principalmente los métodos GET y POST, los cuales definen la forma en que la información es enviada desde el navegador hacia el servidor. La correcta elección de estos métodos es fundamental, ya que cada uno presenta diferencias en términos de visibilidad de los datos, capacidad de envío y nivel de seguridad, impactando directamente en la experiencia del usuario y en la protección de la información</p> <ul> <li>Diferencia entre GET vs. POST: a) GET(Default): ◦ Los datos se adjuntan a la URL tras un separador “?”. ◦ Limitaciones: la URL tiene un límite aproximado de 2000 caracteres. ◦ Seguridad: los datos son visibles en el historial del navegador y logs del servidor. ◦ o Uso: ideal para búsquedas o filtros que no alteran el estado del servidor. b) POST ◦ Los datos viajan en el cuerpo (body) de la petición HTTP. ◦ Capacidad: sin límites técnicos estrictos (ideal para archivos) ◦ Seguridad: los datos no son visibles en la URL ◦ Uso: obligatorio para enviar contraseñas, datos personales o archivos.</li> </ul> <h3 id="-atributos-de-control-avanzado">🔹 Atributos de Control Avanzado</h3> <p>Los atributos de control avanzado permiten definir con mayor precisión el comportamiento de un formulario web, tanto en la forma en que se procesan los datos como en la experiencia del usuario. Su correcta configuración resulta fundamental para garantizar una interacción eficiente, segura y coherente con los requerimientos de la aplicación. La siguiente tabla resume algunos de los principales atributos y su función dentro de un formulario HTML:</p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p11-143.png" alt="Figura 3. Representación Gráfica de Métodos GET/POST en formularios HTML"> <em>Figura 3. Representación Gráfica de Métodos GET/POST en formularios HTML (Fuente: OpenAI (2026))</em></p> <h3 id="-capa-de-validación-nativa-html5">🔹 Capa de Validación Nativa HTML5</h3> <p>HTML5 contempla la validación declarativa, permitiendo asegurar la calidad de los objetos sin escribir código de programación complejo:</p> <ul> <li> <p>Required: obliga a que el campo contenga un valor de forma obligatoria.</p> </li> <li> <p>Pattern: utiliza Expresiones Regulares (Regex). Ejemplo: pattern=”[0-9]{9}” para validar exactamente dígitos.</p> </li> <li> <p>Min/Max/Step: define rangos y saltos para campos numéricos y de fecha</p> </li> <li> <p>Maxlength/Minlength: controla la extensión de caracteres, evitando saturación de base de datos. Tabla 3. Síntesis atributos de control Fuente: OpenAI (2026) Atributo Función enctype Define la codificación del cuerpo de la petición. Uso/Observación Para subir archivos con <input type="file">, es obligatorio usar multipart /form-data. novalidate Desactiva la validación nativa del navegador. Útil cuando se gestiona toda la validación mediante JavaScript target Define dónde se mostrará la respuesta del servidor. Por ejemplo, _blank abre el resultado en una nueva pestaña. autocomplete Permite al navegador sugerir valores ingresados previamente. Mejora la experiencia de usuario; se puede activar o desactivar (on / off).</p> </li> </ul> <p>En este contexto, es fundamental comprender que cada campo debe estar correctamente identificado para que los datos puedan ser procesados. Mientras que el atributo id se utiliza para vincular el elemento con su respectiva etiqueta <label> y para su manipulación en el DOM, el atributo name, definido directamente en los campos de entrada (input, textarea, select), cumple un rol crítico, ya que es la clave mediante la cual el servidor recibe y reconoce cada valor enviado. Si un campo no posee el atributo name, el formulario se enviará correctamente, pero dicho dato no será recibido ni procesado por el servidor.</p> <hr> <h2 id="-modelo-dom-y-atributos-html-bajo-estándar-w3c">📐 Modelo DOM y atributos HTML bajo estándar W3C</h2> <h3 id="-dom-como-estructura-de-árbol">🔹 DOM como Estructura de Árbol</h3> <p>El Document Object Model (DOM) es la interfaz que permite a los navegadores interpretar el HTML no como un texto plano, sino como una jerarquía de objetos. Según el estándar de la W3C, esta estructura se visualiza como un árbol de nodos.</p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p13-152.png" alt="Figura 4. Ejemplificación gráfica validación nativa HTML5"> <em>Figura 4. Ejemplificación gráfica validación nativa HTML5 (Fuente: OpenAI (2026))</em></p> <ul> <li>Tipos de Nodos Principales: ◦ Element Nodes: representan las etiquetas (ej: <div>, <p>). ◦ Attribute Nodes: información adicional adentro de la etiqueta (ej: href, src). ◦ ext Nodes: el contenido textual dentro de un elemento. La importancia de una estructura DOM bien formada (con etiquetas correctamente anidadas y cerradas) es muy relevante ya que mejora el rendimiento de la página. Cuando el HTML está desordenado o tiene errores, el navegador debe corregirlo mientras carga el sitio, y ese trabajo extra consume tiempo y recursos. Al hacer estas correcciones, el navegador puede tener que recalcular la posición de los elementos (ReFlow) y volver a dibujar partes de la pantalla (RePaint), lo que reduce la fluidez y puede hacer que la página se sienta más lenta. Además, una estructura mal organizada dificulta que los buscadores entiendan correctamente el contenido de la página, lo que puede hacer que aparezca más abajo en los resultados de búsqueda (Generalmente el DOM se puede inspeccionar a través de los navegadores web, de forma que se visualiza la jerarquía y los nodos mencionados anteriormente).</li> </ul> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p14-156.png" alt="Figura 5. Impacto de la optimización del DOM en el rendimiento web"> <em>Figura 5. Impacto de la optimización del DOM en el rendimiento web (Fuente: OpenAI (2026))</em></p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p15-160.png" alt="Figura 6. Vista previa de DOM de Google a través de un navegador"> <em>Figura 6. Vista previa de DOM de Google a través de un navegador (Fuente: elaboración propia)</em></p> <h3 id="-atributos-globales-y-estándar-w3c">🔹 Atributos Globales y Estándar W3C</h3> <p>Los atributos globales son atributos que se pueden utilizar en prácticamente cualquier elemento HTML, sin importar su tipo. Su importancia es fundamental, ya que permiten identificar, clasificar, describir y controlar los elementos dentro de una página. Gracias a estos atributos, es posible seleccionar elementos para aplicar estilos con CSS y también acceder a ellos para su manipulación mediante JavaScript.</p> <p>Tabla 4. Atributos globales y estándar W3C Fuente: elaboración propia Atributo Función id Identificador único absoluto Uso/Observación Anclajes, JS y selectores de alta prioridad. class Identificador reutilizable para grupos Aplicación de estilos modulares y escalables title Información contextual (Tooltip) Mejora la accesibilidad y descripción de iconos. lang Idioma del elemento Vital para motores de búsqueda y lectores de pantalla. data-* Atributos de datos personalizados Almacenamiento de valores para lógica de scripts sin afectar el estilo</p> <hr> <h2 id="-css3">📌 CSS3</h2> <p>CSS (Cascading Style Sheets) es el lenguaje encargado de definir la presentación visual de un documento HTML. Su función principal es separar responsabilidades dentro de una página web: mientras HTML define el contenido y la estructura (qué elementos existen y cómo se organizan), CSS define la forma en que estos elementos se ven en el apartado estético (Colores, tamaños, posiciones, tipografías y distribución en pantalla). Esta separación permite mantener el código más ordenado, reutilizable y fácil de mantener, ya que el contenido no se mezcla con las reglas de diseño.</p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p17-120.png" alt="Figura 7. Representación gráfica atributos globales"> <em>Figura 7. Representación gráfica atributos globales (Fuente: elaboración propia)</em></p> <p>El término “Cascading” (cascada) hace referencia al mecanismo que utiliza CSS para decidir qué estilos aplicar cuando existen múltiples reglas que afectan al mismo elemento. No todas las reglas tienen la misma prioridad: el navegador resuelve los conflictos evaluando tres factores principales:</p> <ul> <li> <p>Primero, la fuente del estilo (por ejemplo, si viene de un estilo en línea, de una hoja interna o de una hoja externa).</p> </li> <li> <p>Segundo, la especificidad del selector, donde selectores más precisos —como un id— tienen mayor prioridad que selectores más generales —como una etiqueta—.</p> </li> <li> <p>Tercero, el orden de aparición: si dos reglas tienen la misma especificidad, prevalece la que aparece más abajo en el código. Gracias a este modelo en cascada, CSS puede combinar múltiples hojas de estilo y reglas sin romper el diseño, aplicando siempre la más prioritaria según estas reglas. Esto hace posible construir sistemas de estilos escalables y modulares, fundamentales en el desarrollo web.</p> </li> </ul> <h3 id="-estructura-de-una-regla-css">🔹 Estructura de una Regla CSS</h3> <p>Una regla CSS es la instrucción básica con al que se define el estilo visual de uno o más elementos HTML. Cada regla indica qué elementos serán afectados y qué propiedades visuales se modificarán.</p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p19-127.png" alt="Figura 8. Declaraciones y sintaxis CSS"> <em>Figura 8. Declaraciones y sintaxis CSS (Fuente: OpenAI (2026))</em></p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p19-128.png" alt="Figura 9. Sintaxis CSS a través de un archivo “Style.css”"> <em>Figura 9. Sintaxis CSS a través de un archivo “Style.css” (Fuente: OpenAI (2026))</em></p> <ul> <li>Declaraciones y Sintaxis CSS</li> <li>Sintaxis CSS a través de un archivo “Style.CSS” Cabe señalar que CSS no se limita a aplicar estilos usando únicamente el nombre de la etiqueta HTML. Su verdadera particularidad está en que permite seleccionar elementos de forma más específica y controlada mediante clases (class) e identificadores (id). Esto posibilita reutilizar estilos en diferentes fragmentos de código sin dependeré de la etiqueta estructural. Gracias a este mecanismo, el desarrollo puede separar completamente la estructura del diseño, crear sistemas de estilos modulares y evitar efectos colaterales no deseados. En términos prácticos, seleccionar por clase permite estilizar grupos de componentes similares, mientras que</li> </ul> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p20-132.png" alt="Figura 10. Vista previa Resultado Ejemplo CSS"> <em>Figura 10. Vista previa Resultado Ejemplo CSS (Fuente: OpenAI (2026))</em></p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p20-133.png" alt="Figura 11. Código HTML ejemplo implementación CSS"> <em>Figura 11. Código HTML ejemplo implementación CSS (Fuente: OpenAI (2026))</em></p> <ul> <li>Resultado Final</li> <li>Código HTML seleccionar por id permite personalizar elementos únicos dentro de la interfaz. Este modelo de selección es la base de la especificidad en CSS y del diseño escalable de interfaces.</li> </ul> <h3 id="-métodos-de-implementación-y-prioridad">🔹 Métodos de implementación y prioridad</h3> <p>CSS puede aplicarse de tres formas. Si bien todas funcionan, no todas son adecuadas y recomendadas en su uso práctico. Cada una de ellas contemplan una debida prioridad la cual funciona como una sobreescritura de datos, es decir que un método de implementación puede sobrescribir a otro de forma que solo predomine un fragmento dominante.</p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p21-48.png" alt="Figura 12. Implementación de CSS en elementos HTML con Clases e Id"> <em>Figura 12. Implementación de CSS en elementos HTML con Clases e Id (Fuente: OpenAI (2026))</em></p> <ul> <li> <p>En línea (style=” …”): Desaconsejado. Dificulta el mantenimiento y rompe la jerarquía de especificidad. Ejemplo: <p style="color:red;"></p> </li> <li> <p>Interno (<style>): Útil para prototipos rápidos de una sola página. Ejemplo: <style> p { color:red; } </style></p> </li> <li> <p>Externo (<link>): El estándar universal. Permite la reutilización de estilos en todo el sitio y optimiza la carga mediante caché. Ejemplo: <link rel="stylesheet" href="style.css"></p> </li> </ul> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p23-56.png" alt="Figura 14. Resumen niveles de prioridad en especificidad CSS"> <em>Figura 14. Resumen niveles de prioridad en especificidad CSS (Fuente: OpenAI (2026))</em></p> <h3 id="-el-modelo-de-caja-box-model">🔹 El Modelo de Caja (Box Model)</h3> <h3 id="-el-modelo-de-caja-box-model-es-uno-de-los-conceptos-fundamentales-de">🔹 El Modelo de Caja (Box Model) es uno de los conceptos fundamentales de</h3> <p>CSS. Describe cómo el navegador representa y calcula el tamaño real de cada elemento HTML en la página. Para el motor de renderizado, todo elemento es tratado como una caja rectangular, incluso si visualmente parece tener otra forma. Comprender este modelo es clave para controlar correctamente el diseño, la alineación, el espaciado y la distribución de los componentes en una interfaz web. En concreto, el modelo de caja establece que: el espacio que ocupa un elemento en pantalla no depende solo de su contenido, sino de la suma de cuatro capas estructurales.</p> <p>Los elementos que hace referencia son los siguientes: Marco Gráfico de Elementos del Box Model:</p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p24-60.png" alt="Figura 15. Elementos del modelo de caja"> <em>Figura 15. Elementos del modelo de caja (Fuente: OpenAI (2026))</em></p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p24-61.png" alt="Figura 16. Marco gráfico de elementos del Box Model"> <em>Figura 16. Marco gráfico de elementos del Box Model (Fuente: OpenAI (2026))</em></p> <p>La construcción de interfaces web modernas se sostiene sobre tres pilares técnicos fundamentales: una estructura HTML semántica, una validación nativa adecuada de formularios y un sistema de estilos CSS bien organizado. La correcta aplicación de validaciones declarativas en HTML5 permite asegurar la calidad de los datos desde el origen, reducir errores de ingreso y fortalecer el flujo de información antes de su procesamiento. A su vez, mantener un DOM limpio y coherente facilita la accesibilidad, la compatibilidad entre navegadores y la futura integración de comportamiento dinámico. Desde la perspectiva visual, CSS3 aporta el marco necesario para controlar de manera precisa la presentación, utilizando la cascada, la especificidad de selectores y el modelo de caja para lograr interfaces consistentes y mantenibles. El dominio de estos conceptos permite construir diseños predecibles, escalables y adaptables a distintos dispositivos. Como refuerzo final, se recomienda incorporar una página de referencia de propiedades CSS, que consolide qué aspectos pueden modificarse mediante estilos —tipografías, colores, fondos, tamaños, espaciados, bordes y distribución— funcionando como guía rápida de consulta técnica. Una referencia completa y actualizada puede encontrarse en De esta forma, la interfaz queda técnicamente preparada para la siguiente etapa de desarrollo: la incorporación de lógica dinámica e interacción avanzada mediante JavaScript.</p> <hr> <h2 id="-conclusión">💡 Conclusión</h2> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference</a>.</p> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p26-69.png" alt="Figura 17. Modificaciones básicas posibles con CSS"> <em>Figura 17. Modificaciones básicas posibles con CSS (Fuente: OpenAI (2026))</em></p> <ul> <li>Mozilla Developer Network. (2025). The form element. MDN Web Docs.</li> <li>Mozilla Developer Network. (2025). CSS styling basics. MDN Web Docs.</li> <li>Mozilla Developer Network. (2025). Styling web forms. MDN Web Docs.</li> <li>World Wide Web Consortium (W3C). (s.f.). CSS Box Model Module Level</li> </ul> <ol start="3"> <li></li> </ol> <hr> <hr> <h2 id="-potencia-tus-proyectos-tecnológicos-con-proyecto-luna">🚀 Potencia tus proyectos tecnológicos con Proyecto Luna</h2> <p>En <strong><a href="https://proyectoluna.com/">Proyecto Luna</a></strong> desarrollamos arquitectura de software de alto rendimiento, optimización de bases de datos críticas y soluciones aplicadas de <a href="/work/inteligencia-artificial/">inteligencia artificial y automatización</a> para empresas y profesionales.</p> <ul> <li>💼 <strong>Soluciones de ingeniería</strong>: Conoce nuestras capacidades y casos de estudio en <a href="/work/">proyectoluna.com/work/</a>.</li> <li>🛡️ <strong>Seguridad y auditoría</strong>: Orientación técnica y respuesta ante incidentes en <a href="/work/te-han-hackeado/">¿Te han hackeado?</a>.</li> <li>📩 <strong>Contacto directo</strong>: Escríbenos a través de nuestro <a href="/contacto/">formulario de contacto</a> o a <code>contacto@proyectoluna.com</code>.</li> </ul> <h2 id="-fuentes-y-lecturas-recomendadas">📚 Fuentes y lecturas recomendadas</h2> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form</a> <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps</a> <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a> <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web">https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web</a>_ forms</li> </ul> <p><img decoding="async" loading="lazy" src="/img/recursos/web-interactividad-javascript-manipulacion-dom/figura-p22-52.png" alt="Diagrama explicativo"></p> </div></div><section class="article-author" aria-label="Autor del artículo"><img src="/img/equipo/matias-gonzalez-cutout.png" alt="Retrato del fundador y director de Luna" width="88" height="88" loading="lazy" decoding="async"><div><p>ESCRITO POR</p><h2>Matías González</h2><span>Fundador y director · IA · Seguridad de la información · OSINT · Desarrollo</span></div><a href="/nosotros/">CONOCER AL AUTOR →</a></section><section class="article-suggestions" aria-labelledby="suggestions-title"><div class="article-suggestions__head"><p>CONTINÚA EXPLORANDO</p><h2 id="suggestions-title">ARTÍCULOS SUGERIDOS</h2></div><div class="article-suggestions__grid"><a href="/recursos/etica-actos-humanos-libertad-dilemas-profesionales-ti/"><img src="/img/recursos/etica-actos-humanos-libertad-dilemas-profesionales-ti/diagrama-p12-fig1.png" alt="Dilema ético en la toma de decisiones tecnológicas e informáticas" width="640" height="360" loading="lazy" decoding="async"><span>Informática</span><h3>Actos Humanos, Libertad y Dilemas Éticos en la Tecnología</h3><p>Análisis de decisiones éticas: actos del hombre vs actos humanos voluntarios, consentimiento, privacidad de datos y dilemas en algoritmos de IA.</p></a><a href="/recursos/etica-dignidad-humana-virtudes-excelencia-profesional/"><img src="/img/recursos/etica-dignidad-humana-virtudes-excelencia-profesional/hero-illustration.jpeg" alt="Representación conceptual de la dignidad de la persona y la ética del trabajo" width="640" height="360" loading="lazy" decoding="async"><span>Informática</span><h3>Dignidad de la Persona, Ética de las Virtudes y Excelencia Profesional</h3><p>La persona como centro de la actividad técnica: dignidad intrínseca, virtudes cardinales y búsqueda de la excelencia en el ejercicio del trabajo.</p></a><a href="/recursos/etica-fundamentos-filosoficos-moral-sociedad/"><img src="/img/recursos/etica-fundamentos-filosoficos-moral-sociedad/hero-illustration.png" alt="Representación simbólica de la balanza de la justicia y la ética" width="640" height="360" loading="lazy" decoding="async"><span>Informática</span><h3>Fundamentos de la Ética: Moral, Leyes y Responsabilidad Social</h3><p>Distinción conceptual entre ética y moral: el origen de las normas de convivencia, relación con el ordenamiento jurídico y responsabilidad ciudadana.</p></a></div><a class="article-suggestions__all" href="/recursos/">VER TODOS LOS RECURSOS →</a></section><footer class="article-related"><p>HABLEMOS DE TU CASO</p><h2>¿Necesitas ayuda? Contáctanos y te contestamos!</h2><a href="/work/">SERVICIOS →</a></footer></article></main><footer data-editor-key="footer" class="reticula grano relative z-10 mt-auto w-full border-t border-borde bg-black text-fg" data-footer data-astro-cid-jo6i4kqk><div class="footer-shell px-x-default" data-astro-cid-jo6i4kqk><div class="footer-main" data-astro-cid-jo6i4kqk><div class="footer-brand" data-astro-cid-jo6i4kqk><img src="/brand/proyecto-luna-new.webp" alt="Proyecto Luna" width="2048" height="684" loading="lazy" data-astro-cid-jo6i4kqk><div class="footer-socials" aria-label="REDES Y CONTACTO" data-astro-cid-jo6i4kqk><a class="red-social" href="https://x.com/ProyectoLuna_" target="_blank" rel="me noopener noreferrer" aria-label="X" title="X" data-astro-cid-jo6i4kqk><svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-jo6i4kqk><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" data-astro-cid-jo6i4kqk></path></svg></a><a class="red-social" href="https://www.facebook.com/profile.php?id=61594154682030" target="_blank" rel="me noopener noreferrer" aria-label="Facebook" title="Facebook" data-astro-cid-jo6i4kqk><svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-jo6i4kqk><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.673 3.667h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" data-astro-cid-jo6i4kqk></path></svg></a><a class="red-social" href="https://www.instagram.com/proyectoluna.exe/" target="_blank" rel="me noopener noreferrer" aria-label="Instagram" title="Instagram" data-astro-cid-jo6i4kqk><svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-jo6i4kqk><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" data-astro-cid-jo6i4kqk></path></svg></a><a class="red-social" href="https://www.youtube.com/@ProyectoLunaOficial" target="_blank" rel="me noopener noreferrer" aria-label="YouTube" title="YouTube" data-astro-cid-jo6i4kqk><svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-jo6i4kqk><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" data-astro-cid-jo6i4kqk></path></svg></a><a class="red-social" href="https://www.linkedin.com/company/proyectoluna/" target="_blank" rel="me noopener noreferrer" aria-label="LinkedIn" title="LinkedIn" data-astro-cid-jo6i4kqk><svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-jo6i4kqk><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 1 1 0-4.124 2.062 2.062 0 0 1 0 4.124ZM7.119 20.452H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z" data-astro-cid-jo6i4kqk></path></svg></a><a class="red-social" href="https://github.com/Proyecto-Luna" target="_blank" rel="me noopener noreferrer" aria-label="GitHub" title="GitHub" data-astro-cid-jo6i4kqk><svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-jo6i4kqk><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" data-astro-cid-jo6i4kqk></path></svg></a><a class="red-social" href="mailto:contacto@proyectoluna.com" aria-label="Correo" title="Correo" data-astro-cid-jo6i4kqk><svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-jo6i4kqk><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z" data-astro-cid-jo6i4kqk></path></svg></a></div></div><nav class="footer-column" aria-label="PÁGINAS" data-astro-cid-jo6i4kqk><p class="mono-sm footer-label" data-astro-cid-jo6i4kqk>PÁGINAS</p><ul data-astro-cid-jo6i4kqk><li data-astro-cid-jo6i4kqk><a href="/" class="enlace-pie" data-astro-cid-jo6i4kqk>INICIO</a></li><li data-astro-cid-jo6i4kqk><a href="/work/" class="enlace-pie" data-astro-cid-jo6i4kqk>SERVICIOS</a></li><li data-astro-cid-jo6i4kqk><a href="/nosotros/" class="enlace-pie" data-astro-cid-jo6i4kqk>NOSOTROS</a></li><li data-astro-cid-jo6i4kqk><a href="/recursos/" class="enlace-pie" data-astro-cid-jo6i4kqk>RECURSOS</a></li><li data-astro-cid-jo6i4kqk><a href="/contacto/" class="enlace-pie" data-astro-cid-jo6i4kqk>CONTACTO</a></li></ul></nav><nav class="footer-column" aria-label="IDIOMA" data-astro-cid-jo6i4kqk><p class="mono-sm footer-label" data-astro-cid-jo6i4kqk>IDIOMA</p><ul data-astro-cid-jo6i4kqk><li data-astro-cid-jo6i4kqk><a href="/" class="enlace-pie" data-astro-cid-jo6i4kqk>ESPAÑOL</a></li><li data-astro-cid-jo6i4kqk><a href="/en/" class="enlace-pie" data-astro-cid-jo6i4kqk>ENGLISH</a></li></ul></nav></div><div class="footer-bottom mono-sm" data-astro-cid-jo6i4kqk><span data-astro-cid-jo6i4kqk>© 2026 PROYECTO LUNA</span><a href="/privacidad/" data-astro-cid-jo6i4kqk>PRIVACIDAD</a></div></div></footer><script type="module">var e=()=>{window.matchMedia(`(max-width: 820px)`).matches&&document.querySelectorAll(`.article-toc[open]`).forEach(e=>e.removeAttribute(`open`))};e(),document.addEventListener(`astro:page-load`,e);</script></div><script type="module" src="/_astro/Base.astro_astro_type_script_index_0_lang.DWkFzWid.js"></script></body></html>