Tercer Trimestre

🌐 HTML

Inglés	Español	Significado
Tag	Etiqueta	Elemento que define la estructura de la página.
Attribute	Atributo	Información adicional dentro de una etiqueta.
Element	Elemento	Conjunto formado por etiqueta de apertura, contenido y cierre.
Semantic HTML	HTML semántico	Uso de etiquetas que describen el significado del contenido.
Form	Formulario	Estructura para recopilar datos del usuario.

🎨 CSS

Inglés	Español	Significado
Design flex	Diseño flexible	En el ámbito de la programación, hace referencia a Flexbox, que es una propiedad de maquetación de CSS
Selector	Selector	Define qué elementos HTML serán estilizados.
Property	Propiedad	Característica visual aplicada (ej. color, margen).
Class	Clase	Conjunto de estilos reutilizables aplicados a elementos.
ID	Identificador	Estilo único aplicado a un elemento específico.
Flexbox	Caja flexible	Sistema de distribución de elementos en contenedores.
Grid	Cuadrícula	Sistema de diseño basado en filas y columnas.

🗄️ MySQL

Inglés	Español	Significado
Query	Consulta	Instrucción para interactuar con la base de datos.
Table	Tabla	Conjunto de datos organizados en filas y columnas.
Row	Fila	Registro individual dentro de una tabla.
Column	Columna	Campo que define un tipo de dato dentro de la tabla.
Primary Key	Clave primaria	Identificador único de cada registro.
Foreign Key	Clave foránea	Relación entre tablas mediante un campo común.
Index	Índice	Mejora la velocidad de búsqueda en la base de datos.
Join	Unión	Combina datos de varias tablas según una condición.

MÓDULO DISEÑO GRID

El módulo Grid de CSS es un sistema de diseño bidimensional que permite organizar elementos en filas y columnas, facilitando la creación de layouts complejos en páginas web.
Funciona definiendo un contenedor de grid y luego posicionando los elementos dentro de sus celdas, usando propiedades como grid-template-columns, grid-template-rows, y otras para controlar el tamaño y la ubicación de las filas y columnas, así como la posición de los elementos individuales

CONTENEDOR GRID

Se crea un elemento HTML y se le aplica display: grid; para convertirlo en un contenedor grid.

DEFINICIÓN DE LA ESTRUCTURA

Se utilizan propiedades como grid-template-columns y grid-template-rows para definir el número y tamaño de las columnas y filas respectivamente.

POSICIONAMIENTO DE ELEMENTOS

Los elementos hijos dentro del contenedor grid se pueden posicionar utilizando propiedades como grid-column-start, grid-column-end, grid-row-start, y grid-row-end, o sus atajos grid-column y grid-row.

CONTROL DEL ESPACIADO

Se pueden usar propiedades como grid-gap (Separación cajas), row-gap (Separación filas) y column-gap (Separación columnas) (o sus versiones antiguas grid-row-gap y grid-column-gap) para controlar el espaciado entre las celdas.

ALINEACIÓN

Las propiedades justify-items (Horizontañ), align-items (Vertical), justify-content y align-content permiten controlar la alineación de los elementos dentro de las celdas y de la propia cuadrícula dentro del contenedor.

SLIDER - CARRUSEL

IMÁGENES

ENLACES

PLAN DE AULA

COMPETENCIA

WEB.
• Implementa sentencias de diseño a páginas WEB de un proyecto en la feria empresarial.
•Módulo diseño GRID
• Codifica sentencias en PHP para la implementación de las acciones INSERT de aplicaciones

CONTENIDOS

Diseño Web
Formularios
Grid áreas
Responsive Layout
MATRIZ CRUD
•Practica de conexión de una base de datos con xamp y phpmyadmin.
•Implementación practica de las acciones SELECT e INSERT al proyecto.

ACTIVIDADES

Diseñar y conectar formularios de contacto y de usuarios del proyecto principal Feria Empresarial.
Diseñar página web con html y css usando módulo grid.
Aplicar media query’s
•Implementación práctica de la matriz CRUD (insert in to) al proyecto.
•Realización de ejemplos y código de aplicación.
•Implementación practica del código al proyecto.
• Implementar técnicas de diseño a un sitio WEB.

INDICADOR DE DESEMPEÑO

•Implementa la MATRIZ CRUD (insert) a un proyecto.
•Incorpora sentencias de diseño a un sitio WEB.
• Aplica lo aprendido adaptándolo a un proyecto en la feria empresarial.
•Conecta formularios de proyecto a base de datos mysql
• Diseña con la herramienta html y css grid

CRITERIOS Y RECURSOS DE EVALUACIÓN

• Desarrollo de los diferentes talleres individuales en el cuaderno de apuntes.
• Evaluaciónes escritas
• Evaluaciónes tipo ICFES
• Evaluaciónes prácticas en el computador
• Talleres grupales.
• Prácticas en el computador.
CRITERIOS:
• Presentación oportuna de talleres individuales y grupales • Implementación correcta de las evaluaciones prácticas en el computador • Cumplimiento con las prácticas en el computador • Cuidado con los equipos de computo • Disciplina, puntualidad, pulcritud y respeto.

RECURSOS

• Docente del área.
• Sala de Programación
• Conectividad a Internet.
• Video beam.
• Objetos comunes del aula (sillas libros lápices, cuadros, menoría USB, etc.)
• Software de aplicación pertinente a la unidad.
• Página web guilleedu.pro
• Formularios de google

PROGRAMACIÓN

III TRIMESTRE
TÉCNICOS 2026

GRADO 11

📘 VOCABULARIO TÉCNICO

quiz

PRESENTAR QUIZ

Se crea un elemento HTML y se le aplica display: grid; para convertirlo en un contenedor grid.

Se utilizan propiedades como grid-template-columns y grid-template-rows para definir el número y tamaño de las columnas y filas respectivamente.

Los elementos hijos dentro del contenedor grid se pueden posicionar utilizando propiedades como grid-column-start, grid-column-end, grid-row-start, y grid-row-end, o sus atajos grid-column y grid-row.

Se pueden usar propiedades como grid-gap (Separación cajas), row-gap (Separación filas) y column-gap (Separación columnas) (o sus versiones antiguas grid-row-gap y grid-column-gap) para controlar el espaciado entre las celdas.

Las propiedades justify-items (Horizontañ), align-items (Vertical), justify-content y align-content permiten controlar la alineación de los elementos dentro de las celdas y de la propia cuadrícula dentro del contenedor.

LÍNEAS

COLUMNAS

FILAS

GAP

SLIDER - CARRUSEL

IMÁGENES

ENLACES

BIENVENIDOS

PLAN DE AULA

PUNTOS DE RUPTURA

(breakpoints)

ATAJOS TECLADO

ETIQUETAS HTML

Definición, traducción, significado

ATRIBUTOS