Unidad 5: Proyecto Final – Mi Página Web Personal
Introducción al Desarrollo Web con HTML y CSS
¡Bienvenido a la sesión 11! En esta etapa emocionante, comenzarás a planificar tu proyecto final de la Introducción al Desarrollo Web. Ahora que has aprendido los conceptos básicos de HTML y CSS, diseñarás una página web completa. En esta sesión, aprenderás a diseñar un esquema o boceto de tu página y a organizar el contenido. Este paso es fundamental, ya que te ayudará a tener una idea clara de cómo será tu página antes de empezar a programarla.
1. Diseñar un Esquema o Boceto para la Página Web Final
¿Qué es un esquema o boceto? Un boceto es un dibujo o mapa básico que muestra cómo quieres que se vea tu página. No tiene que ser muy detallado, pero debe incluir los elementos principales, como encabezados, secciones, imágenes y enlaces.
Ejemplo de boceto simple: Imagina que quieres crear una página personal con una biografía, tus intereses y una galería de fotos. Aquí tienes un boceto simple para esa página:
- Encabezado: Título de la página, como “Sobre mí” o tu nombre.
- Sección de Biografía: Un párrafo sobre ti.
- Sección de Intereses: Una lista de tus hobbies o actividades favoritas.
- Galería de Fotos: Una cuadrícula de imágenes que representen tus intereses o experiencias.
- Enlace de Contacto: Un enlace para que otras personas puedan contactarte.
Ejercicio: Dibuja tu propio boceto en una hoja de papel o usa una herramienta en línea para ver cómo se verá tu página. Piensa en los colores, las fuentes, y el estilo general que quieres usar.
2. Elegir el Tema de la Página
Aquí tienes algunas ideas para elegir el tema de tu página final. Recuerda, el tema debe ser algo que te interese y te entusiasme:
- Biografía: Una página sobre ti, tus intereses, hobbies, y fotos.
- Portafolio: Muestra tus habilidades o trabajos creativos.
- Blog: Escribe sobre un tema que te apasione.
- Proyecto Escolar: Algo relacionado con tus estudios o un proyecto de clase.
Ejemplo: Si eliges un tema de biografía, puedes incluir secciones como “Mi historia”, “Mis logros”, y “Mis hobbies”.
Paso a Paso: Definir el tema
- Escribe una breve descripción de lo que quieres incluir en tu página.
- Divide el contenido en secciones para que sea fácil de leer.
- Elige un estilo visual que se adapte a tu tema, como un estilo más serio o uno colorido y divertido.
3. Organización de la Estructura de Contenido
Para organizar el contenido de tu página, piensa en una estructura lógica que guíe a los visitantes por cada parte. Vamos a crear una estructura con un ejemplo completo basado en el tema “Biografía”.
Ejemplo Completo: Página Biográfica
Sección 1: Encabezado y Navegación
- Título principal: Es el nombre de tu página (Ejemplo: “Mi Biografía”).
- Menú de navegación: Puede incluir enlaces a otras secciones de la página, como “Sobre mí”, “Galería”, y “Contacto”.
Código:
<header>
<h1>Mi Biografía</h1>
<nav>
<ul>
<li><a href="#biografia">Sobre mí</a></li>
<li><a href="#galeria">Galería</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
Sección 2: Sobre mí
- Descripción personal: Incluye un párrafo sobre quién eres y cuáles son tus intereses.
- Datos clave: Agrega algunos datos interesantes, como tu ciudad, tu edad o alguna actividad favorita.
Código:
<section id="biografia">
<h2>Sobre mí</h2>
<p>Hola, soy [Tu Nombre], un estudiante apasionado por [tu interés]. Me encanta aprender sobre tecnología y explorar el mundo de la web.</p>
</section>
Sección 3: Galería
- Fotos: Puedes incluir algunas imágenes de tus hobbies o de momentos importantes para ti.
- Diseño: Usa un estilo en cuadrícula para organizar las imágenes y hacer que se vea ordenado.
Código:
<section id="galeria">
<h2>Galería de Fotos</h2>
<div class="galeria">
<img src="foto1.jpg" alt="Descripción de la foto 1">
<img src="foto2.jpg" alt="Descripción de la foto 2">
</div>
</section>
Sección 4: Contacto
- Información de contacto: Un enlace a tu correo o una red social.
- Estilo: Mantén esta sección simple para facilitar el contacto.
Código:
<section id="contacto">
<h2>Contacto</h2>
<p>Si quieres saber más sobre mí, puedes <a href="mailto:correo@example.com">contactarme aquí</a>.</p>
</section>
Estilo CSS Básico:
header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
section {
margin: 20px;
}
.galeria img {
width: 100px;
height: auto;
margin: 5px;
}
¡Listo! Ya tienes un esquema, un tema, y una estructura de contenido para tu proyecto final. En la próxima sesión, comenzarás a desarrollar cada una de estas secciones en HTML y CSS para darle vida a tu página web. Este es un gran paso hacia crear algo original y completamente tuyo, ¡sigue adelante!