Programación web
Alumnos: Rojas Mariano, Ocampos Nahuel.
Profesor: Marcos Rafael Núñez
Materia: Programación Web
Año lectivo: 2024.
Carrera: Técnico Superior en Programación y Análisis de Sistemas.
1
Página web
Introducción:
Bienvenidos a ARCADE
En ARCADE, nos apasiona el mundo de los videojuegos. Desde los clásicos retro hasta
los lanzamientos más recientes, nuestra misión es ofrecerte la información más
actualizada y emocionante del universo gamer.
¿Qué Puedes Encontrar Aquí?
Novedades y Noticias: Mantente al día con las últimas noticias de la industria del
videojuego. Aquí encontrarás artículos sobre próximos lanzamientos, actualizaciones
de juegos populares, eventos y mucho más.
Galería: Explora nuestra galería de imágenes y vídeos, donde puedes encontrar
trailers, gameplay, y artes conceptuales de tus juegos favoritos.
Guías y Trucos: ¿Atascado en un nivel difícil? ¿Buscas consejos para mejorar tu
jugabilidad? Consulta nuestras guías y trucos para obtener la ventaja que necesitas.
Nuestra Misión
En ARCADE, creemos que los videojuegos son más que entretenimiento: son una
forma de arte y una cultura en constante evolución. Nos esforzamos por ser tu fuente
de confianza para todas tus necesidades relacionadas con los videojuegos, ofreciendo
contenido de calidad y una comunidad vibrante.
2
Mapa de ideas:
Mapa del sitio:
3
Organización de la información:
Inicio: videojuegos
*encabezado con logo principal, *menú con todas páginas del 1° nivel, *imágenes con
todas las páginas del nivel 1, * pie de página derechos y condiciones de uso.
Novedades: todos sobre las nuevas novedades sobre los juegos y sus más
recientes noticias
Noticias: avances, actualizaciones, estrenos todo sobre los juegos
Ofertas: los mejores precios y promociones
Nuevos ingresos: estaremos actualizados con todo las nuevos juegos
que salgan
Galería: historia, inicios, expansión
Fotos: sobre los juegos.
Videos: sobre los juegos.
Cuentas: Inicio de sesión de los usuarios
Datos del usuario: nombre de usuario, correo electrónico, contraseña
Compras realizadas: datos sobre su lista de compras
Lista de regalo: regalos para los usuarios
Juegos: información de los juegos que tendremos disponibles.
Categoría: a que categoría pertenece (terror, acción, aventura, etc.)
Nombre: nombre del juego.
Imagen: fotos sobre el juego.
Descripción: Una breve descripción de que trata el juego.
Información: todos sobre el sitio:
Historia: los inicios, la expansión, galería de imágenes y videos
Contactos: redes sociales, WhatsApp, teléfonos, dirección.
Mapa: mapa del lugar.
4
Maquetación:
Para ordenadores:
Para celulares:
5
Para Tablet:
Diagrama caso de uso:
6
Diagrama flujo de datos:
7
Diagrama de base de datos:
Pseudocódigo de inicio de sesión
INICIO
// Definir credenciales correctas y roles asociados (almacenados en base de
datos)
Usuarios ← {
"usuario123": {
"contraseña": "contraseña_secreta",
"rol": "admin"
},
"usuario456": {
"contraseña": "contraseña_usuario",
"rol": "usuario"
}
}
8
// Pedir al usuario que ingrese sus credenciales
Imprimir "Ingrese su nombre de usuario:"
Usuario_ ingresado ← Leer_Entrada ()
Imprimir "Ingrese su contraseña:"
contraseña_ingresada ← Leer_Entrada ()
// Verificar si el usuario existe
SI usuario_ingresado EN usuarios ENTONCES
// Verificar si la contraseña es correcta
SI (contraseña_ingresada = usuarios [usuario_ingresado] ["contraseña"])
ENTONCES
// Obtener el rol del usuario
Rol ← usuarios [usuario_ingresado] ["rol"]
Imprimir "Inicio de sesión exitoso. Bienvenido."
// Redirigir al usuario según su rol
SI (rol = "admin") ENTONCES
Redirigir_Página ("dashboard_admin.html")
SINO SI (rol = "usuario") ENTONCES
Redirigir_Página ("pagina_usuario.html")
FIN SI
SINO
Imprimir "Contraseña incorrecta. Intente de nuevo."
FIN SI
SINO
Imprimir "Usuario no encontrado. Intente de nuevo."
// Dar opción de reintentar o registrarse
Mostrar_Opciones ("Reintentar", "Registrarse")
FIN SI
9
FIN
Necesidad a cubrir
La necesidad que debemos cubrir de nuestro cliente es que necesitaba un
sistema web para poder promocionar todos los juegos y periféricos que tiene a
la venta como también su local.
Como lo hará
La solución propuesta consiste en desarrollar un sistema web con un diseño
temático estilo árcade, alineado con la estética y ambiente del local. La interfaz
será amigable y accesible para los usuarios, especialmente enfocada en la
experiencia de los entusiastas de los juegos. El sistema contará con pestañas
organizadas de manera intuitiva, como:
Novedades: Para mostrar los últimos juegos y actualizaciones
relevantes.
Galería: Una sección visual que incluirá imágenes y videos destacados
de juegos y eventos.
Cuenta: Donde los usuarios podrán gestionar su perfil y preferencias.
Juegos: Una lista interactiva de los juegos disponibles con
descripciones y detalles.
Información: Sección que proporcionará detalles sobre el local,
contacto y preguntas frecuentes.
Límites del sistema
El sistema se encargara únicamente de publicitar los productos que estarán en
venta en el local y los nuevos ingresos, es decir, que no incluirá una venta
online y ningún modo de pago online.
Herramientas usadas a desarrollar
Las herramientas que se utilizaran serán:
Frontend: HTML, CSS
Backend: PHP
Base de datos: Mysql
Utilizamos Visual Studio Code y Xampp
10
Accesibilidad
El sistema web contara con varias opciones para que el sistema sea
accesible para la gran mayoría de personas.
MODO NOCTURNO:
RESPONSIVE: El contenido adaptable, también llamado contenido
responsivo, se refiere a un diseño web que se ajusta dinámicamente a
diferentes tamaños y tipos de dispositivos (como computadoras de escritorio,
tablets y smartphones), manteniendo su funcionalidad y legibilidad.
Para lograr contenido adaptable, se suelen implementar:
Diseño responsivo: Uso de media queries en CSS que ajustan el
diseño según el ancho de la pantalla. Esto incluye la reorganización
de elementos, cambio de tamaños de fuente y ajuste de imágenes.
Unidades de medida flexibles: Usar unidades como porcentajes, em
o rem en lugar de valores fijos en píxeles, lo que permite que los
elementos se redimensionen en función del tamaño de la pantalla o
la configuración del usuario.
Imágenes flexibles: Ajustar el tamaño de las imágenes para que se
adapten al ancho del contenedor, evitando que desborden la
pantalla.
Tipografía adaptativa: Ajustar el tamaño del texto y el espacio entre
líneas para mejorar la legibilidad en dispositivos más pequeños.
11
12
