Fundamentos de Desarrollo Web

Bienvenido al curso de Fundamentos de Desarrollo Web. Esta Web es un excelente punto de partida si quieres aprender a desarrollar páginas Web, contiene los temas clave y recursos necesarios para convertirte en desarrollador Front-end, desarrollador de interfaces responsivas para todo tipo de dispositivo con HTML5, CSS3 y JavaScript, en esta Web encontrarás las actividades basadas en el material didáctico de apoyo a la docencia para la asignatura Seminario de desarrollo de aplicaciones web I de la Licenciatura en Informática.

Presentado por: López Arriaga Bueno Ricardo

Asesor: MGTI. Rosas Fonseca Rosalba Nancy

Objetivo del Curso

El objetivo principal de este proyecto es: “formar a los alumnos de informática proporcionando los conocimientos fundamentales de la Web con HTML5, CSS3 y JavaScript en sus estándares actuales.” para lo cual es producir y proveer el material didáctico para la materia Seminario de desarrollo de aplicaciones web I. ayudando a los alumnos de la carrera de informática y entusiastas que deseen aprender los fundamentos de la Web en el uso de las tecnologías y conocimientos necesarios para introducirse al desarrollo web, es decir (HTML5 CSS3 y JavaScript) actualizado hasta su versión ECMAScript 2022. Este material permitirá a los estudiantes adquirir habilidades prácticas y técnicas que son altamente demandadas en el mercado laboral y está orientado a la práctica para que el alumno aplique los conocimientos en proyectos propios, adquiriendo primero los conocimientos teóricos mediante la investigación “Historia y Fundamentos de la Web” y después pasando a los conocimientos prácticos apoyados por contenido audiovisual y multimedia en esta esta Web en la que estas: rickylobu.github.io/fundamentosweb/. Esta página web está disponible mediante GitHub pages, donde los alumnos podrán ver múltiples ejemplos, código de la web en funcionamiento, e inspeccionar toda la página en el navegador. también podrán clonar y modificar si lo desean el código de la página Web terminada en el repositorio de GitHub: https://github.com/rickylobu/fundamentosweb y esta disponible el proyecto comprimido en formato zip para descargarlo y ejecutarlo en su computadora local en etapas de desarrollo, primero con HTML y CSS y el segundo con el código JavaScript, estos proyectos se pueden descargar en: proyecto_HTML_CSS_JS. Con todo esto se pretende que al finalizar el estudio de este material, el lector sea capaz de:

  • Comprender la estructura básica de un documento HTML y cómo utilizar sus etiquetas semánticas.
  • Aplicar estilos a páginas web utilizando CSS3, incluyendo selectores, propiedades, y técnicas de layout como Flexbox y Grid.
  • Dominar los conceptos fundamentales de JavaScript, desde la sintaxis básica hasta la Programación Orientada a Objetos
  • Programación Funcional profundizando en la teoria y en Métodos de orden superior de Arrays
  • Manipular el Document Object Model (DOM) para crear páginas web interactivas orientadas a eventos con addEventListener y propagación de eventos en el DOM.
  • Entender el funcionamiento del asincronismo en JavaScript, incluyendo el funcionamiento del EventLoop, Promesas, Fetch API, y Async/Await. y Top level await.
  • Tener una introducción a los frameworks y librerías de JavaScript más populares.
  • Instalar y configurar un entorno de desarrollo local para la práctica y creación de proyectos web.
  • Hacer Pruebas Unitarias de tu código con Jest y Jasmine con ejemplos variados

Descripción del Plan de Trabajo

El plan de trabajo está estructurado en una serie de clases temáticas, cada una enfocada en un aspecto específico del desarrollo web. A continuación, se detallan los temas a cubrir en cada clase:

Clase 1: Presentación del plan de trabajo

Introducción al curso, objetivos, temario, metodología de trabajo y herramientas a utilizar.

Ver clase en HTML5 →

Clase 2: Instalación de entorno de desarrollo

Guía paso a paso para instalar y configurar las herramientas necesarias para el desarrollo web, como editores de código (e.g., Visual Studio Code), navegadores web con herramientas de desarrollo, y Node.js (opcional para ciertas etapas).

Ver clase en HTML5 →

Clase 3: HTML

Introducción a HTML5: estructura básica de un documento, etiquetas principales (headings, párrafos, listas, enlaces, imágenes, tablas, formularios), semántica HTML, y buenas prácticas.

Ver más sobre HTML5 →

Clase 4: CSS

Introducción a CSS3: selectores, propiedades, modelo de caja, unidades de medida, colores, tipografía, fondos. Introducción a layouts con Flexbox y CSS Grid. Diseño Responsivo.

Ver más sobre CSS3 →

Clase 5: JavaScript 1 (Parte 1/2) - Sintaxis Básica y Funciones

Introducción a JavaScript: qué es, dónde se ejecuta. Variables, tipos de datos, operadores, estructuras de control (condicionales, bucles). Funciones: declaración, expresión, arrow functions, scope.

Ver más sobre Sintaxis JS →

Clase 6: JavaScript 1 (Parte 2/2) - Funciones hasta POO

Continuación con funciones avanzadas, closures. Introducción a la Programación Orientada a Objetos (POO) en JavaScript: objetos literales, constructores, prototipos, clases (ES6).

Ver más sobre POO en JS →

Clase 7: JavaScript 2 - Arrays, Programación Funcional y Métodos de orden Superior de Arrays

Trabajo con Arrays: métodos (push, pop, shift, unshift, slice, splice, etc.). Métodos de orden superior: forEach, map, filter, reduce, find, some, every. Introducción a la programación funcional.

Ver más sobre Arrays y P. Funcional →

Clase 8: JavaScript 3 (Parte 1/2) - Manipulación del DOM

El Document Object Model (DOM): qué es, cómo acceder y seleccionar elementos (getElementById, getElementsByClassName, querySelector, etc.). Modificar elementos: contenido (innerHTML, textContent), atributos, estilos.

Ver más sobre Manipulación del DOM →

Clase 9: JavaScript 3 (Parte 2/2) - addEventListener

Manejo de addEventListener en JavaScript: añadir a elementos del DOM, tipos de eventos (click, mouseover, keydown, submit, etc.). Objeto event. Propagación de eventos (bubbling y capturing).

Ver más sobre addEventListener en JS →

Clase 10: JavaScript 4 (Parte 1/2) - Asincronismo, XMLHttpRequest y más

Introducción al asincronismo en JavaScript: Callbacks, Callback Hell. Objeto XMLHttpRequest para peticiones AJAX (uso histórico y conceptual).

Ver más sobre Asincronismo y XHR →

Clase 11: JavaScript 4 (Parte 2/2) - Asincronismo actual: Promesas, fetch, async/await y Top level Await

Asincronismo moderno: Promesas (resolve, reject, .then(), .catch(), .finally()). API Fetch para peticiones HTTP. Funciones Async/Await para simplificar el código asíncrono. Top level Await.

Ver más sobre Promesas, Fetch y Async/Await →

Clase 12: JavaScript 5 - Testing

Instalación de NodeJS, Conceptos Básicos de testing y tipos de pruebas, Pruebas Unitarias en JavaScript y Ejemplos con Jest y Jasmine

Ver más sobre Frameworks JS →

Acrónimos (Glosario)

  • HTML: HyperText Markup Language (Lenguaje de Marcado de Hipertexto)
  • CSS: Cascading Style Sheets (Hojas de Estilo en Cascada)
  • JS: JavaScript
  • DOM: Document Object Model (Modelo de Objetos del Documento)
  • API: Application Programming Interface (Interfaz de Programación de Aplicaciones)
  • AJAX: Asynchronous JavaScript and XML (JavaScript Asíncrono y XML)
  • XHR: XMLHttpRequest
  • JSON: JavaScript Object Notation (Notación de Objetos de JavaScript)
  • NPM: Node Package Manager (Gestor de Paquetes de Node)
  • POO: Programación Orientada a Objetos

Referencias Bibliográficas y Videográficas

Las siguientes referencias y recursos fueron utilizados y/o se recomiendan para profundizar en los temas tratados.

  • CSS | MDN. (2024, diciembre 17). developer.mozilla.org/es/docs/Web/CSS
  • HTML: Lenguaje de etiquetas de hipertexto | MDN. (2025, abril 11). developer.mozilla.org/es/docs/Web/HTML
  • JavaScript | MDN. (2024, diciembre 17). developer.mozilla.org/es/docs/Web/JavaScript
  • López Arriaga B., R. (s/f). (3731) Fundamentos de Desarrollo de Aplicaciones Web — YouTube. Recuperado el 12 de mayo de 2025, de youtube.com/7
  • López Arriaga B., R. (2024, noviembre 16). Fundamentos de desarrollo Web [Presentación Prezi]. prezi.com/view/xksLzNDYikKy9EDGgCtk/
  • López Arriaga B., R. (2025a). Historia y fundamentos de la Web.pdf. Google Docs. Ver Documento
  • López Arriaga B., R. (2025b, mayo 12). Fundamentosweb [Educación]. Fundamentos de desarrollo Web. rickylobu.github.io/fundamentosweb/
  • poyecto_HTML_CSS_JS. (s/f). Google Drive. Recuperado el 12 de mayo de 2025, de Ver Carpeta
  • Ricardo López Arriaga Bueno (Director). (2024a, noviembre 16). Curso de Fundamentos de Desarrollo Web. Clase 1 Presentación del material didáctico [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2024b, noviembre 19). Clase 2 Instalación IDE VScode y 1er ejemplo [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2024c, noviembre 29). Clase 3 HTML 5 [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2024d, diciembre 6). Clase 4 CSS3 [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2025a, abril 16). Clase 5 JavaScript 1 parte 1/2 Sintaxis Básica y Funciones [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2025b, abril 17). Clase 6 JavaScript 1 parte 2/2 Funciones hasta POO [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2025c, abril 17). Clase 7 JavaScript 2 Arrays, P. Funcional y Métodos de orden Superior de Arrays [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2025d, abril 17). Clase 8 JavaScript 3 parte 1/2 Manipulacion del DOM [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2025e, abril 17). Clase 9 JavaScript 3 parte 2/2 addEventListener [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2025f, abril 18). Clase 10 JavaScript 4 parte 1/2 Asincronismo, XMLHttpRequest y más [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2025g, abril 18). Clase 11 JavaScript 4 parte 2/2 Asincronismo actual: Promesas, fetch, async/await y Top level Await [Video recording]. Ver Video
  • Ricardo López Arriaga Bueno (Director). (2025h, mayo 1). Clase 12 JavaScript 5 Pruebas Unitarias [Video recording]. Ver Video
  • rickylobu. (2025). Rickylobu/fundamentosweb [HTML]. github.com/rickylobu/fundamentosweb (Obra original publicada en 2025)
  • Seminario_de_desarrollo_de_aplicaciones_web_uno.pdf. (s/f). Recuperado el 12 de mayo de 2025, de Ver PDF