Creación de Páginas Web Dinámicas con JavaScript

Clase 26 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿Cómo transformar páginas estáticas en dinámicas con JavaScript?

En el mundo del desarrollo web, lograr que las páginas sean dinámicas puede marcar una gran diferencia en la experiencia del usuario. JavaScript no solo permite crear y manipular el HTML y CSS para modificar estilos o borrar fragmentos, sino que también ofrece la capacidad de generar nuevo contenido dinámico al momento, reflejando interacciones en tiempo real.

¿Qué herramientas del navegador pueden mejorar nuestras páginas?

Una de las mayores ventajas de hacer web dinámico es sacar provecho de las APIs proporcionadas por los navegadores. Estas interfaces no solo optimizan las páginas dinámicas, sino que las vuelven más robustas y funcionales.

Localización: Podemos solicitar la ubicación del usuario mediante la Geolocation API, ofreciendo contenido contextualizado y relevante basado en la ubicación geográfica.
Animaciones avanzadas de CSS: Las APIs de animación permiten un control detallado de la temporización, la dirección, y la velocidad de las animaciones en CSS, llevando las interacciones visuales a otro nivel.
Otras interacciones: Aprovechar las APIs para generar interacciones modernas como notificaciones, almacenamientos en caché, y más, hace que las aplicaciones sean más alineadas con las expectativas de los usuarios modernos.

¿Qué son y cómo usar componentes en JavaScript?

Los componentes con JavaScript son fragmentos de código encapsulados – que incluyen HTML, CSS y JavaScript – diseñados para ser reutilizables. Esta técnica no solo mejora la eficiencia del desarrollo, sino que también mantiene un código más limpio y organizado.

Ventajas de usar componentes:
- Reutilización: Permite utilizar el mismo componente en diferentes partes de un proyecto, o incluso en proyectos diferentes, ahorrando tiempo y esfuerzo.
- Mantenimiento: Facilita la actualización de un componente desde una sola fuente de verdad, distribuyendo automáticamente los cambios a todas las instancias donde se utiliza.

Prácticas recomendadas para mejorar la dinámica de tus páginas

Planificación del Diseño Interactivo: Antes de implementar las técnicas dinámicas, planifica el flujo de interacción con el usuario, estableciendo qué elementos deben cambiar y en qué condiciones.
Uso Estratégico de APIs: Aprende a identificar qué API podría beneficiar más tu proyecto y cómo integrarlo de manera eficiente en el flujo de trabajo.
Pruebas y Optimización Continua: Al incorporar nuevas funcionalidades, asegura su correcto funcionamiento y el impacto en la experiencia de usuario a través de pruebas continuas. Ajusta y optimiza en base a los resultados obtenidos.
Actualización de Conocimientos: Mantente siempre al día con las nuevas capacidades y mejoras que ofrecen las tecnologías de navegador, participando en cursos continuos y experimentando con nuevas herramientas.

Con estas mejoras, no solo transformarás tu página en un espacio interactivo, sino que también aumentarás su valor agregado, garantizando un impacto positivo en tus visitantes. ¿Listo para sumergirte más en el mundo de las páginas web dinámicas? ¡El aprendizaje no termina aquí!

Calvin Rafael Bobadilla Fernandez

student•

Excelente curso diego! La explicacion estuvo excelente, y el proyecto final tambien.

Antes de concluir, quisiera compartir un proyecto "secreto" que estoy haciendo. Tiene que ver con el to-do pero a una escala mas grande (lo llevo haciendo desde mucho antes del curso, aun falta algunas cosas) El nombre (temporal claro) es un super todo-list, con notas, manejadores de eventos, personalizar tu perfil y todo, pero una imagen vale mas que mil palabras asi que, aca lo enseno!

Calvin Rafael Bobadilla Fernandez

student•

Cualquier sugerencia o info, con gusto pueden decirlo!. Exitos a todos!

Gregory Subero

student•

Calvin, esta genial! Te felicito

Mateo Espinosa Cubillos

student•

faltaron algunos fragmentos del curso, pero estuvo bueno, seria bueno que lo completaran bien

Tomas Arriola

student•

El curso está excelente, solo falta ordenar un poco el repositorio y aclarar algunos fragmentos de código.

Les comparto una alternativa más que me parecio más sencilla: actualizo localStorage con la nueva tarea y luego renderizo la lista completa, asegurando que el almacenamiento y la interfaz estén sincronizados. En contraste, el enfoque del profesor renderiza la tarea primero y luego actualiza localStorage, lo que puede ser más propenso a inconsistencias y generar más código.

const taskForm = document.getElementById("task-form");
const taskList = document.getElementById("task-list");
const taskInput = document.getElementById("task-input");
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
const toggleThemeBtn = document.getElementById("toggle-theme-btn");

// Función para renderizar tareas y asignar eventos
function renderTasks() {
  taskList.innerHTML = ''; // Limpiar la lista de tareas
  tasks.forEach(task => {
    const li = document.createElement('li');
    li.innerHTML = `
      ${task}
      <span class="delete-btn">❌</span>
      <span class="edit-btn">✏️</span>
    `;
    taskList.appendChild(li);

    // Asignar eventos de eliminación
    li.querySelector('.delete-btn').addEventListener('click', function() {
      const taskText = li.childNodes[0].textContent.trim();
      tasks = tasks.filter(t => t !== taskText);
      localStorage.setItem('tasks', JSON.stringify(tasks));
      renderTasks(); // Re-renderizar la lista actualizada
    });

    // Asignar eventos de edición
    li.querySelector('.edit-btn').addEventListener('click', function() {
      const newTask = prompt("Edit your task:", task);
      if (newTask !== null) {
        const index = tasks.indexOf(task);
        tasks[index] = newTask;
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks(); // Re-renderizar la lista actualizada
      }
    });
  });
};
window.addEventListener('load', () => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'dark') {
    document.body.classList.add('dark-theme');
  } else {
    document.body.classList.remove('dark-theme');
  }
});

  // Añade un evento 'click' al botón para alternar la clase 'dark-theme'
  toggleThemeBtn.addEventListener("click", () => {
    // Alterna la clase 'dark-theme' en el <body>
  document.body.classList.toggle("dark-theme");
     // Guarda la preferencia del tema en localStorage
  localStorage.setItem('theme', document.body.classList.contains("dark-theme") ? 'dark' : 'light');
  });

// Añade un evento 'submit' al formulario de tareas
  taskForm.addEventListener("submit", (event) => {
  event.preventDefault(); // Previene que el formulario se envíe y recargue la página
  const task = taskInput.value; // Obtiene el valor del input
  tasks.push(task); // Agrega la nueva tarea a la lista
  localStorage.setItem('tasks', JSON.stringify(tasks)); // Guarda la lista actualizada en localStorage
  taskInput.value = ''; // Limpia el input
  renderTasks(); // Re-renderiza la lista actualizada
});

// Inicializar el renderizado de tareas al cargar la página
  renderTasks();
```Le doy crédito a ChatGpt por los comentarios en mi código.

Antonio Mesa Casares

student•

Bien por realizarlo de otra manera posiblemente más eficaz, pero tiene una falla de seguridad y es que al usar innerHTML te pueden insertar código malicioso el usuario. En otras clases de Javascript lo comentan mucho, en la medida de lo posible no usar innerHTML.

Pero por lo demás genial el haber buscado otra alternativa al funcionamiento.

Muchas gracias por tu aporte

Santiago Salamanca Rusinque

student•

Quede así con el curso, pero tengo que practicar para afianzar estos nuevos conocimientos jaja, suerte a todos con sus estudios.

Luis Escobedo

student•

La verdad es que el diseño fue con chatGPT pero la lógica si fue conforme a este curso y tome las notas que me sirvieron, si les es de ayuda les comparto mis notas

<https://www.notion.so/luishorus/Introducci-n-a-JavaScript-y-el-Navegador-19068b689e7e80b6ab5de2a3218219d5?pvs=4>

jesus manuel vergara arias

student•

Buen curso, muy claro el profe en todo. Hay un solo punto, el orden del repo..... 9/10

Elias Rodas

student•

Intento tomar el examen y me manda al Home de la pagina, no me deja tomarlo :(

Jennifer Yanez Jiménez

student•

Me encanta como quedo el proyecto y me gusto mucho este curso, gracias Diego!

Aqui mi repo de GitHub :) https://github.com/jennyanez/platzi-dom-js-todo

Y fotito de como quedo mi dark mode

Juan Carlos Moncada

student•

Muy Buen Curso, el Profesor domina muy buen la Materia

Kyb3r Cipher

student•

Siento a este curso incompleto el DOM es muy complejo y tiene mas cosas incluso se mencionan en este video. Si es una escuela deberia ser completo y no solo esto. Deberian complementar pero los videos que estan buena explicacion por parte de Diego

Mercy María Ix Ballote

student•

excelente curso, más claro y basico que el que estaba antes