PRÁCTICA 2
PROYECTO:
Sitio Web de la UNIDAD EDUCATIVA "PELILEO" 🇪🇨
1. Planificación y Definición del Proyecto
1.1. Definición del Propósito y Objetivos
El sitio web debe ser la herramienta principal
de comunicación e información de la Unidad Educativa Pelileo.
- Objetivo
Primario: La web debe "publicitar" la propuesta de valor
diferenciado (Ciencias vs. Técnico) y la trayectoria en Inicial y Básica.
- Objetivo
Secundario: Proveer información clara, actualizada y detallada para cada uno
de los niveles y otros aspectos de la institución.
- Objetivo
Terciario: Centralizar el acceso a plataformas internas (calificaciones,
comunicados).
1.2. Elección de Plataforma y
Tecnología
- Plataforma
CMS (Backend):
WordPress Esto permite gestionar de manera eficiente las secciones
de contenido altamente diferenciado.
- Herramienta
de Diseño (Frontend): HTML 5, JavaScript, y Tailwind CSS (para un diseño modular,
profesional y 100% responsivo).
- Creador
de Sitios Web (No Usado): Se desestima el uso de un creador (Wix, Squarespace) debido a la
complejidad de los seis niveles y la necesidad de SEO avanzado y
estructuras de datos personalizadas, optando por el desarrollo profesional
con código.
2. Infraestructura y Configuración del Sitio
Web
2.1. Registro del Nombre de
Dominio
- Dominio
Seleccionado:
www.uepelileo.edu.ec
- Registro: Adquisición por 3 años, con
protección WHOIS para privacidad.
2.2. Adquisición del Plan de Alojamiento
(Hosting)
- Requerimiento: Hosting de tipo Cloud
con servidores optimizados para WordPress.
- Razones: La complejidad del sitio y la
cantidad de documentos y galerías de imágenes (de los seis niveles) exigen
alta velocidad y escalabilidad.
- Configuración
Inicial: Se
configura el CDN (Content Delivery Network), el certificado SSL/TLS
(HTTPS) y se crearan bases de datos para el CMS.
3. Diseño y Estructura del Sitio Web (Frontend)
3.1. Diseño de la Estructura y Navegación
PLANIFICACIÓN DE LA PÁGINA WEB
PATRÓN Z
El patrón de diseño en forma de Z es una
técnica de diseño de interacción que se utilizará para facilitar la navegación
y la comprensión de información compleja en el sitio web. Este patrón se basa
en la idea de que la información más importante se encuentra en el centro de la
pantalla y se despliega en forma de Z, permitiendo a los usuarios acceder a
ella de manera más rápida y sencilla.
ESTRUCTURA DE LA PÁGINA WEB
La navegación es crucial para unificar los
niveles.
CABECERA
Los elementos que se incluyen en la cabecera
son:
- Logo de la institución
- Título
- Subtítulo
- El menú de navegación
- Inicio
Niveles Académicos (Menús desplegable):
o
Inicial
y Básica
o
Bachillerato
en Ciencias
o Bachillerato Técnico
CUERPO
El contenido es informativo e incluye los siguientes
aspectos en la página principal:
- Un
texto
- Enfoque
principal
- Actividades
Académicas
- Eventos
Culturales
- Eventos
Deportivos
- Matrículas
y Contacto
PIE DE PÁGINA
En el pie de página podemos encontrar los
siguientes elementos:
- Contacto principal
- Ubicación
- Redes Sociales
3.2. Creación de Elementos Visuales
- Módulos
de Elementos:
El diseño se basará en elementos informativas para representar los niveles
de manera visualmente agradable y responsiva.
- Iconografía: Uso de iconos para representar
cada nivel (Juego, Libro, Tecnología, Laboratorio).
COLORES
- Colores de Marca:
- Institucional: Azul (#00A859) (#102E4A).
- Acento (Llamadas a la Acción): Blanco (#FFD700).
- Tipografía: Inter (Limpia y moderna).
3.3. Herramientas de Diseño
- Figma: Para el mockup de la
página de inicio y el diseño del sistema de tarjetas.
- Tailwind
CSS: Para la
implementación de todos los estilos, garantizando la adaptabilidad.
4. Desarrollo Backend y Funcionalidades
El siguiente código HTML representa el home
del sitio, completamente responsivo, incluyendo la estructura de navegación
compleja y la simulación del formulario de captación de leads.
- Busca e instala la extensión: Ve a la pestaña de Extensiones en VS Code, busca "Live Server" e instálala.
- Abre tu archivo HTML: Navega hasta tu archivo HTML en el explorador de archivos de VS Code.
- Haz clic derecho y selecciona la opción: Haz clic derecho en el nombre del archivo y elige la opción "Open with Live Server".
- Visualiza en el navegador: Tu archivo HTML se abrirá automáticamente en tu navegador web predeterminado, ejecutándose en un servidor de desarrollo local.
- Recarga automática: No necesitas actualizar la página manualmente cada vez que guardas un cambio; la extensión lo hace por ti.
- Servidor de desarrollo local: Te permite probar tu sitio web de manera segura en un entorno local.
No hay comentarios:
Publicar un comentario