Examen Práctico: Mi Página Personal
- AGR
- Web , Programación , Examen
- 11 Mar, 2025
Examen Práctico:
Objetivo
Crear una página web personal con diseño moderno en la que se muestre:
- Una cabecera fija con tu nombre y un menú de navegación interactivo.
- Una sección “Sobre Mí” con una breve descripción, foto y animaciones sutiles.
- Una sección de Portafolio que presente proyectos en un layout flexible y llamativo.
- Una sección de Contacto para que te puedan escribir.
- Un pie de página con información adicional (por ejemplo, derechos de autor).
Paso 1: Preparar el Entorno
-
Crea una carpeta de proyecto.
Nómbrala, por ejemplo,mi_pagina_personal_examen. -
Dentro de la carpeta, crea dos archivos:
index.htmlstyle.css
Tip
Accede al siguiente enlace y descarga la carpeta con el nombre WEB LINK DE DESCARGA
Tip
O si lo prefieres, puedes crear los archivos directamente en Notepad++. Para ello:
- Abre Notepad++.
- Crea un nuevo archivo en Files -> New File.
- Guarda el archivo con la extensión adecuada:
- HTML para
index.html - CSS para
style.css
- Escribe o pega el contenido proporcionado.
- Guarda los cambios.
- Abre ambos archivos en tu editor de código Notepad++.
Paso 2: Estructura HTML
En el archivo index.html, copia y pega la siguiente estructura. Esta base incluye el nuevo diseño y los elementos interactivos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Personal</title>
<!-- Fuente de Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Encabezado fijo con degradado -->
<header>
<div class="header-container">
<h1>Mi Nombre</h1>
<nav>
<ul>
<li><a href="#sobre-mi">Sobre Mí</a></li>
<li><a href="#portafolio">Portafolio</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<!-- Contenedor principal -->
<main>
<!-- Sección "Sobre Mí" -->
<section id="sobre-mi">
<h2>Sobre Mí</h2>
<p>Hola, soy [Tu Nombre]. Soy estudiante de secundaria y me apasiona [tu pasión/intereses].</p>
<img src="tu-foto.jpg" alt="Mi Foto" width="200">
</section>
<!-- Sección "Portafolio" -->
<section id="portafolio">
<h2>Portafolio</h2>
<p>A continuación, algunos de mis proyectos o actividades:</p>
<div class="proyectos">
<article>
<h3>Proyecto 1</h3>
<p>Descripción breve del proyecto 1.</p>
</article>
<article>
<h3>Proyecto 2</h3>
<p>Descripción breve del proyecto 2.</p>
</article>
<!-- Puedes agregar más artículos -->
</div>
</section>
<!-- Sección "Contacto" -->
<section id="contacto">
<h2>Contacto</h2>
<p>Puedes escribirme a: <a href="mailto:tuemail@example.com">tuemail@example.com</a></p>
</section>
</main>
<!-- Pie de Página -->
<footer>
<p>© 2025 Mi Página Personal. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Paso 3: Agregar Estilos con CSS (Diseño Llamativo)
Abre el archivo style.css y agrega el siguiente código. Estos estilos ofrecen un diseño moderno, interactivo y responsivo:
/* Reinicio de estilos y configuración básica */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to right, #ece9e6, #ffffff);
color: #333;
line-height: 1.6;
}
/* Encabezado fijo y estilizado */
header {
width: 100%;
background: linear-gradient(90deg, #ff7e5f, #feb47b);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 1.8rem;
color: #fff;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: 700;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #333;
}
/* Contenedor principal */
main {
padding-top: 90px; /* Para compensar el header fijo */
}
/* Secciones con fondo blanco, bordes redondeados y sombra */
section {
background: #fff;
margin: 30px auto;
padding: 25px;
max-width: 800px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
section:hover {
transform: scale(1.02);
}
section h2 {
text-align: center;
margin-bottom: 20px;
font-size: 2rem;
}
/* Estilos para la sección de proyectos */
.proyectos {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
}
.proyectos article {
background: #f9f9f9;
padding: 15px;
border-radius: 8px;
flex: 1;
min-width: 200px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: background 0.3s ease;
}
.proyectos article:hover {
background: #ffeede;
}
.proyectos h3 {
margin-bottom: 10px;
}
/* Estilo para enlaces en la sección de contacto */
section#contacto a {
color: #ff7e5f;
font-weight: bold;
text-decoration: none;
transition: color 0.3s ease;
}
section#contacto a:hover {
color: #feb47b;
}
/* Pie de Página */
footer {
text-align: center;
padding: 15px;
background: #333;
color: #fff;
margin-top: 20px;
}
Ejemplo de vista
Si todo marcha bien debes ver algo como la siguiente imagen:
A partir de este punto, enfoca tu atención en los siguientes aspectos, ya que serán evaluados.
Sigue cuidadosamente las instrucciones fundamentales para tu evaluación:
- Personaliza el contenido: Sustituye los textos de ejemplo por tus datos reales.
- Actualiza las imágenes: Coloca un avatar en la ruta indicada y optimízala.
- Explora el CSS: Modifica colores, fuentes y añade tus propios toques en el archivo style.css
- Agrega dos secciones nuevas, una llamada Logros y otra llamada Hobbies
Tip
Para agregar una nueva sección llamada Logros, sigue estos pasos:
- Abre el archivo index.html
Localiza la sección donde se encuentran las otras secciones (como “Sobre Mí”, “Portafolio”, etc.) dentro de la etiqueta <main>.
- Agrega la nueva sección:
Inserta el siguiente bloque de código HTML en el lugar adecuado, por ejemplo, después de la sección “Portafolio” o en el orden que prefieras:
<!-- Sección "Logros" -->
<section id="logros">
<h2>Logros</h2>
<p>Aquí puedes listar tus logros, reconocimientos o metas alcanzadas.</p>
<ul>
<li>Logro 1: Descripción breve del logro.</li>
<li>Logro 2: Descripción breve del logro.</li>
<li>Logro 3: Descripción breve del logro.</li>
</ul>
</section>
- Agrega imagenes en cada una de las secciones de proyectos
Tip
Para agregar imágenes en la sección de proyectos, puedes seguir estos pasos:
-
Ubica la sección de proyectos: Dentro de la etiqueta
<div class="proyectos">encontrarás los<article>que representan cada proyecto. -
Agrega la etiqueta
<img>en cada artículo: Dentro de cada<article>, coloca una etiqueta<img>con los atributos src (ruta de la imagen) y alt (descripción de la imagen). Por ejemplo:
<article>
<h3>Proyecto 1</h3>
<img src="ruta-a-la-imagen/proyecto1.jpg" alt="Captura del Proyecto 1" width="300">
<p>Descripción breve del proyecto 1.</p>
</article>
-
Asegúrate de que la imagen esté en la ubicación correcta: Guarda las imágenes en la misma carpeta o en una subcarpeta (por ejemplo, img/) y actualiza la ruta en el atributo src según corresponda.
-
Personaliza el tamaño y estilo: Puedes agregar estilos en el archivo style.css para ajustar el tamaño, márgenes o efectos de las imágenes. Por ejemplo:
.proyectos article img {
max-width: 100%;
border-radius: 5px;
display: block;
margin: 10px auto;
}
6 Sube tus archivos:
- Toma una captura de pantalla de tu pagina web y carga el archivo en Files
- Comprime la carpeta que creaste para tu proyecto en formato .zip o .rar
- De igual manera carga la carpeta comprimida en Files
Warning
Asegúrate de renombrar tanto la imagen de tu captura de pantalla como la carpeta comprimida con tu nombre completo, y luego sube ambos archivos en el apartado indicado.
Archivos sin nombre no podran ser evaluados
Para tu evaluacion es indispensable que subas:
- Tu captura de pantalla
- Tu carpeta comprimida
- Por ultimo contesta el siguiente cuestionario Examen , No es necesario que accedas con google
Rubrica de evaluación Práctica
| Criterio | Excelente (3 pts) | Bueno (2 pts) | Necesita Mejorar (1 pt) |
|---|---|---|---|
| Preparar el Entorno | Carpeta y archivos creados correctamente, usando Notepad++ o un servidor local; la estructura es clara y organizada. | Carpeta y archivos creados, pero con algunos errores en la organización o en el nombre de los archivos. | No se crearon correctamente los archivos o la carpeta; el entorno de trabajo no es adecuado. |
| Estructura HTML | El documento HTML tiene una estructura semántica correcta, con etiquetas bien utilizadas (header, main, section, footer). | La estructura HTML es mayormente correcta, pero presenta algunos errores menores en el uso de etiquetas. | La estructura HTML está incompleta, con errores graves o uso inadecuado de las etiquetas semánticas. |
| Estilos CSS (Diseño y Responsividad) | Se aplicaron estilos modernos y creativos; el diseño es llamativo, ordenado y adaptado a diferentes dispositivos. | Se aplicaron estilos que funcionan, aunque podrían mejorar en creatividad o en adaptabilidad a móviles. | Los estilos son muy básicos o están mal aplicados, sin lograr un diseño atractivo o responsivo. |
| Personalización del Contenido | El contenido (textos e imágenes) es personalizado, con datos reales y coherentes; se observa esfuerzo en la originalidad. | Se personalizó en parte el contenido, pero aún se observan textos o imágenes genéricas. | El contenido sigue siendo mayormente de ejemplo, sin personalización ni adaptación a la identidad del estudiante. |
| Incorporación de Nuevas Secciones (Logros y Hobbies) | Se agregaron ambas secciones solicitadas, con contenido ordenado y coherente, respetando el diseño general. | Se agregó solo una sección o ambas están presentes, pero con contenido limitado o poco organizado. | No se agregaron las secciones solicitadas o están incompletas/erróneas. |
| Integración de Medios (Imágenes) | Imágenes están correctamente integrados, con rutas adecuadas y descripción (alt) para cada medio. | Los medios están integrados, pero pueden presentar errores menores en las rutas o en la presentación. | Los medios no se integraron correctamente o faltan atributos esenciales (por ejemplo, el alt en imágenes). |
| Subida de Archivos | Se subió la captura de pantalla y la carpeta comprimida correctamente, con nombres adecuados y siguiendo las instrucciones. | Se subió alguno de los archivos requeridos, pero falta alguno o no se han nombrado correctamente. | No se subieron los archivos requeridos o se presentaron con errores en el formato/nombres. |
| Respuesta al Cuestionario | El cuestionario se completó en su totalidad, con respuestas correctas y bien fundamentadas. | Se completó el cuestionario, pero con algunas respuestas incompletas o incorrectas. | El cuestionario no se completó o las respuestas son mayormente incorrectas. |
| Organización y Comentarios en el Código | El código está bien organizado y comentado, facilitando su lectura y mantenimiento. | El código tiene algunos comentarios o la organización es parcial; se puede mejorar para mayor claridad. | El código está desorganizado y carece de comentarios, dificultando la comprensión del desarrollo. |
