Construcción de sitios Web
Programa
Diseño Gráfico Digital
Construcción de sitios Web ?
La materia de Construcción de Sitios Web es crucial para estudiantes del Técnico en Diseño Gráfico. Aprenderán conceptos fundamentales de páginas web, HTML y CSS, habilidades esenciales para crear diseños atractivos y funcionales en el mundo digital actual.
Habilidades a desarrollar
Durante el curso de Construcción de Sitios Web, los estudiantes desarrollarán las siguientes habilidades clave:
Diseño y Estructura Web: Aprenderán a crear diseños web atractivos y funcionales, comprendiendo la importancia de una estructura bien organizada para una experiencia de usuario óptima.
HTML: Dominarán el lenguaje de marcado HTML para crear y estructurar el contenido de una página web, incluyendo texto, imágenes, enlaces y otros elementos.
CSS: Adquirirán habilidades en el uso de CSS para aplicar estilos y formatos al contenido HTML, personalizando la apariencia visual de las páginas web.
Módulos del curso
1.0
Introducción a HTML
• Estructura básica de una página HTML.
• Etiquetas de encabezado, párrafo, lista, enlaces y otros elementos fundamentales.
• Creación de una página web simple.
Requisitos previos: Conocimientos básicos de navegación en internet y el uso de un navegador web. Familiaridad con el sistema operativo de la computadora utilizada. Materiales: Un editor de texto, como Visual Studio Code, Sublime Text o Notepad++, instalado en la computadora. Enlaces: Documentación de HTML Ejemplos de páginas web simples para la práctica inicial.
2.0
Inserción de Imágenes y Multimedia en HTML
• Cómo agregar imágenes a una página HTML.
• Uso de etiquetas multimedia para incorporar audio y video.
• Ajuste y optimización de recursos multimedia.
Requisitos previos: Conocimientos básicos de navegación en internet y el uso de un navegador web. Familiaridad con el sistema operativo de la computadora utilizada. Materiales: Un editor de texto, como Visual Studio Code, Sublime Text o Notepad++, instalado en la computadora. Enlaces: Documentación de HTML Ejemplos de páginas web simples para la práctica inicial.
3.0
Creación de Enlaces y Botones Interactivos en HTML
• Creación de enlaces internos y externos.
• Uso de anclajes para navegar dentro de la misma página.
• Creación de botones interactivos con HTML y CSS.
Requisitos previos: Conocimientos básicos de navegación en internet y el uso de un navegador web. Familiaridad con el sistema operativo de la computadora utilizada. Materiales: Un editor de texto, como Visual Studio Code, Sublime Text o Notepad++, instalado en la computadora. Enlaces: Documentación de HTML Ejemplos de páginas web simples para la práctica inicial.
4.0
Introducción a CSS
• Sintaxis básica de CSS.
• Aplicación de estilos en línea y estilos internos.
• Selectores CSS y sus propiedades fundamentales.
Requisitos previos: Comprensión básica de HTML y las etiquetas comunes. Materiales: El editor de texto utilizado en la sesión anterior. Navegador web actualizado (Google Chrome, Mozilla Firefox, etc.). Enlaces: Documentación de CSS
5.0
Estilización de Texto, Imágenes y Fondos con CSS
• Estilización de texto: fuentes, tamaños, colores y efectos.
• Personalización de imágenes y fondos con CSS.
• Uso de box model para controlar el tamaño y el espacio de los elementos.
Requisitos previos: Comprensión básica de HTML y las etiquetas comunes. Materiales: El editor de texto utilizado en la sesión anterior. Navegador web actualizado (Google Chrome, Mozilla Firefox, etc.). Enlaces: Documentación de CSS
6.0
Diseño Responsivo con Media Queries
• Conceptos de diseño responsivo y adaptativo.
• Uso de media queries para ajustar el diseño según el dispositivo.
• Creación de diseños flexibles y fluidos.
Requisitos previos: Comprensión básica de HTML y las etiquetas comunes. Materiales: El editor de texto utilizado en la sesión anterior. Navegador web actualizado (Google Chrome, Mozilla Firefox, etc.). Enlaces: Documentación de CSS
7.0
Evaluación Parcial - Demostración de los Conocimientos Adquiridos
El módulo de Evaluación Parcial: Demostración de los Conocimientos Adquiridos tiene como objetivo evaluar las habilidades y conocimientos de los estudiantes en la aplicación práctica de lo aprendido a lo largo del curso. Durante este módulo, los estudiantes realizarán una serie de tareas y ejercicios que pondrán a prueba sus capacidades en la creación y gestión de sitios web utilizando las tecnologías estudiadas.
Requisitos previos: Familiaridad con HTML y CSS. Materiales: Editor de texto y navegador web utilizados en las sesiones anteriores. Enlaces: Documentación de formularios HTML y elementos de formulario. Ejemplos de formularios interactivos y buenas prácticas.
8.0
Creación de Diseños Avanzados con Flexbox y CSS Grid
• Introducción a Flexbox y su uso para la creación de diseños flexibles.
• Creación de diseños bidimensionales con CSS Grid.
• Combinación de Flexbox y Grid para diseños complejos.
Requisitos previos: Familiaridad con HTML y CSS. Materiales: Editor de texto y navegador web utilizados en las sesiones anteriores. Enlaces: Documentación de formularios HTML y elementos de formulario. Ejemplos de formularios interactivos y buenas prácticas.
9.0
Personalización de Tipografía y Efectos de Texto con CSS
• Uso de fuentes web de Google Fonts y otros recursos.
• Estilización avanzada de texto con CSS.
• Creación de efectos tipográficos atractivos.
Requisitos previos: Finalización de los submódulos anteriores y comprensión básica de HTML, CSS y formularios. Materiales: Editor de texto y navegador web utilizados a lo largo del curso. Enlaces: Guía para la planificación y desarrollo del proyecto final. Herramientas y recursos adicionales para el desarrollo web.
10.0
Módulo 10: Animaciones y Transiciones CSS
• Animaciones CSS: keyframes y propiedades de animación.
• Transiciones CSS para crear efectos de cambio suaves.
• Integración de animaciones en el sitio web.
Requisitos previos: Conocimientos básicos de navegación en internet y el uso de un navegador web. Familiaridad con el sistema operativo de la computadora utilizada. Materiales: Un editor de texto, como Visual Studio Code, Sublime Text o Notepad++, instalado en la computadora. Enlaces: Documentación de HTML Ejemplos de páginas web simples para la práctica inicial.
11.0
Creación de Formularios Interactivos
• Uso de etiquetas de formulario: input, textarea, select, etc.
• Validación básica de formularios con atributos HTML.
• Enviar datos de formulario a un servidor.
Requisitos previos: Finalización de los submódulos anteriores y comprensión básica de HTML, CSS y formularios. Materiales: Editor de texto y navegador web utilizados a lo largo del curso. Enlaces: Guía para la planificación y desarrollo del proyecto final. Herramientas y recursos adicionales para el desarrollo web.
12.0
Validación Personalizada y Mejora de la Accesibilidad en Formularios
• Validación personalizada .
• Mostrar mensajes de error y retroalimentación al usuario.
• Mejora de la accesibilidad en formularios.
Requisitos previos: Finalización de los submódulos anteriores y comprensión básica de HTML, CSS y formularios. Materiales: Editor de texto y navegador web utilizados a lo largo del curso. Enlaces: Guía para la planificación y desarrollo del proyecto final. Herramientas y recursos adicionales para el desarrollo web.
13.0
Evaluación Final - Demostración de los Conocimientos Adquiridos y Cierre del Curso
La Evaluación Final: Demostración de los Conocimientos Adquiridos es el último módulo del curso en el cual los estudiantes tendrán la oportunidad de aplicar todos los conocimientos y habilidades adquiridos a lo largo del programa en un proyecto integral y completo. Durante esta fase, los estudiantes desarrollarán un sitio web desde cero utilizando todas las tecnologías y técnicas aprendidas, demostrando su comprensión y competencia en el campo del desarrollo web.
Requisitos previos: Finalización de los submódulos anteriores y comprensión básica de HTML, CSS y formularios. Materiales: Editor de texto y navegador web utilizados a lo largo del curso. Enlaces: Guía para la planificación y desarrollo del proyecto final. Herramientas y recursos adicionales para el desarrollo web.
Actividades :
Conferencia
Práctica Guiada
Taller
Experiencia en Campo
Instruccional
Salida Académica
Evaluación
Sustentación
Práctica Laboral
Trabajo en grupo