Introduction: Modelo De Prototipo De Aplicativo Web
¡Hola, Bienvenido!
En el presente Instructable explicaremos como desarrollamos un modelo prototipo de aplicación web, el cual contará con dos modelados 3D y contenido auditivo, visual y textual para dar a conocer las consolas de la nueva generación (NextGen). Este proyecto fue desarrollado en Codesandbox.io con HTML, CSS y JavaScript.
Para este proyecto nos plantean un problema que sufren muchos estudiantes de Ingeniería Multimedia que cursan Arquitectura de Sistemas Multimedia en la Universidad Autónoma de Occidente con la nueva modalidad de presencialidad virtual que se ha adaptado a raíz de la emergencia sanitaria provocada por el actual coronavirus SARS- CoV-2 (COVID-19), sin embargo una de las falencias que tiene su material de estudio son la escasez de ejemplos que consultar referenciar los temas vistos con casos reales y concretos.
Es por esto, que nos solicitan desarrollar un modelo prototipo de aplicación web que permiten a los estudiantes conocer las consolas de nueva generación (NextGen) como Xbox Series X. Mediante la aplicación los estudiantes podrán enterarse de los subsistemas que conforman la consola y escuchar por qué cada uno de ellos es un subsistema. Además, lograrán saber cuáles son los elementos concretos de CPU, Memoria y Sistema Operativo que conforman la consola y tendrán acceso a las características técnicas de la misma.
Así mismo, se busca que la aplicación luzca un estilo moderno y acorde al área de los videojuegos. A su vez, que emplee videos, audios e imágenes que acompañen la información que la aplicación brinda a los estudiantes, haciendo de cada consola un ejemplo de Sistema Multimedia.
Tanto el software como los recursos multimedia (sonidos, imágenes, gráficos, fuentes, iconografía, etc.) que se usarán serán libres y gratuitos para poder utilizarlos dentro de la aplicación.
Supplies
Durante la elaboración del proyecto requerimos ayuda de páginas como https://www.turbosquid.com/Search/3D-Models/xbox+series+x y similares a esta, de las cuales pudimos descargar modelados 3D de libre uso y gratuito, también fue de gran utilidad la página oficial de Xbox (https://www.xbox.com/es-CO/consoles/xbox-series-x) ya que nos podía brindar una información verídica sobre la consola y ser mostrada de una manera moderna.
Step 1: Crear Una Cuenta En CodeSanbox
- Autoriza el uso de CodeSandbox desde GitHub mediante la ventana emergente.
- Crea un nombre de usuario y termina de completar la información
- Desde el navegador Web acceda a la página de Codesandbox (https://codesandbox.io/)
Iniciar sesión en el botón Iniciar sesión en la parte superior izquierda.
Step 2: Crear Un Proyecto Nuevo
- Haz click en +New Sandbox
- Busca y abre la plantilla Static
Step 3: Crear Una Carpeta
- Crea una carpeta haciendo click en el icono de New folder en la barra superior izquierda
- Asígnale el nombre src
Step 4: Subir Archivos
- Haz click en Upload files en el icono de flecha que se encuentra ubicado en la barra superior izquierda
- Carga los archivos que usarás en tu proyecto.
Step 5: HTML
- Copia y pega lo siguiente en tu el archivo index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>NextGen</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<audio id="bienvenido" controls >
<source src="https://uploads.codesandbox.io/uploads/user/1bf39f0a-d47b-4ee0-b49f-f85791ca875b/Zta6-bienvenido.mp3"
type="audio/mp3">
</audio>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<script src="app.js"></script>
<!-- <source src="src/bienvenido.mp3" type="audio/mpeg" autostart /> -->
<!-- FUENTES -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Krona+One&family=Roboto&family=Rubik+Mono+One&display=swap");
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nerko+One&family=Sansita+Swashed&display=swap");
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nerko+One&family=Raleway:wght@500;700&display=swap');
</style>
<h1 id="titulo1">NextGen</h1>
<h2 id="titulo2">Sistema Multimedia</h2>
<!-- Button trigger modal -->
<div align="center">
<button type="button" class="btn btn-warning videoButton" data-toggle="modal" data-target="#exampleModal">
¿Es un buen ejemplo?
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Explicación...</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<video width="100%" controls >
<source src="src/asm.mp4" type="video/mp4" >
</video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- modal para control -->
<div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">¿POR QUÉ EL CONTROL ES UN SUBSISTEMA?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Porque cumple con las características de <strong> SOFTWARE, HARDWARE y TELECOMUNICACIONES</strong> pero no
contenido, por ello se le denomina a todo el XBOX en general, <strong>un sistema distribuido
multipropósito</strong> </p>
<img src="/src/sistema_multi.png" alt="sistema multimedia">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- modal para consola -->
<div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">¿POR QUÉ LA CONSOLA ES UN SUBSISTEMA?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Porque cumple con las 3 características: <BR> <strong>1) MULTPLES MEDIOS. <BR> 2) (SOFTWARE, HARDWARE, CONTENIDO,
TELECOMUNICACIONES).</BR> 3) ES DISEÑADO PARA HUMANOS.</strong>
<img src="/src/sistema_multi.png" alt="sistema multimedia">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- lienzo donde esta la consola -->
<model-viewer id="modelviewer" src="src/xbox_x_scale.glb" style="width: 100%; height: 300px;"
alt="A 3D model of xbox console" auto-rotate camera-controls max-field-of-view="50">
<buttonder slot="hotspot" data-position="1 5.2 1" data-normal="0 0 1">
<div class="annotation"><strong>TELECOMUNICACIONES:</strong> <br>1) Conexión entre los perifericos y la consola = USB, Bluetooth. <br>
2) Conexión entre la consola y el TV = Cable HDMI.</div>
</buttonder>
<buttonder slot="hotspotdown" data-position="1 1 1" data-normal="0 1 0">
<div class="annotation"><strong>HARDWARE:</strong> <br>1) Memorias<br>
2)CPU.</div>
</buttonder>
<!-- el hotspot me permite crear varias notas...es como un id interno. -->
<buttonizq slot="hotspot-foot" data-position="-1 4.5 1" data-normal="0 0 1">
<div class="annotationizq"> <strong>SOFTWARE:</strong> <br>1) S.O= variación de windows. <br>
2) Juegos. </div>
</buttonizq>
<buttong slot="hotspot-center" data-position="0 3 1" data-normal="0 0 1" data-toggle="modal" data-target="#modal1">
<div class="annotationcenter"> <strong>SUBSISTEMA <br>1</br></strong> </div>
</buttong>
</model-viewer>
<!-- lienzo donde esta el control -->
<model-viewer id="modelviewer2" src="src/xbox_x_control_scale.glb" style="width: 100%; height: 210px;"
alt="A 3D model of an astronaut" auto-rotate camera-controls max-field-of-view="180">
<buttong slot="hotspotcen" data-position="-1 1.75 0" data-normal="0 1 0" data-toggle="modal" data-target="#modal2">
<div class="annotationcentercontrol"><strong>SUBSISTEMA 2</strong> </div>
</buttong>
<buttonizq slot="hotspot-izq" data-position="-1 1.75 -2" data-normal="0 1 0">
<div class="annotationizqcontrolup"> <strong>TELECOMUNICACIONES:</strong> <br>1) Bluetooth.</br><br> 2) Alimentación USB tipo C</br></div>
</buttonizq>
<buttonizq slot="hotspot-izq2" data-position="-1 1 2" data-normal="0 1 0">
<div class="annotationdercontrol"> <strong> HARDWARE:</strong> <br>1) cuerpo del control.</br><br> 2) Redondeo
ligero de los botones superiores.</br><br>3) Reducción en los bordes de los gatillos.</br>
<br>4) micrófono y altavoz incorporados.</br>
<br>5) Puerto auriculares 3.5mm.</br></div>
</buttonizq>
<buttonderup slot="hotspot-izq22" data-position="0 2 0" data-normal="0 1 0">
<div class="annotationizqcontrol"><strong>SOFTWARE:</strong> integrado
</div>
</buttonderup>
</model-viewer>
<h2 id="titulo3">XBOX SERIES X</h2>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
Step 6: CSS
- Haz click en New file en la barra superior izquierda
- Crea un archivo llamado style.css
- Copia y pega el siguiente código:
body {
/*background-color: blue;*/
/* background: url("src/XBOX9.jpg");
background-size: cover; */
background: linear-gradient(rgba(58, 77, 24, 0.4), rgba(58, 77, 24, 0.4)),
url("src/XBOX9.jpg") center center no-repeat fixed;
background-size: cover;
overflow: hidden;
}
/* lienzo donde esta la consola*/
#modelviewer {
width: 40%;
height: 40%;
align-content: center;
}
/* lienzo donde esta el control*/
#modelviewer2 {
width: 10%;
height: 10%;
align-content: center;
}
buttonn {
display: block;
width: 30px;
height: auto;
border-radius: 10px;
border: none;
background-color: greenyellow;
box-sizing: border-box;
}
buttong {
display: block;
width: 12px;
height: 12px;
border-radius: 10px;
border: none;
background-color: red;
box-sizing: border-box;
}
buttonizq {
display: block;
width: 15px;
height: 15px;
border-radius: 10px;
border: none;
--min-hotspot-opacity: 0;
background-color: greenyellow;
box-sizing: border-box;
}
buttonder {
display: block;
width: 15px;
height: 15px;
border-radius: 10px;
border: none;
--min-hotspot-opacity: 0;
background-color: greenyellow;
box-sizing: border-box;
}
buttonderup {
display: block;
width: 15px;
height: 15px;
border-radius: 10px;
border: none;
background-color: greenyellow;
box-sizing: border-box;
}
.annotation {
font-family: "Raleway", sans-serif;
font-size: 0.7rem;
background-color: #888888;
position: absolute;
transform: translate(18px, -20px);
border-radius: 10px;
padding: 10px;
width: 200px;
}
.annotationizq {
font-family: "Raleway", sans-serif;
font-size: 0.7rem;
background-color: #888888;
position: absolute;
transform: translate(-200px, -50px);
border-radius: 10px;
padding: 10px;
width: 200px;
}
.annotationcenter {
font-family: "Raleway", sans-serif;
font-size: 0.8rem;
background-color: #888888;
position: absolute;
transform: translate(-50px, 10px);
border-radius: 10px;
padding: 8px;
text-align: center;
cursor: pointer;
}
/* anotacion para texto grande */
.annotationg {
font-family: "Sansita Swashed", bold;
font-size: 0.8rem;
background-color: #888888;
position: absolute;
transform: translate(10px, 10px);
border-radius: 10px;
padding: 10px;
width: auto;
}
/* anotaciones para control */
.annotationdercontrol {
font-family: "Raleway", sans-serif;
font-size: 0.6rem;
background-color: #888888;
position: absolute;
transform: translate(17px, -150px);
border-radius: 10px;
padding: 10px;
width: 200px;
}
.annotationizqcontrol {
font-family: "Raleway", sans-serif;
font-size: 0.8rem;
background-color: #888888;
position: absolute;
transform: translate(-90px, -60px);
border-radius: 10px;
padding: 10px;
}
.annotationcentercontrol {
font-family: "Raleway", sans-serif;
font-size: 0.8rem;
background-color: #888888;
position: absolute;
transform: translate(-50px, 10px);
border-radius: 10px;
padding: 8px;
text-align: center;
cursor: pointer;
}
.annotationizqcontrolup {
font-family: "Raleway", sans-serif;
font-size: 0.6rem;
background-color: #888888;
position: absolute;
transform: translate(-130px, 10px);
border-radius: 10px;
padding: 10px;
}
/* TITULOS */
#titulo1 {
margin-top: 20px;
font-family: "Rubik Mono One", sans-serif;
/*tamaño de letra*/
font-size: 3rem;
/*nuevo color*/
color: #3d493e;
/*centrar contenido*/
text-align: center;
transform: rotate(-6deg);
-webkit-text-stroke: 2.5px rgb(255, 255, 255);
color: #85c50f;
text-shadow: 0 10px 0 rgb(188, 197, 135), 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
#titulo2 {
margin-top: 20px;
font-family: "Raleway", sans-serif;
/*tamaño de letra*/
font-size: 2rem;
/*nuevo color*/
color: #ffffff;
/*centrar contenido*/
text-align: center;
-webkit-text-stroke: 0px rgb(255, 255, 255);
}
#titulo3 {
font-family: "Rubik Mono One", sans-serif;
/*tamaño de letra*/
font-size: 2rem;
/*nuevo color*/
color: #3d493e;
/*centrar contenido*/
text-align: center;
-webkit-text-stroke: 2px rgb(255, 255, 255);
color: #85c50f;
text-shadow: 0 1px 0 rgb(188, 197, 135), 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
.videoButton {
margin-top: 15px;
margin-bottom: 15px;
}
#bienvenido {
display: none;
}
Step 7: JSON
- Copia y pega el siguiente código en el archivo package.json
{
"name": "xbox-model-viewer",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "serve",
"build": "echo This is a static template, there is no bundler or bundling involved!"
},
"repository": {
"type": "git",
"url": "git+https://github.com/codesandbox-app/static-template.git"
},
"keywords": [],
"author": "Ives van Hoorne",
"license": "MIT",
"bugs": {
"url": "https://github.com/codesandbox-app/static-template/issues"
},
"homepage": "https://github.com/codesandbox-app/static-template#readme",
"devDependencies": {
"serve": "^11.2.0"
}
}Step 8: Probar La Aplicación
- Guarda tus cambios con Ctrl+S
- Haz click en Open in new window en la barra superior derecha
- Prueba y disfruta el modelo prototipo de aplicación Web
Be the First to Share
Recommendations
Make It Bridge
For the Home Contest
Game Design: Student Design Challenge
Comments