ATRIBUTOS
11 de JUNIO de 2026 /JUEVES
📘 VOCABULARIO TÉCNICO
🌐 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 |
|---|---|---|
| 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. |
04 de JUNIO de 2026 /JUEVES
PRUEBA II TRIMESTRE
3 PARTE, SEGUIR ENLACE
TERCERA PARTE
27 de mayo de 2026 /MIÉRCOLES
INTRODUCCIÓN DISEÑO CSS CON FLEXBOX
¿Qué es Flexbox?
Flexbox (Flexible Box Model) es un modelo de diseño en CSS que facilita la alineación, distribución y
redimensionamiento de elementos dentro de un contenedor, incluso cuando su tamaño es dinámico o cambia. Es
especialmente útil para crear interfaces responsivas.
1. Contenedor flexible (flex container)
Es el elemento padre donde se aplica la propiedad
display: flex;
Ejemplo:
css
.contenedor {
display: flex;
}
display: flex;
Ejemplo:
css
.contenedor {
display: flex;
}
2. Elementos flexibles (flex items)
Son los hijos directos del contenedor flexible que heredan las propiedades del Flexbox.
DISEÑO FLEX
CONSULTAR PARA PÓXIMA SEMANA:
DIFERENTES CÓDIGOS O FORMATOS DE COLORES QUE SE USAN EN DISEÑO WEB, PARTICULARMENTE LOS USADOS EN HTML Y CSS
21 de mayo de 2026 /JUEVES
PRUEBA CORTA
SEGUIR ENLACE: ➤
PÁGINA CON MENÚ RESPONSIV
MENÚ CON SUBMENÚ
MENÚ LATERAL (HAMBURGUESA)
13 de mayo de 2026 / MIÉRCOLES
QZ
SEGUIR EL ENLACE:
PRESENTAR QUIZ
ENLACE PARA CÓDIGO COLORES
código colores
ENLACE PARA GOOGLE FONTS
fuentes de google
ENLACE PARA ÍCONOS
free icons
ETIQUETAS HTML
Definición, traducción, significado
09 de abril de 2025 / MIÉRCOLES
PLAN DE ÁREA II TRIMESTRE
COMPETENCIA POR PERIODOS
• Formularios y menú principal para proyecto.
• Codifica sentencias en PHP para la implementación de las acciones INSERT y SELECT de aplicaciones WEB.
• Conecta una base de datos con plataforma xampp y phpmyadmin.
• HTML, CSS (FLEX)
TEMAS/ CONTENIDOS A DESARROLLAR
ESTRUCTURAS SECUENCIALES.
•Formulario de contacto
•Formulario registro usuarios
• Formulario Login
• Práctica de conexión de una base de datos con xamp y phpmyadmin
• Implementación practica de las acciones SELECT e INSERT al proyecto
• Tipos de menú principal para sitio web proyecto
• Ejemplos de aplicación
• Ejercicios propuestos
INDICADOR DE DESEMPEÑO
• Incorpora correctamente las sentencias de PHP al proyecto
• Realiza la conexión de una base de datos.
• Conecta formularios de proyecto a base de datos mysql.
• Diseña con la herramienta html y css flex.
ACTIVIDADES DE ENSEÑANZA-APRENDIZAJE
- Implementación código PHP al proyecto.
• Explicación de cómo conectar una base de datos con los formularios del proyecto con xamp, phpmyadmin,
mysql.
• Implementación de la matriz CRUD(SELECT-INSERT) al proyecto.
• Diseñar y conectar formularios de contacto y de usuarios del proyecto principal Feria Empresarial.
• Diseña página web con html y css usando flexbox.
RECURSOS DIDÁCTICOS
• Sala de programación.
• Conectividad a Internet.
• Video beam.
• Objetos comunes del aula (sillas libros lápices, cuadros, memoría USB, etc.)
• Software de aplicación pertinente a la unidad.
• Cuaderno de apuntes
• Página web guilleavila.pro
• Formularios google.
ESTRATEGIAS DE EVALUACIÒN
• Desarrollo de los diferentes talleres individuales en el cuaderno de apuntes.
• Evaluaciones escritas.
• Evaluaciones tipo ICFES.
• Exposiciones.
• Pruebas virtuales con puntuación automática.
• Evaluaciones prácticas en el computador.
• Talleres grupales.
• Prácticas en el computador.
• Ejecución de prácticas de aplicación.
MENÚ CON SUBMENÚ