Introducción a la Programación Web
Primeros pasos en desarrollo web: HTML, CSS y JavaScript.
¿Ya decidiste empezar?
❓ ¿Qué es esta materia?
Primeros pasos en desarrollo web: HTML, CSS y JavaScript.
La programación web es el proceso de diseñar, crear y mantener aplicaciones o sitios web que se ejecutan a través de internet. Con el avance de la tecnología, la web se ha convertido en una plataforma central para interactuar con la información, realizar transacciones comerciales y disfrutar de diversos servicios en línea. En este contexto, la programación web ha ganado una relevancia fundamental en la formación de profesionales de las ciencias de la computación y áreas relacionadas.
¿Qué vas a aprender?
- Cómo funciona la web por dentro, entender qué es el desarrollo web, cómo se construyen los sitios y cómo interactúan los navegadores con el código.
- A crear páginas web desde cero con HTML, estructurar contenido usando etiquetas como div, p, img, form, nav, section, etc. y dar sentido semántico al diseño.
- A diseñar y dar estilo con CSS, modificar colores, tipografías, márgenes, espaciado, bordes, etc. y a aplicar estilos a cualquier parte de la página usando clases e identificadores ID.
- A lograr que el diseño se vea bien en todas las pantallas, uso de CSS responsivo con media queries, unidades flexibles (em, rem, vw, vh) y técnicas modernas para adaptar diseños a celulares, tablets y PC.
- A dar comportamiento a tus páginas con JavaScript, escribir código scripting que responde a acciones del usuario como clicks o movimientos del mouse que pueden modificar dinámicamente el contenido de una página.
- A manipular el contenido HTML con JavaScript, acceder, modificar, crear o eliminar elementos de la página usando el DOM (Document Object Model).
- A reutilizar código con funciones y objetos, escribir funciones personalizadas, usar funciones flecha y agrupar datos y comportamientos en objetos JavaScript simples.
- A conectar tu web con servicios externos (APIs), usar AJAX y fetch() para pedir datos a servidores externos y procesar respuestas en JSON, como cuando buscás información del clima, noticias, etc.
- A usar herramientas reales de desarrollo como Visual Studio Code, inspeccionar elementos con la consola del navegador y depurar errores básicos.
- A pensar como web developer y utilizar el pensamiento lógico y técnico para avanzar hacia frameworks, back-end e incluso desarrollos full stack.
Módulos
Introducción a la Programación Web
Qué es el desarrollo web? Estructura básica de una página web. Diferencia entre front-end y back-end. Introducción a los navegadores web intérpretes. Herramientas de desarrollo (editor de código, navegadores, consola de desarrollo). Ejercicios.
Estructura de una Página Web con HTML5
Estructura básica de un documento HTML. Elementos: etiquetas html, head, body, h1-h6, p, a, ul, ol, li, img, form, etc. Atributos: href, src, alt, id, class, name, etc. Nuevas etiquetas: article, section, header, footer, nav, main. Ejercicios.
Estilización de Páginas Web con CSS3
Qué es CSS y cómo funciona? Sintaxis: selectores, propiedades y valores. Selección de elementos: por etiquetas, clases e ID. Propiedades básicas: color, background, font, margin, padding, border. Diseño: el modelo de caja (box model). Flexbox y Grid.
Diseño Responsivo con CSS3
Qué es un diseño responsivo? Media Queries: que el diseño se ajuste a diferentes tamaños de pantalla (móviles, tabletas, escritorios). Unidades relativas: em, rem, vw, vh. Técnicas para imágenes fluidas y fuentes escalables. Ejercicios.
Introducción a JavaScript
Qué es y cómo se usa en el desarrollo web? Sintaxis básica: variables, operadores, y tipos de datos. Estructuras: if, else, switch, bucles for, while. DOM (Document Object Model) con JavaScript. Eventos: onclick, onmouseover, onload. Ejercicios.
Manipulación del DOM con JavaScript
Qué es y cómo se representa? Métodos para acceder a los elementos del DOM: getElementById, querySelector, getElementsByClassName. Modificar el contenido y los atributos de los elementos del DOM. Crear, eliminar y modificar elementos HTML. Ejercicios.
Funciones y Objetos en JavaScript
Definición y llamada a funciones en JavaScript. Parámetros y valores de retorno en funciones. Funciones anónimas y funciones de flecha (arrow functions). Objetos en JavaScript: qué son y cómo se crean. Propiedades y métodos de objetos. Ejercicios.
Introducción a AJAX y API REST
Qué es AJAX y cómo funciona? Realizar solicitudes HTTP con XMLHttpRequest y fetch. Introducción a las APIs REST: cómo obtener y enviar datos usando GET y POST. Parseo de respuestas JSON. Ejercicios.
Trabajos Prácticos
Trabajo Final Obligatorio
El alumno deberá realizar dos páginas, una de su elección donde deberá ejecutarla y explicar qué es lo que hace. La otra será solicitada por el instructor a cargo. Se extenderá el certificado de aprobación si se aprueban el examen y ambos trabajos.
Exámenes y Recuperatorios
Evaluaciones programadas
- Examen Parcial: se toma al alcanzar el 50% del curso.
- Examen Final: al finalizar el contenido completo.
Recuperatorios: cada examen cuenta con una instancia adicional en caso de que necesites repetirlo. Quiero que tengas tu oportunidad real de demostrar lo aprendido.
Extra life
Domingo, Talleres de Práctica
El docente a cargo propone talleres virtuales los días domingos a los fines de repasar temas, evacuar dudas, adelantar trabajos prácticos y realizar las prácticas con la mentoría apropiada.
Sí, sí, leíste bien... domingos por la mañana de 9 a 13 o por la tarde de 14 a 18.🙂
¿Ya decidiste empezar?
Detalles de la materia
-
Duración
8 clases (32 hs totales)
-
Idioma
Español
-
Certificaciones
Certificados de aprobación y finalización
Requisitos
- Programación Estructurada
- Buena señal de internet
- Si es Intel, mín core i5
- Si es AMD, mín A10-9700
- RAM, mín 16 GB
- Disco, mín 1TB
- SSD, disco sugerido
- Mic, auriculares y cámara web