Aquí aprenderás a construir sitios web desde cero. Comenzarás con HTML para la estructura, CSS para el diseño visual y un poco de JavaScript para la interacción. Verás cómo funciona el diseño adaptable (responsive design) y cómo alojar tus páginas en internet. También aprenderás a organizar la información de manera clara y atractiva. Tu proyecto final puede ser una página personal, un portafolio o incluso un sitio para un negocio.
📘 Introducción
La asignatura Diseño de Página Web tiene como objetivo principal enseñar a los estudiantes a crear sitios web funcionales, atractivos y adaptados a distintos dispositivos. Combina conocimientos de estructura, estilo, interactividad y experiencia del usuario (UX) para que los alumnos logren desarrollar proyectos web completos, desde una idea básica hasta una página publicada en internet.
Es una materia ideal para quienes desean iniciarse en el desarrollo web y representa una base sólida para carreras en diseño digital, desarrollo frontend, marketing digital y emprendimiento en línea.
🎯 Objetivos de Aprendizaje
- Comprender la estructura básica de una página web.
- Aplicar estilos con CSS para dar formato y estética.
- Agregar interactividad básica usando JavaScript.
- Diseñar sitios web que se adapten a móviles (diseño responsivo).
- Conocer buenas prácticas de accesibilidad y usabilidad.
📚 Contenidos Principales
- HTML (Estructura)
- Estructura básica de una página.
- Encabezados, párrafos, listas, enlaces, tablas e imágenes.
- Formularios y entradas de usuario.
- CSS (Estilo)
- Sintaxis de hojas de estilo.
- Selectores, propiedades, unidades.
- Colores, fuentes, cajas, posicionamiento.
- Diseño con Flexbox y Grid.
- Media queries para diseño adaptable.
- JavaScript Básico (Interactividad)
- Variables, operadores, condicionales y ciclos.
- Eventos y funciones.
- Manipulación del DOM.
- Principios de Diseño Web
- Usabilidad.
- Accesibilidad.
- Experiencia del usuario (UX).
- Introducción al diseño UI.
- Publicación Web
- Estructura de archivos del sitio.
- Uso básico de FTP y servicios de hosting gratuitos.
- Introducción a GitHub Pages.
🛠️ Herramientas Utilizadas
- Visual Studio Code (editor de código).
- Navegadores web (Chrome, Firefox).
- Emuladores de dispositivos móviles.
- GitHub Pages (publicación gratuita).
- Figma / Canva (diseño gráfico opcional).
- Google Fonts, FontAwesome.
🧠 Habilidades Desarrolladas
- Escritura de código HTML, CSS y JavaScript.
- Creación de sitios web visualmente atractivos y funcionales.
- Pensamiento lógico y creatividad digital.
- Diseño centrado en el usuario.
- Trabajo autónomo y en equipo.
🧪 Actividades Prácticas
- Maquetación de una biografía personal.
- Creación de una página de portafolio.
- Proyecto grupal de sitio web institucional o temático.
- Publicación del proyecto final en internet.
📊 Evaluación
- Prácticas individuales (30%)
- Proyecto final grupal o individual (40%)
- Exámenes teóricos (20%)
- Participación y tareas (10%)