Diseño Web - Front-End

🎨 Principios Básicos de Diseño 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:

  • Tamaño: Los elementos más importantes son más grandes
  • Color: Usar colores contrastantes para elementos clave
  • Espaciado: Agrupar elementos relacionados
  • Tipografía: Variar pesos y estilos de fuente

🎯 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:

  • Limitar a 2-3 fuentes por proyecto
  • Usar fuentes sans-serif para texto en pantalla
  • Establecer una escala tipográfica consistente
  • Mantener un line-height adecuado (1.5-1.8)

📱 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
↑ Volver arriba

🌍 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

↑ Volver arriba

🎨 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;
}

Ejemplo:


            
Este código aplicaría color azul, tamaño de 24px y alineación centrada a todos los elementos <h1>.

        


        
📌 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

    
        

  
  
  ↑ Volver arriba
  







  

            
🖥️ 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:


 

    
    

        

            
myWeb.es

            
La más mejor

        

        
    


    
    

    
    

        
        

        
        

            

                
Título de la Sección

                

                    
Título del Artículo

                    
Contenido del artículo. Aquí puedes escribir cualquier información relevante sobre el tema que desees.

                

                

                    
Título del Artículo 2

                    
Más contenido del artículo. Añade más información o detalles aquí.

                

            

        

    


    
    

        
© 2024 Nombre de la Página. Todos los derechos reservados.

    


        




        
Componentes principales de la estructura:

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


        

🎨 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:

    
    
        
  • Usar colores consistentes para acciones similares
    • 
        
  • Proporcionar suficiente contraste
    • 
        
  • Incluir estados hover, active y focus
    • 
        
  • Mantener un tamaño mínimo de 44x44px para tactilidad
    • 
    






    
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
            📐 interfaz-5
        

    

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

    
        

  
  
  ↑ Volver arriba
  







  

            
⚡ 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

        


  
  
  ↑ Volver arriba
  







  

            
🚀 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. 
            
  2. Crear un archivo de configuración: tsc --init
    3. 
            
  3. Escribir código en archivos .ts
    4. 
            
  4. Compilar a JavaScript: tsc
    5. 
        


        
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
        


  
  
  ↑ Volver arriba
  







  

            
🖥️ 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 

  
  
  

  ↑ Volver arriba