DATW - Front-End

MAIN-Menú

🎨 Principios de Diseño de Aplicaciones Web

El diseño web efectivo combina estética y funcionalidad para crear experiencias de usuario atractivas e intuitivas. Estos principios fundamentales guían la creación de sitios web profesionales y accesibles.

📌 1. Jerarquía Visual

La jerarquía visual organiza los elementos para guiar al usuario a través del contenido de manera intuitiva.

Técnicas para establecer jerarquía:

🎯 2. Principio de Proximidad

Los elementos relacionados deben agruparse visualmente, mientras que los no relacionados deben separarse.

🌈 3. Teoría del Color

La selección de colores afecta la percepción, usabilidad y accesibilidad de un sitio web.

Contraste de color:

Este texto tiene buen contraste (fondo oscuro, texto claro)

Este texto tiene bajo contraste (dificil de leer)

✏️ 4. Tipografía

La elección tipográfica impacta la legibilidad y la personalidad del diseño.

Buenas prácticas tipográficas:

📱 5. Diseño Responsivo

Los sitios web deben adaptarse a diferentes tamaños de pantalla y dispositivos.

Técnicas responsivas:

/* Media queries para diferentes tamaños */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: 15px;
    }
    
    .menu {
        flex-direction: column;
    }
}

/* Unidades relativas */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Imágenes flexibles */
img {
    max-width: 100%;
    height: auto;
}

📂 Enlaces a Recursos

Profundiza en estos temas de diseño web:

🏷 Principios de Diseño Web
inicio

🌍 Introducción a HTML

HTML (**HyperText Markup Language**) es el lenguaje fundamental para la construcción de páginas web. Permite estructurar el contenido mediante etiquetas y elementos.

📌 ¿Qué es HTML?

HTML es un lenguaje de marcado utilizado para estructurar el contenido en la web. Se basa en etiquetas que indican cómo deben mostrarse los elementos en un navegador.

📜 **Estructura Básica de un Documento HTML**

Un archivo HTML típico tiene la siguiente estructura:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Título de la Página</title>
</head>
<body>
    <h1>Encabezado Principal</h1>
    <p>Este es un párrafo de ejemplo.</p>
</body>
</html>

📌 Principales Elementos HTML

📂 Enlaces a Recursos

Accede a los siguientes apartados para profundizar más en HTML:

🏷 Elementos HTML 📑 Estructura HTML

© 2024 - Curso de HTML Básico | Diseñado para el aprendizaje interactivo

inicio

🎨 Introducción a CSS

CSS (Cascading Style Sheets) es el lenguaje de estilos utilizado para describir la presentación de documentos HTML. Controla el diseño, colores, fuentes y otros aspectos visuales de una página web.

📌 ¿Qué es CSS?

CSS es un lenguaje de hojas de estilo que permite separar el contenido (HTML) de su presentación visual. Con CSS puedes controlar el diseño de múltiples páginas web a la vez.

📜 Sintaxis Básica de CSS

La sintaxis CSS consta de un selector y un bloque de declaración:

selector {
    propiedad: valor;
    propiedad: valor;
}

📌 Formas de Aplicar CSS

🎯 Selectores CSS

Los selectores determinan a qué elementos HTML se aplicarán los estilos:

Ejemplo Interactivo:

Este texto cambia al pasar el mouse.

El código CSS utilizado:

.texto-ejemplo:hover {
    color: #dc3545;
    transform: scale(1.1);
}

📦 Modelo de Caja

Todos los elementos HTML son considerados "cajas" con las siguientes propiedades:

📂 Enlaces a Recursos

Accede a los siguientes apartados para profundizar más en CSS:

🏷 Basics 1 📑 Basics 2 🏷 Modelo Cajas 📑 Unidades 📑 Pseudoselectores

© 2024 - Curso de HTML Básico | Diseñado para el aprendizaje interactivo

inicio

🖥️ Interfaces de Aplicaciones Web

Las interfaces de usuario (UI) en aplicaciones web son el punto de interacción entre los usuarios y el sistema. Una buena interfaz debe ser intuitiva, accesible y proporcionar una experiencia de usuario (UX) satisfactoria.

🏗️ Estructura Básica de una Interfaz Web

Las interfaces web modernas suelen seguir este patrón estructural completo:

Componentes principales de la estructura:

  1. Cabecera (Header): Contiene el logo, navegación principal y accesos rápidos
  2. Barra Lateral (Sidebar - opcional): Navegación secundaria o menú de opciones
  3. Área de Contenido Principal: Donde se muestra la información central de la aplicación
  4. Pie de Página (Footer): Información adicional, enlaces legales y contacto

🎨 Componentes UI Esenciales

1. Botones

Los botones son elementos fundamentales para la interacción del usuario. Deben ser claramente identificables y proporcionar feedback visual al interactuar con ellos.

<!-- Botón estándar -->
<button class="btn">Primario</button>

<!-- Botón secundario -->
<button class="btn btn-danger">Secundario</button>

<!-- Botón desactivado -->
<button class="btn" disabled>Desactivado</button>

<!-- Botón outline -->
<button class="btn btn-outline">Outline</button>

Buenas prácticas:

2. Formularios

Los formularios permiten la entrada de datos por parte del usuario. Deben ser intuitivos y validar la información adecuadamente.

<form>
    <div>
        <label for="nombre">Nombre completo</label>
        <input type="text" id="nombre" placeholder="Ingrese su nombre">
    </div>
    
    <div>
        <label for="email">Correo electrónico</label>
        <input type="email" id="email" placeholder="ejemplo@dominio.com">
    </div>
    
    <button type="submit">Enviar formulario</button>
</form>

Mejores prácticas:

  • Agrupar campos relacionados
  • Usar etiquetas descriptivas
  • Validación en tiempo real
  • Mensajes de error claros

3. Tarjetas (Cards)

Las tarjetas son contenedores versátiles para agrupar información relacionada.

Ejemplo

Producto Ejemplo

Descripción breve del producto o servicio ofrecido.

Notificación

Este es un mensaje importante para el usuario.

<!-- Tarjeta de producto -->
<div class="card">
    <img src="imagen.jpg" alt="Producto">
    <div class="card-body">
        <h4>Producto Ejemplo</h4>
        <p>Descripción del producto</p>
        <button>Ver detalles</button>
    </div>
</div>

<!-- Tarjeta de notificación -->
<div class="card">
    <div class="card-header">
        <h4>Notificación</h4>
    </div>
    <div class="card-footer">
        <button>Aceptar</button>
    </div>
</div>

Consideraciones:

  • Mantener consistencia en el diseño
  • Espaciado adecuado entre elementos
  • Jerarquía visual clara
  • Efectos hover sutiles para interacción

📂 Ejemplos

Accede a los siguientes apartados para ver algunos ejemplos:

🎯 interfaz-1 📦 interfaz-2 📐 interfaz-3 📦 interfaz-4

© 2024 - Curso de Interfaces Web | Diseñado para el aprendizaje interactivo

inicio

⚡ Introducción a JavaScript

JavaScript es el lenguaje de programación que permite agregar interactividad a las páginas web. Es un lenguaje interpretado, orientado a objetos y multiplataforma.

📌 ¿Qué es JavaScript?

JavaScript es un lenguaje de programación que se ejecuta en el navegador del cliente y permite crear páginas web dinámicas e interactivas. A diferencia de HTML (estructura) y CSS (estilo), JavaScript proporciona comportamiento a la web.

📜 Sintaxis Básica

La estructura básica de JavaScript incluye variables, operadores, estructuras de control y funciones:

// Variables
let nombre = "Juan";
const edad = 30;

// Función
function saludar() {
    return "Hola " + nombre;
}

// Condicional
if (edad >= 18) {
    console.log("Mayor de edad");
} else {
    console.log("Menor de edad");
}

📌 Conceptos Fundamentales

Ejemplo Interactivo

Prueba este código JavaScript que calcula el cuadrado de un número:

function calcularCuadrado() {
    const numero = prompt("Ingrese un número:");
    const resultado = numero * numero;
    document.getElementById("demo-output").innerHTML = 
        `El cuadrado de ${numero} es ${resultado}`;
}


Aquí aparecerá el resultado...

📦 Manipulación del DOM

El DOM (Document Object Model) permite acceder y modificar elementos HTML:

// Seleccionar elemento
const titulo = document.getElementById("miTitulo");

// Cambiar contenido
titulo.innerHTML = "Nuevo título";

// Cambiar estilo
titulo.style.color = "red";

// Escuchar eventos
titulo.addEventListener("click", function() {
    alert("Hiciste clic en el título!");
});

🔄 Eventos Comunes

📂 Enlaces a Recursos

Explora más sobre JavaScript con estos recursos:

📌 Diagramas de Flujo 🖼 Conceptos base en JS 🔄 Ejemplos Prácticos JS
inicio

🚀 Introducción a TypeScript

TypeScript es un superset de JavaScript que añade tipado estático y otras características avanzadas. Desarrollado por Microsoft, ayuda a escribir código más robusto y mantenible.

📌 Características Generales

TypeScript ofrece varias ventajas sobre JavaScript:

💡 Beneficios de TypeScript

TypeScript mejora significativamente la experiencia de desarrollo:

📜 Ejemplos Básicos

Comparación entre JavaScript y TypeScript:

JavaScript

function sum(a, b) {
    return a + b;
}

console.log(sum(2, 3)); // 5
console.log(sum("2", "3")); // "23" (no es lo esperado)

TypeScript

function sum(a: number, b: number): number {
    return a + b;
}

console.log(sum(2, 3)); // 5
console.log(sum("2", "3")); // Error en tiempo de compilación

Otros ejemplos de características de TypeScript:

// Interfaces
interface User {
    id: number;
    name: string;
    email: string;
    age?: number; // Propiedad opcional
}

// Uso de la interfaz
function printUser(user: User) {
    console.log(`Usuario: ${user.name}, Email: ${user.email}`);
}

// Clases con tipos
class Product {
    constructor(
        public id: number,
        public name: string,
        public price: number
    ) {}

    getFormattedPrice(): string {
        return `$${this.price.toFixed(2)}`;
    }
}

⚙️ Configuración Básica

Para empezar con TypeScript:

  1. Instalar TypeScript globalmente: npm install -g typescript
  2. Crear un archivo de configuración: tsc --init
  3. Escribir código en archivos .ts
  4. Compilar a JavaScript: tsc

Ejemplo de tsconfig.json básico:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

📂 Explora Más sobre TypeScript

Accede a los diferentes bloques de contenido para profundizar:

📊 Contenidos
inicio

🖥️ JavaScript y Manipulación del DOM

El Document Object Model (DOM) es una representación estructurada del documento HTML que permite a JavaScript acceder y modificar dinámicamente el contenido, estructura y estilo de una página web.

📌 ¿Qué es el DOM?

El DOM es una interfaz de programación que representa los documentos HTML como una estructura de árbol donde cada nodo es un objeto que representa parte del documento. JavaScript puede interactuar con estos objetos para:

Estructura del DOM

<!DOCTYPE html>
<html>
  <head>
    <title>Mi Página</title>
  </head>
  <body>
    <h1 id="titulo">Hola Mundo</h1>
    <div class="contenedor">
      <p>Este es un párrafo</p>
    </div>
  </body>
</html>

En este ejemplo, el DOM crea una estructura de árbol con nodos para cada elemento HTML.

🔍 Selección de Elementos

JavaScript ofrece varios métodos para seleccionar elementos del DOM:

Métodos de Selección

// Por ID
const elemento = document.getElementById('miId');

// Por selector CSS (primer elemento que coincida)
const elemento = document.querySelector('.miClase');

// Por selector CSS (todos los elementos)
const elementos = document.querySelectorAll('p');

// Por nombre de etiqueta
const elementos = document.getElementsByTagName('div');

// Por clase
const elementos = document.getElementsByClassName('mi-clase');

Prueba de selección:

Este es el párrafo 1

Este es el párrafo 2

✏️ Modificación del DOM

Una vez seleccionados los elementos, podemos modificarlos de diversas formas:

Manipulación de Contenido

// Cambiar contenido HTML
elemento.innerHTML = '<strong>Nuevo contenido</strong>';

// Cambiar texto (más seguro contra XSS)
elemento.textContent = 'Nuevo texto';

// Cambiar atributos
elemento.setAttribute('src', 'nueva-imagen.jpg');

// Cambiar estilos
elemento.style.color = 'red';
elemento.style.fontSize = '20px';

// Agregar/remover clases
elemento.classList.add('nueva-clase');
elemento.classList.remove('clase-existente');
elemento.classList.toggle('clase-activa');

Área de demostración:

Este contenido será modificado...


➕ Creación y Eliminación de Elementos

Podemos crear nuevos elementos y agregarlos al DOM, o eliminar elementos existentes:

Manipulación Estructural

// Crear nuevo elemento
const nuevoElemento = document.createElement('div');
nuevoElemento.textContent = 'Soy nuevo aquí!';

// Agregar al final de un elemento padre
padre.appendChild(nuevoElemento);

// Agregar en una posición específica
padre.insertBefore(nuevoElemento, elementoReferencia);

// Clonar elemento
const copia = elementoExistente.cloneNode(true);

// Eliminar elemento
elemento.remove();
// O alternativamente
padre.removeChild(elemento);

Lista dinámica:



  • Elemento inicial 1
  • Elemento inicial 2

📂 Enlaces a Recursos

Profundiza en estos temas relacionados con la manipulación del DOM:

📌 Conceptos básicos 🖼 Praxis 1 🔄 Praxis 2 inicio