Programación Web
Introducción al curso
“Bienvenidos al curso de Programación
Web. Estoy seguro de que juntos lograremos
desarrollar habilidades esenciales en el
desarrollo de aplicaciones web.”
Información del Docente
• Nombre: Prof. Marco Antonio Cabrera Rufino.
• Correo Electrónico: epad_instructor19@[Link].
• Horario de Clases: Lunes, Miércoles y Viernes de 8:00 a 10:00 am.
• Horario de Consulta: (El docente lo agregará).
2
Conociéndonos
Por favor digan:
• Nombre completo.
• ¿Qué les gusta de su carrera?
• Algún gusto o pasatiempo.
3
Presentación del Curso
La programación web es el proceso de crear sitios web o
aplicaciones web usando lenguajes de programación. El objetivo es
que los sitios sean funcionales, interactivos y dinámicos.
La programación web implica: Crear códigos fuente, estructurar
páginas, crear archivos multimedia, utilizar tecnologías del lado del
servidor y del cliente y trabajar con bases de datos.
4
Presentación del Curso
• Objetivos:
• Desarrollo WEB competitivo y de calidad.
• Adquirir habilidades para crear aplicaciones
web modernas.
• Aplicación práctica con un proyecto
integrador.
• Pre-requisitos:
• Programación Orientada a Objetos.
• Taller de Bases de Datos.
• Taller de Ingeniería de Software.
5
Organización del Curso
1. Introducción a las aplicaciones web.
2. Lenguajes de marcado y presentación: HTML, XML y CSS.
3. Programación del lado del cliente (JavaScript y frameworks).
4. Programación del lado del servidor.
5. Cómputo en la nube y patrones de diseño.
6
Criterios de Evaluación
Evaluación Total: 100%.
• Proyectos prácticos: 50%.
• Cuestionarios en cada clase: 30%.
• Participación y tareas: 20%.
7
Dinámica del Curso
• Metodología:
• Clases teóricas combinadas con
ejercicios prácticos.
• Uso de entornos y herramientas reales.
• Seguimiento de un proyecto integrador.
• Dinámica:
• Presentaciones y resolución de
problemas.
• Desarrollo progresivo de habilidades.
8
Materiales del curso
VsCode.
[Link]
Documentación
[Link]
[Link]
Compilador Online
[Link]
Notion
[Link] 9
Breve Historia de la Programación Web
1989: Tim Berners-Lee crea 1990: Desarrollo del
el concepto de la World primer navegador web y
Wide Web mientras trabaja del protocolo HTTP
en el CERN.
1991 El primer
lenguaje de
marcado para crear 1996 Introducción de hojas 1995 Lenguaje del lado del
páginas [Link] de estilo en cascada para cliente para interactividad
mejorar la presentación básica JavaScript.
10
CSS.
Frameworks de los años 2000
Ruby on Rails:
• Es un framework de desarrollo web basado
en el lenguaje Ruby.
• Permitió crear aplicaciones web
rápidamente gracias a herramientas
preconfiguradas.
[Link]:
• Framework desarrollado por Microsoft para
construir aplicaciones web dinámicas.
• Utiliza lenguajes como C# y [Link].
• Ofreció soporte para aplicaciones robustas
en plataformas Windows.
11
Frameworks de los años 2010
Angular:
• Framework creado por Google para construir aplicaciones web
interactivas del lado del cliente.
• Popular por el desarrollo de Single Page Applications (SPA), donde
las páginas no necesitan recargarse completamente.
React:
• Librería desarrollada por Facebook, enfocada en crear interfaces de
usuario (UI).
Servicios en la Nube:
• Herramientas como Amazon Web Services (AWS), Google Cloud, y
Microsoft Azure.
• Permitieron el almacenamiento de datos y el despliegue de
aplicaciones sin necesidad de mantener infraestructura física.
12
Tecnologías Actuales (2020 en
adelante)
Desarrollo Full-Stack:
• Los desarrolladores full-stack son capaces de
trabajar en el frontend (lo que ve el usuario) y en el
backend (la lógica del servidor y base de datos).
• Usa tecnologías como [Link], React, y bases de
datos como MongoDB o PostgreSQL.
13
Arquitectura de las Aplicaciones Web
¿Qué es la arquitectura web?
• Estructura organizativa de componentes y tecnologías utilizadas en el
desarrollo y despliegue de aplicaciones web.
• Ejemplo: Cliente (navegador), Servidor (procesamiento), y Base de Datos
(almacenamiento).
14
Arquitectura de las Aplicaciones Web
Componentes Principales:
Cliente:
• Navegador web que solicita información (ejemplo: Chrome, Firefox).
• Lenguajes: HTML, CSS, JavaScript.
Servidor:
• Procesa las solicitudes del cliente.
• Lenguajes: PHP, Python (Django, Flask), [Link].
Base de Datos:
• Almacena y organiza los datos.
• Ejemplos: MySQL, MongoDB.
15
Planificación de Aplicaciones y su
importancia
• Evita errores futuros.
• Permite crear un cronograma y definir los recursos
necesarios.
• Mejora la colaboración en equipo.
16
Fases de la Planificación: Análisis de
Requisitos
¿Qué problema resolverá la aplicación?
¿Quiénes serán los usuarios finales?
17
Fases de la Planificación: Definición del
Alcance
• Características esenciales de
la aplicación.
• Ejemplo: Un sistema de
registro con login y búsqueda
de usuarios.
18
Fases de la Planificación: Diseño Inicial
• Bocetos o wireframes para
visualizar cómo lucirá la
interfaz.
• Herramientas útiles: Figma,
Adobe XD.
19
Fases de la Planificación: Elección de
Tecnologías
• Frontend: HTML, CSS,
JavaScript.
• Backend: [Link], PHP,
Django.
• Base de Datos: MySQL,
MongoDB.
20
Fases de la Planificación: Definición del
Cronograma
• Dividir el proyecto en tareas
pequeñas con fechas claras.
21
Actividad
Formen grupos pequeños y planifiquen una aplicación básica:
Tema libre (por ejemplo, una tienda en línea o sistema de
calificaciones).
Entregables:
• Esquema de funcionalidad (¿qué hará la app?).
• Boceto simple de la interfaz.
• Elección de tecnologías.
22
Fin de la introducción al curso
Gracias
23
