Desarrollo de Software (DDS)
3K1
Año: 2026
Alumno: Callamullo Lucas
Lenguaje que no son lenguajes: HTML5 | CSS3
Se agradece la suscripción (?
YouTube: [Link]
Índice
Índice....................................................................................................................................... 2
HTML - El Esqueleto.............................................................................................................. 3
Semántica en HTML5 (Orden y SEO)................................................................................3
Formularios: La Interacción................................................................................................3
Atributos de HTML5........................................................................................................... 4
CSS - El Estilo........................................................................................................................ 4
Anatomía de una Regla CSS............................................................................................. 4
Tipos de Selectores............................................................................................................5
Especificidad y Cascada (La Jerarquía).............................................................................5
Variables CSS (Propiedades Personalizadas)................................................................... 5
DOM (Document Object Model)............................................................................................ 6
Eventos en JavaScript (Clasificados).................................................................................6
Eventos de mouse........................................................................................................7
Eventos de teclado....................................................................................................... 7
Eventos de formulario.................................................................................................. 7
Eventos de carga y recursos........................................................................................ 8
Eventos de ventana y navegación (útiles para SPA)....................................................8
Eventos de arrastrar y soltar (drag & drop).................................................................. 9
Eventos de medios (audio, video)................................................................................ 9
SPA (Single Page Application)............................................................................................10
SEO en SPA (Importante para teoría)..............................................................................10
Bibliografía............................................................................................................................11
Lista de Vídeos de aplicación práctica:............................................................................ 11
Ejemplos Prácticos de CSS..............................................................................................11
2
HTML - El Esqueleto
HTML no es un lenguaje de programación, es un lenguaje de marcado por
etiquetas. Estructura Básica:
1. <!DOCTYPE html>: Indica al navegador que use HTML5.
2. <html>: El elemento raíz.
3. <head>: Contiene lo que no se ve (título de pestaña, enlaces a CSS, metadatos
como UTF-8).
4. <body>: Contiene todo lo visible (texto, imágenes, videos).
Categoría Etiquetas
Títulos <h1> (más grande) al <h6> (más chico).
Texto <p> (párrafo), <br> (salto línea), <hr> (línea horizontal), <span> (estilo en línea).
Formato <strong> (negrita), <i> (cursiva), <small> (chico), <s> (tachado).
Contenido <a> (enlaces), <img> (imágenes), <ol> (lista numerada), <ul> (lista con viñetas).
Semántica en HTML5 (Orden y SEO)
En lugar de usar solo <div>, HTML5 usa etiquetas que describen su función. Esto
mejora el posicionamiento en Google y la accesibilidad para personas con discapacidad:
● <header>: Encabezado.
● <nav>: Menú de navegación.
● <main>: El contenido
principal y único de la
página.
● <article>: Contenido
independiente (ej: un post).
● <section>: Agrupación
lógica de contenido.
● <aside>: Barra lateral o info
secundaria.
● <footer>: Pie de página.
Formularios: La Interacción
Es la forma en que el usuario envía datos al servidor. Atributos y elementos del <form>:
● action: A qué URL se envían los datos.
● method: Cómo se envían (GET para pedir info, POST para enviar datos sensibles).
● <label>: Texto que describe al campo. Uso de for: Debe coincidir con el id del
<input> para que al hacer clic en el texto, el cursor salte al campo.
● <input>: El campo de entrada. Tipos comunes: text, password, email.
3
● <textarea>: Para textos largos.
● <select> y <option>: Listas desplegables.
● <button>: Para enviar el formulario (type="submit").
(*) También se puede evitar usar for == id (label + input), si ponemos el input dentro del
mismo label, realmente es más por valor de selección y asistencia al usuario en ambos
casos cumple.
Atributos de HTML5
● placeholder: Texto de sugerencia dentro del campo.
● required: Hace que el campo sea obligatorio.
● autofocus: Pone el cursor ahí apenas carga la página.
● id: Identificador único para un elemento.
● class: Identificador para un grupo de elementos (usado en CSS).
CSS - El Estilo
● Función: Es el lenguaje de "capas de
estilo". Sirve para separar el contenido
(HTML) del diseño (CSS).
Anatomía de una Regla CSS
1. Selector: Indica a qué elemento le vamos a
dar estilo (ej: p, .clase, #id).
2. Declaración: Va entre llaves {} y contiene:
○ Propiedad: Lo que queremos cambiar (ej:
color).
○ Valor: El cambio específico (ej: blue).
4
Tipos de Selectores
Selector Ejemplo Se aplica a...
Universal * Absolutamente todos los elementos.
Elemento h1 Todas las etiquetas <h1>.
Clase .rojo Todos los elementos con class="rojo".
ID #logo Al elemento único con id="logo".
Hijo Directo div > p Solo a los <p> que están justo dentro de un div.
Descendiente div p Cualquier <p> que esté dentro de un div, sin importar el nivel.
Pseudo-clase a:hover Al pasar el mouse sobre un enlace.
¿Dónde se escribe el CSS? (Prioridad)
Existen tres lugares, y el orden de importancia (de menor a mayor) es:
1. Archivo Externo (.css): El más profesional. Se vincula con <link> en el <head>.
2. Interno (Etiqueta <style>): Dentro del <head> del HTML.
3. En línea (Atributo style=""): Directamente en la etiqueta (ej: <p
style="color: red">). Este gana siempre sobre los demás.
Especificidad y Cascada (La Jerarquía)
Si dos reglas le dicen cosas distintas al mismo elemento, CSS decide usando estas reglas:
1. Especificidad: Un ID le gana a una Clase, y una Clase le gana a un Elemento.
2. Cascada: Si la especificidad es igual, gana la última regla escrita (la que está más
abajo en el archivo).
3. IMPORTANTE (!important): Es el "botón nuclear". Fuerza a que una regla se
aplique sí o sí, ignorando la especificidad. Uso: Solo en emergencias.
Variables CSS (Propiedades Personalizadas)
Sirven para no repetir valores (como colores) en todo el código.
● Declaración: Se suelen poner en :root (alcance global). Se escriben con dos
guiones: --color-principal: #333;.
● Uso: Se llaman con la función var(). Ejemplo: color:
var(--color-principal);.
<style>
:root {
--bg-color: #f0f0f0;
background-color: var(--bg-color);
}
</style>
5
DOM (Document Object Model)
¿Qué es?
● Es la estructura de árbol que representa
una página HTML
● Permite a JavaScript acceder y modificar
el contenido, estructura y estilo de la
página
Objeto clave: document
● Representa la página actual del
navegador
● Es la puerta de entrada al DOM
<span id="miElemento">
<!-- Aca iría tu texto con .textContent -->
</span>
<script>
// Ejemplo típico
[Link]("miElemento").textContent = "Hola Mundo";
</script>
Eventos en JavaScript (Clasificados)
¿Qué son? Interacciones del usuario (click, mover ratón, escribir, etc.)
Formas de manejar eventos:
1. Captura → evento baja hacia el destino
2. Blanco (target) → llega al elemento
3. Burbujeo (bubbling) → evento sube de vuelta
<script>
// Función genérica para pasar como argumento a los eventos
function miFunction(value) { alert("Hola " + value); }
</script>
<!-- Forma 1: Directo en HTML -->
<div onClick="miFunction('bar')">Click acá</div>
<script>
// Forma 2: Como propiedad del objeto
[Link]("midivision").onclick = miFunction("qsy");
// Forma 3: addEventListener (recomendada)
const btn = [Link]("myBtn");
[Link]("click", miFunction("qsy"), false);
// false = fase de burbujeo, true = fase de captura
</script>
6
Eventos de mouse
Evento Se dispara cuando...
click Se hace clic (presiona y suelta)
dblclick Doble clic
mousedown Se presiona el botón del mouse
mouseup Se suelta el botón del mouse
mouseenter El cursor entra al elemento (no burbujea)
mouseleave El cursor sale del elemento (no burbujea)
mousemove El cursor se mueve sobre el elemento
contextmenu Clic derecho (abre menú contextual)
Ejemplo:
const btn = [Link]("myBtn");
[Link]("click", () => [Link]("Click!"));
Eventos de teclado
Evento Se dispara cuando...
keydown Se presiona una tecla
keyup Se suelta una tecla
keypress Tecla presionada (caracteres) (obsoleto, mejor usar keydown)
Ejemplo:
[Link]("keydown", (e) => [Link]([Link]));
Eventos de formulario
Evento Se dispara cuando...
submit Se envía un formulario
change El valor de un input cambia y pierde foco
input El valor cambia en tiempo real (cada tecla)
focus Un elemento recibe foco
blur Un elemento pierde foco
reset Se resetea un formulario
select Se selecciona texto en un input
7
Ejemplo:
[Link]("input", (e) => [Link]([Link]));
[Link]("submit", (e) => {
[Link](); // Evita recargar la página
[Link]("Formulario enviado");
});
Eventos de carga y recursos
Evento Se dispara cuando...
DOMContentLoaded El HTML se cargó y parseó (no espera CSS/imágenes)
load La página completa (incluyendo imágenes) está cargada
beforeunload Antes de cerrar o salir de la página
unload Al salir de la página (obsoleto, evitar)
error Ocurre un error al cargar un recurso (ej: imagen)
Ejemplo:
[Link]("DOMContentLoaded", () => {
[Link]("DOM listo, puedo manipular elementos");
});
Eventos de ventana y navegación (útiles para SPA)
Evento Se dispara cuando...
hashchange Cambia el #hash de la URL (CRUCIAL para SPA)
popstate Navegación con botones atrás/adelante (con History API)
resize Se redimensiona la ventana
scroll Se hace scroll en la página
online El navegador se conecta a internet
offline El navegador pierde conexión
Ejemplo:
[Link]("hashchange", () => {
[Link]("Nueva vista:", [Link]);
});
8
Eventos de arrastrar y soltar (drag & drop)
Evento Se dispara cuando...
dragstart Empieza a arrastrar
dragend Termina de arrastrar
dragenter Entra a un área válida
dragleave Sale de un área válida
dragover Se mueve sobre un área válida
drop Se suelta el elemento
Eventos de medios (audio, video)
Evento Se dispara cuando...
play Comienza a reproducirse
pause Se pausa
ended Termina
volumechange Cambia el volumen
Ejemplo de varios eventos aplicados:
// Cuando el DOM está listo
[Link]("DOMContentLoaded", () => {
const form = [Link]("miForm");
const input = [Link]("nombre");
// Input en tiempo real
[Link]("input", (e) => {
[Link]("Escribiendo:", [Link]);
});
// Envío de formulario
[Link]("submit", (e) => {
[Link]();
[Link]("Formulario enviado");
});
// Detectar cambio de hash (SPA)
[Link]("hashchange", () => {
[Link]("Hash actual:", [Link]);
});
});
9
SPA (Single Page Application)
¿Qué es?
● Aplicación que carga UNA sola página HTML
● La navegación es rápida y fluida porque no recarga la página
● El contenido se intercambia dinámicamente
Características clave:
Aspecto Descripción
Lenguaje Siempre JavaScript (frontend)
Backend Independiente, solo necesita proveer API con JSON
URLs Pueden cambiar usando hash (#)
Ventaja Frontend y backend se desarrollan por separado
¿Cómo cambian las URLs sin recargar?
● Usando el hash de la URL: [Link]#vista1
● El hash no provoca recarga del navegador
// Acceder al hash
[Link]([Link]); // "#vista1"
// Detectar cambio de hash
[Link]("hashchange", () => {
[Link]("Cambió la URL:", [Link]);
});
SEO en SPA (Importante para teoría)
Problema: Las SPA cargan contenido dinámicamente → los buscadores ven
HTML vacío
Soluciones:
● SSG (Static Site Generators) - Generan HTML estático
● SSR (Server Side Rendering) - Renderizan en el servidor
10
Bibliografía
Lista de Vídeos de aplicación práctica:
🌐Parte 1: Arquitectura, Semántica HTML, Responsive CSS y Eventos del DO…
Otros Videos:
🌐Parte 1: Arquitectura, Semántica HTML, Responsive CSS y Eventos del DOM - DD…
🌐 Parte 3: ORM (Sequelize), API REST (Express), Protocolo HTTP y Arquitectura de …
🌐 Parte 4: CRUD Completo (JS, Express, Sequelize), Testing de APIs y Orquestando…
Ejemplos Prácticos de CSS
Para aprender y revisar códigos recomendado ver ejemplos de:
● Uiverse
● CodePen
●
11