Modelo Prototipo: Next - Gen
by gregson.murcia in Circuits > Software
291 Views, 0 Favorites, 0 Comments
Modelo Prototipo: Next - Gen
En este tutorial les enseñaremos a como realizar un modelo prototipo de aplicación web con un sistema de diseño Material Design, en donde se debe explicar las partes de la nuevo Xbox Series X ademas de esto explicar que tipo de sistema multimedia es, todo esto programado con HTML y JavaScript.
En nuestro caso, se hizo uso del editor de código online CodeSandbox para la programación de nuestro modelo prototipo.
Introducción:
Este proyecto surgió gracias al planteamiento de un problema propuesto por el docente y PhD Juan Vicente Pradilla Cerón para la asignatura Arquitectura de Sistemas Multimedia del programa académico Ingeniería Multimedia de la Universidad Autónoma de Occidente. El proyecto se fundamenta en resolver la problemática ya antes dicha, la cual consiste en que los estudiantes de Ingeniería Multimedia de la UAO los cuales cursan la asignatura ASM presentan una falencia con respecto al material de estudio, ya que los temas tratados no cuentan con suficientes ejemplos que permitan un correcto aprendizaje de dichos temas vistos en la asignatura. Con lo cual, con la solución construida se espera que los estudiantes puedan aprender los elementos concretos de esta consola tales como la CPU, memoria y sistema operativo ademas sus caracteristicas tecnicas de estas.
Creación De Cuenta Y Proyecto En CodeSandbox
Para iniciar con el proceso de desarrollo , nos crearemos una cuenta en CodeSandbox, un editor de código en linea.
Al hacer uso del link anteriormente dado, nos deberá desplegar una ventana como se muestra en este paso, escogeremos la forma de creación de cuenta que queramos (Google Account o GitHub), y procederemos a iniciar sesión. Una vez iniciemos sesión nos dirigiremos a donde dice "New Sandbox", y buscamos "JS Vanilla" dentro de las plantillas que se nos muestran.
Importar Librerias Necesarias
Una vez creado nuestro proyecto empezaremos importando la librería, esta libreria es Material Designs Lite (MDL) (Material Design Lite references), la cual nos posibilita una gran variedad de material o un gran conjunto de componentes (botones,menus...) y plantillas para ser usado en nuestro proyecto. Además, se utilizo la librería de Bootstrap para darle estilo al texto, tablas y otros a la página.
Subir Contenidos Multimedia (Recursos)
Una vez hemos importado la librería, estamos listos para subir las imagenes y videos a utilizar, para esto podemos crear una carpeta (ver imagenes asociadas a este paso ) desde la esquina superior izquierda de nuestro proyecto, la nombraremos en nuestro caso "archivos", una vez la carpeta está creada, podemos empezar a arrastrar los contenidos desde nuestra computadora a la carpeta, y esperaremos a que sean subidas a nuestro proyecto.
Cargar Los Contenidos Multimedia
Una vez todos nuestros archivos están en nuestra carpeta, están listos para ser utilizados en nuestro proyecto, por lo que ahora, nos debemos de dirigir a la esquina superior derecha, y veremos un icono de tres (3) puntos, daremos clic ahí ,y después clic en storage management, veremos nuestros archivos subidos; simplemente daremos un clic sobre cada archivo que hemos subido, lo cual nos abrirá una nueva ventana por cada archivo subido, nos interesa el link de esa nueva ventana, por lo que copiaremos el link de cada una de las ventanas.
Desarrollo Del Prototipo Y Código
En nuestro modelo prototipo se hizo uso de tres (5) archivos, index.html, main.css, inicio.css, normalize.css y el principal.html.
El primero de ellos, el index.html, se uso como pantalla principal mostrando un video del desmontaje de la Xbox Series X, luego lo redirrecciona al principal.html para organizar la estructura de la pagina y librerías. El archivo main.css, para agregar los estilos de Material Design Lite. El archivo inicio.css y normalize.css son estilos para organizar el video del index. Link aqui para obtener los recursos del proyecto: https://drive.google.com/drive/folders/1cwlYfGQiWU...
Link aquí para el código en GitHub: https://github.com/GregoryInnovo/Next-Gen
HTML
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>Next-Gen</title>
<link
href="https://fonts.googleapis.com/css?family=Oswald:700|PT+Sans&display=swap"
rel="stylesheet"
/>
<link href="styles/normalize.css" rel="stylesheet" />
<link href="styles/inicio.css" rel="stylesheet" />
</head>
<body>
<div id="hero">
<div class="texture"></div>
<video loop muted autoplay preload="auto">
<source src="multimedia/vidprueba.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div class="caption">
<h1>Next-Gen</h1>
<button
onclick="window.location.href='principal.html'"
class="button type3"
>
Ir
</button>
</div>
</div>
<script src="js/object-fit-videos.js"></script>
<script src="js/inicio.js"></script>
</body>
</html>
principal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Xbox Series X</title>
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no" />
<!-- Web Application Manifest -->
<!-- Color the status bar on mobile devices -->
<meta name="theme-color" content="#2F3BA2" />
<!-- Material Design icons -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
rel="stylesheet"
href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"
/>
<link
rel="stylesheet"
href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<!-- Estilos -->
<link rel="stylesheet" href="styles/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@457&display=swap" rel="stylesheet">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
<div id="background-color-main" class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header" style="background-color: #007f00">
<div class="mdl-layout__header-row">
<!-- Título de la aplicación -->
<span class="mdl-layout-title" id="title-fixed" style="font-family: inherit;">Xbox Series X</span>
<img src="./multimedia/xbox-series-x.svg" id="logo-fixed">
</div>
</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="./index.html">Home</a>
<a class="mdl-navigation__link" href="./principal.html">Principal</a>
<a class="mdl-navigation__link" href="https://www.amazon.com/-/es/dp/B08H75RTZ8/ref=sr_1_1?__mk_es_US=ÅMÅŽÕÑ&crid=U6EO57MLI62Z&dchild=1&keywords=xbox+series+x&qid=1604354873&sprefix=xbox+%2Caps%2C237&sr=8-1">Comprar</a>
<a class="mdl-navigation__link" href="https://news.xbox.com/en-us/2020/03/16/xbox-series-x-tech/">Más información</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="sketchfab-embed-wrapper">
<iframe title="X-box Series X" id="image-principal" width="640" height="480" src="https://sketchfab.com/models/cafae37bff0a4881b14e211ee318c4ab/embed?autostart=0&ui_controls=1&ui_infos=1&ui_inspector=1&ui_stop=1&ui_watermark=1&ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/x-box-series-x-correct-rear-cafae37bff0a4881b14e211ee318c4ab?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">X-box Series X + correct rear</a>
by <a href="https://sketchfab.com/martinhajek?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">martinhajek</a>
on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
</div>
<!-- <img src="https://uploads.codesandbox.io/uploads/user/c8464b85-f482-4e10-8517-5969c1115bfe/1ri5-xbox-console.jpg" alt="imagenPrincipal" id="image-principal"> -->
<!-- <p style="text-align: center">Xbox Series X.</p> -->
<!-- <div class="mdl-layout__tab-panel is-active" id="overview">
-->
<!-- Parte de Miguel Angel incio-->
<div class="space-card">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
<img src="./multimedia/xbox-1.jpg" alt="imagenPrincipal" id="image-subsistema">
<h4 class="mdl-cell mdl-cell--12-col mdl-typography--text-center" style="font-family: 'Oswald', sans-serif;
"> <br></br>Xbox Series X</h4>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone mdl-typography--text-center">
<h5>"Power your dreams"</h5>
<div class="itemA">
<div class="contenedor-principal">
<p> <br></br>Las series x es la consola de nueva generacion de Xbox la cual innova en todos sus aspectos debido a su diseño innovador y su apartado tecnico, lo cual comparado con su predecesor es una mejora notoria debido a que esta nueva generacion emplea tecnologia diferentes</p>
</div>
</div>
<br>
</div>
</div>
<div class="mdl-card__actions">
<a href="https://www.xbox.com/es-CO/consoles/xbox-series-x" class="mdl-button">Más información</a>
</div>
</div>
</section>
</div>
<!-- Parte de Miguel Angel final-->
<!-- Parte de Gregson incio-->
<h5 class="mdl-cell mdl-cell--12-col" style="color:white">Sistema Multimedia Distribuido Multipropósito (SMDM)</h5>
<img src="./multimedia/Xboxseriesx-50.jpg" alt="imagenPrincipal" id="image-subsistema">
<div class="space-card">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
<h2 class="mdl-cell mdl-cell--12-col">¿Por qué la Xbox Series X es un SMDM?</h2>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h4>Subsistemas</h4>
<div class="itemA">
<div class="contenedor-principal">
<div class="table-responsive">
<table class="table table-hover table-dark">
<tbody>
<tr>
<td>Nombre</td>
<td>Cantidad</td>
<td>Propósito</td>
</tr>
<tr>
<td>Consola Xbox Series X</td>
<td>1</td>
<td>Consola de videojuegos para reproducir, almacenar y jugar los nuevos contenidos multimedia de la nueva generación.</td>
</tr>
<tr>
<td>
Control Xbox Inalambrico Serie X
</td>
<td>1</td>
<td>Control inalámbrico que se conecta a la consola, mejoras en la ergonomía y retrocompatibilidad con otros dispositivos.</td>
</tr>
</tbody>
</table>
</div>
</div>
<h4>Características del Elemento CPU de Referencia - Subsistema: Consola Xbox Series X </h4>
<div class="contenedor-principal">
<div class="table-responsive">
<table class="table table-hover table-dark">
<tbody>
<tr>
<td>Atributo</td>
<td>Descripción</td>
<td>Justificación</td>
</tr>
<tr>
<td>
Frecuencia de reloj
</td>
<td>3,8 GHz</td>
<td>La consola corre a dicha frecuencia cuando el SMT está desactivado. Haciendo posible correr juegos de la nueva generación de consolas a una resolución de UHD 4K.</td>
</tr>
<tr>
<td>
N° de núcleos
</td>
<td>8</td>
<td>Se usan 7 núcleos para los juegos y 1 para el correcto funcionamiento del sistema operativo y visualización del contenido por la consola.</td>
</tr>
<tr>
<td>
N° de hilos
</td>
<td>16</td>
<td>Dependiendo si el SMT está activo se usarán en su totalidad. Haciendo posible cambiar de forma instantánea por cualquier juego o aplicación.</td>
</tr>
</tbody>
</table>
<h4>Más información de los subsistemas</h4>
<div class="contenedor-principal">
<audio src="./multimedia/audio1.mpeg" controls loop></audio>
</div>
<hr>
<div class="contenedor-principal">
<audio src="./multimedia/audio2.mpeg" controls loop></audio>
</div>
</div>
</div>
<br>
</div>
</div>
<h3>Elementos concretos</h3>
<div style="text-align:center;">
<img src="./multimedia/imagenes/fuente_alimentacion.png" alt="fuente_alimentacion" width="65%">
<h6>Fuente alimentación</h6>
<img src="./multimedia/imagenes/mando.png" alt="mando" width="65%">
<h6>Mando</h6>
<img src="./multimedia/imagenes/placas.png" alt="placas" width="65%">
<h6>Placas</h6>
<img src="./multimedia/imagenes/primera_placa.png" alt="primera_placa" width="65%">
<h6>Primera placa</h6>
<img src="./multimedia/imagenes/segunda_placa.png" alt="segunda_placa" width="65%">
<h6>Segunda placa</h6>
<img src="./multimedia/imagenes/ssd.png" alt="ssd" width="65%">
<h6>SSD</h6>
<img src="./multimedia/imagenes/ventilacion.png" alt="ventilacion" width="65%">
<h6>Ventilación</h6>
</div>
</div>
<div class="mdl-card__actions">
<a href="https://www.somosxbox.com/destripando-xbox-series-x-componentes/875712" class="mdl-button">Más información</a>
</div>
</section>
</div>
<!-- Parte de Gregson final-->
<!-- Parte de Santiago Marmolejo incio-->
<!-- <img src="./multimedia/partes.jpg" alt="imagenPrincipal" id="image-subsistema"> -->
<iframe style="height: 100%;" src="https://www.youtube.com/embed/7Fjn4GRw8qE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="text-align:center" scrolling="yes"></iframe>
<h6 style="text-align:center;">Créditos: Canal de Austin Evans</h6>
<div class="space-card">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
<h4 class="mdl-cell mdl-cell--12-col">Características técnicas</h4>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Totalmente re diseñada</h5>
<div class="itemA">
<div class="contenedor-principal">
<p>La nueva Xbox Serie X cuenta con unas Características tecnicas muy potentes que nos permitiran
jugar nuestros titulos favoritos en resolución hasta 4k UHD y una cadencia de ímagen de hasta 120 fotogramas por segundo.
</p>
</div>
<br>
</div>
<div class="itemB">
<div class="contenedor-principal">
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Componente</th>
<th>Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">CPU</td>
<td>Procesador de 8 núcleos a 3,8 GHz</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">GPU</td>
<td>Procesador gráfico personalizado con 52 unidades de cálculo a 1,825 GHz</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Memoria</td>
<td>16 GB GDDR6 con bus de 320 bits</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Ancho de banda de la memoria</td>
<td>10 GB a 560 GB/s y 6 GB a 336 GB/s</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Rendimiento de E/S</td>
<td>2,4 GB/s (datos sin comprimir) y 4,8 GB/s (datos comprimidos)</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Almacenamiento Interno</td>
<td>Unidad SSD personalizada de 1 TB con interfaz NVMe</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Unidad óptica</td>
<td>Lector de Blu-ray 4K</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Sonido</td>
<td>Dolby Digital 5.1, DTS 5.1, Dolby TrueHD con Atmos y LPCM de hasta 7.1 canales</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Conectividad</td>
<td>1 x HDMI 2.1, 3 x USB 3.1, 1 x Gigabit Ethernet y ranura para tarjetas de expansión </td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Conectividad Inalámbrica</td>
<td>WiFi 802.11ac. Conexión de radio de doble banda para accesorios</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Dimensiones</td>
<td>151 x 151 x 301 mm</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Peso</td>
<td>4,44 kg</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="mdl-card__actions">
<a href="https://www.xbox.com/es-CO/consoles/xbox-series-x#specs%22 class=mdl-button">Mas información</a>
</div>
</div>
</section>
</div>
<!-- Parte de Santiago Marmolejo fin-->
<!-- Parte de Juan Daniel incio-->
<img src="./multimedia/controlXbox.png" alt="imagenPrincipal" id="image-subsistema">
<div class="space-card">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
<h4 class="mdl-cell mdl-cell--12-col">Características Xbox Wireless Controller de Xbox Series X</h4>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5></h5>
<div class="itemA">
<div class="contenedor-principal">
<p style="text-align: justify">Microsoft ha introducido pequeños cambios en las líneas de diseño del chasis del Xbox
Wireless Controller que encontraremos en Xbox Series X. Continuismo deliberado para mantener la confianza depositada en el mando
que ya vimos en Xbox One; que fue, a su vez, una evolución clara del de Xbox 360.</p>
</div>
<br>
</div>
<div class="itemB">
<div class="contenedor-principal">
<p style="text-align: justify">El D-pad es uno de los cambios más visibles y sensibles. Rendimiento y accesibilidad fueron las palabras
utilizadas por Whitaker para comentar el cambio, que reconoce basarse en lo que aprendieron con el control del Elite y en el uso mayoritario
que se le da al D-pad en la comunidad de jugadores de videojuegos en general.</p>
</div>
<br>
</div>
<div class="itemC">
<div class="contenedor-principal">
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Características</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">- Batería por pilas AA; alimentación USB-C. Reemplazable</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">- Integración del botón Compartir</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">- Redondeo ligero en los botones superiores</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">- Reducción en los bordes de los gatillos LT y RT</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">- Micrófono y altavoz incorporados</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">- Puerto auriculares 3.5</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="mdl-card__actions">
<a href="https://as.com/meristation/2020/04/08/noticias/1586344765_528935.html" class="mdl-button">Mas información</a>
</div>
</section>
</div>
<!-- Parte de Juan Daniel fin-->
<img src="./multimedia/desmotajeTotal.PNG" alt="imagenPrincipal" id="image-subsistema">
<h6 style="text-align:center;">Créditos ifixit</h6>
<div class="space-card">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
<h4 class="mdl-cell mdl-cell--12-col">Potencia, retrocompatibilidad y más</h4>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Xbox Series X una nueva generacion</h5>
<div class="itemA">
<div class="contenedor-principal">
<p>Los FLOPS son la cantidad de operaciones en punto flotante (operaciones con números, que esto no deja de ser algo matemático)
que un sistema puede hacer cada segundo y cuando Microsoft nos dice que Xbox Series X tiene 12 TFLOPS quiere decir que cuenta con la capacidad de hacer 12 x 10^12 millones de
operaciones de coma flotante en un segundo, o 12.000.000.000 FLOPS.</p>
</div>
<br>
</div>
<div class="itemB">
<div class="contenedor-principal">
<p>Xbox Series X será compatible con miles de videojuegos desde su lanzamiento gracias a la retrocompatibilidad mejorada en la que
están trabajando en un departamento dedicado de la compañía. Con el compromiso de que la práctica totalidad de juegos de Xbox One y una vasta cantidad de Xbox 360
y la Xbox original puedan ejecutarse en la nueva generación de Microsoft,</p>
</div>
<br>
</div>
<div class="itemC">
<div class="contenedor-principal">
<h1>Xbox Series X vs Xbox One</h1>
</div>
</div>
<div class="itemD">
<div class="contenedor-principal">
<br>
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Componente</th>
<th>Xbox Series X</th>
<th>Xbox One</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">CPU</td>
<td>Procesador de 8 núcleos a 3,8 GHz</td>
<td>Procesador de 8 núcleos a 2.3GHz por núcleo</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">RAM</td>
<td>16 GB de RAM GDDR6</td>
<td>12 GB de RAM GDDR5</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">GPU</td>
<td>12 teraflops de potencia y 52 unidades de cómputo que funcionan a 1.825GHz</td>
<td>6 teraflops de potencia, 40 unidades de cómputo y funcionando a 1.172GHz</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Almacenamiento</td>
<td>Almacenamiento SSD (unidad de estado sólido)</td>
<td>Disco duro de 1TB</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Precio</td>
<td>$ 499</td>
<td>$ 299</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="itemE">
<div class="contenedor-principal">
<h1>Retrocompatibilidad</h1>
</div>
</div>
<div class="itemF">
<div class="contenedor-principal">
<p>Microsoft ha confirmado que Xbox Series X/S será totalmente retrocompatible con los juegos a los que se puede jugar en Xbox One, sin importar si son de esta consola, de 360 o de la primera Xbox.</p>
</div>
</div>
</div>
<div class="mdl-card__actions">
<a href="https://www.hobbyconsolas.com/reportajes/teraflop-centro-discordia-ps5y-xbox-series-x-710847" class="mdl-button">Mas información</a>
</div>
</div>
</section>
</div>
</section>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading">Creadores</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Miguel Angel Lasso</a></li>
<li><a href="#">Gregson Murcia Castro</a></li>
<li><a href="#">Sergio Andres Escallon Medina</a></li>
<li><a href="#">Santiago Marmolejo Cifuentes</a></li>
<li><a href="#">Juan Daniel Cano Acosta</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading">Detalles</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">UAO</a></li>
<li><a href="#">Arquitectura de Sistemas Multimedia</a></li>
<li><a href="https://drive.google.com/drive/folders/1cwlYfGQiWUjUqROR4eKeoU7XkynpeJle?usp=sharing">Recursos</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading">Tecnología</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Material Design Lite</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-logo">
Más información en
</div>
<ul class="mdl-mega-footer--link-list">
<li><a href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
<li><a href="http://www.apache.org/licenses/LICENSE-2.0">Licencia</a></li>
<li><a href="https://www.instructables.com/Tutorial-Modelo-Prototipo-T%C3%A9cnica-Pomodoro/">Instructables</a></li>
<li><a href="https://youtu.be/CiGMWMHPt68">Video Tutorial</a></li>
</ul>
</div>
</footer>
</main>
</div>
<script src="main.js"></script>
</body>
</html>
main.css
html,
body {
font-family: "Helvetica";
margin: 0;
padding: 0;
background-color: #3a3a3a;
}
#cover {
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
background-color: #e0e0e0;
background-image: url(../images/artwork-not-found.png);
position: relative;
background-size: cover;
background-position: center;
}
.volumecard {
position: absolute;
z-index: 6;
height: 56px;
width: 320px;
bottom: 150px;
left: -120px;
padding: 0 16px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
#progress {
z-index: 4;
}
#PomodoroSeccion {
background-color: #fffffff8;
font-size: 30px;
text-decoration-line: none;
}
#title1 {
font-size: 30px;
}
#num {
font-size: 30px;
}
h2 {
display: inline;
}
#start {
margin: 50px;
padding: 100px;
text-decoration-line: none;
}
.btn-primary {
text-decoration-line: none;
}
#time {
margin: 0 16px 0 0;
}
.mdl-demo .mdl-layout__header-row {
padding-left: 40px;
background-color: #007f00;
}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {
font-size: inherit;
}
.button.type3 {
color: #435a6b;
}
.button.type3.type3::after,
.button.type3.type3::before {
content: "";
display: block;
position: absolute;
width: 20%;
height: 20%;
border: 2px solid;
transition: all 0.6s ease;
border-radius: 2px;
}
.button.type3.type3::after {
bottom: 0;
right: 0;
border-color: transparent #435a6b #435a6b transparent;
}
.button.type3.type3::before {
top: 0;
left: 0;
border-color: #435a6b transparent transparent #435a6b;
}
.button.type3.type3:hover:after,
.button.type3.type3:hover:before {
border-color: #435a6b;
width: 100%;
height: 100%;
}
.mdl-demo .mdl-layout__tab-bar-button {
display: none;
}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button {
display: none;
}
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {
overflow: visible;
}
.mdl-demo .mdl-layout__tab-bar-container {
height: 64px;
}
.mdl-demo .mdl-layout__tab-bar {
padding: 0;
padding-left: 16px;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {
height: 64px;
line-height: 64px;
}
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after {
background-color: white;
height: 4px;
}
.mdl-demo main > .mdl-layout__tab-panel {
padding: 8px;
padding-top: 48px;
}
.mdl-demo .mdl-card {
height: auto;
display: flex;
flex-direction: column;
}
.mdl-demo .mdl-card > * {
height: auto;
}
.mdl-demo .mdl-card .mdl-card__supporting-text {
margin: 40px;
flex-grow: 1;
padding: 0;
color: inherit;
width: calc(100% - 80px);
}
.mdl-demo.mdl-demo .mdl-card__supporting-text h4 {
margin-top: 0;
margin-bottom: 20px;
}
.mdl-demo .mdl-card__actions {
margin: 0;
padding: 4px 40px;
color: inherit;
}
.mdl-demo .mdl-card__actions a {
color: #00bcd4;
margin: 0;
display: flex;
align-items: center;
width: 100%;
height: auto;
}
.mdl-demo .mdl-card__actions a:hover,
.mdl-demo .mdl-card__actions a:active {
color: inherit;
background-color: transparent;
}
.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.mdl-demo #add {
position: absolute;
right: 40px;
top: 36px;
z-index: 999;
}
.mdl-demo .mdl-layout__content section:not(:last-of-type) {
position: relative;
margin-bottom: 48px;
}
.mdl-demo section.section--center {
max-width: 860px;
}
.mdl-demo #features section.section--center {
max-width: 620px;
}
.mdl-demo section > header {
display: flex;
align-items: center;
justify-content: center;
}
.mdl-demo section > .section__play-btn {
min-height: 200px;
}
.mdl-demo section > header > .material-icons {
font-size: 3rem;
}
.mdl-demo section > button {
position: absolute;
z-index: 99;
top: 8px;
right: 8px;
}
.mdl-demo section .section__circle {
display: flex;
align-items: center;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 1;
}
.mdl-demo section .section__text {
flex-grow: 1;
flex-shrink: 0;
padding-top: 8px;
}
.mdl-demo section .section__text h5 {
font-size: inherit;
margin: 0;
margin-bottom: 0.5em;
}
.mdl-demo section .section__text a {
text-decoration: none;
}
.mdl-demo
section
.section__circle-container
> .section__circle-container__circle {
width: 64px;
height: 64px;
border-radius: 32px;
margin: 8px 0;
}
.mdl-demo section.section--footer .section__circle--big {
width: 100px;
height: 100px;
border-radius: 50px;
margin: 8px 32px;
}
.mdl-demo .is-small-screen section.section--footer .section__circle--big {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 8px 16px;
}
.mdl-demo section.section--footer {
padding: 64px 0;
margin: 0 -8px -8px -8px;
}
.mdl-demo section.section--center .section__text:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.13);
}
.mdl-demo .mdl-card .mdl-card__supporting-text > h3:first-child {
margin-bottom: 24px;
}
.mdl-demo .mdl-layout__tab-panel:not(#overview) {
background-color: white;
}
.mdl-demo #features section {
margin-bottom: 72px;
}
.mdl-demo #features h4,
#features h5 {
margin-bottom: 16px;
}
.mdl-demo .toc {
border-left: 4px solid #c1eef4;
margin: 24px;
padding: 0;
padding-left: 8px;
display: flex;
flex-direction: column;
}
.mdl-demo .toc h4 {
font-size: 0.9rem;
margin-top: 0;
}
.mdl-demo .toc a {
color: #4dd0e1;
text-decoration: none;
font-size: 16px;
line-height: 28px;
display: block;
}
.mdl-demo .mdl-menu__container {
z-index: 99;
}
.middle {
width: 50%;
max-width: 500px;
}
.slider-container {
position: relative;
}
.slider-container .bar {
position: absolute;
z-index: 1;
left: 2px;
top: 7px;
width: 100%;
height: 10px;
border-radius: 5px;
background-color: #c99882;
overflow: hidden;
}
.slider-container .bar .fill {
display: block;
width: 0;
height: 100%;
background-color: #ee4b00;
}
.slider-container .slider {
position: relative;
z-index: 2;
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
background-color: transparent;
}
.slider-container .slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
background-color: #ee4b00;
border-radius: 50%;
cursor: pointer;
outline: none;
box-shadow: 0 0 0 0 rgba(244, 203, 184, 0.1);
transition: 0.3s ease-in-out;
}
.slider-container .slider::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 20px rgba(244, 203, 184, 0.2);
}
.slider-container .slider:active::-webkit-slider-thumb {
box-shadow: 0 0 0 40px rgba(244, 203, 184, 0.2);
}
.bAudio {
background-image: url("imagenes/default.PNG");
background-color: rgb(250, 159, 117);
border: none;
width: 48px;
height: 48px;
cursor: pointer;
outline: none;
}
.contenedor-principal {
display: flex;
align-items: center;
width: 100%;
height: auto;
}
#container-pomodoro {
height: 200px;
width: 700px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
}
/*timers*/
.label {
align-self: center;
justify-self: center;
font-size: 18px;
font-weight: bold;
}
#work {
grid-area: 1 / 2 / 1 / 2;
}
#break {
grid-area: 1 / 4 / 1 / 4;
}
#cycles {
grid-area: 1 / 3 / 1 / 3;
}
.timer {
display: flex;
align-self: center;
justify-self: center;
font-size: 30px;
font-weight: bold;
}
p {
margin: 0;
padding: 0;
font-size: 18px;
}
#counter {
grid-area: 2 / 3 / 2 / 3;
color: red;
}
#work-timer {
grid-area: 2 / 2 / 2 / 2;
}
#break-timer {
grid-area: 2 / 4 / 2 / 4;
}
/*buttons*/
.btna {
align-self: center;
justify-self: center;
width: 100;
height: 30;
size: 5%;
font-size: 12px;
}
#start-buttom {
grid-area: 3 / 2 / 3 / 2;
}
#reset-buttom {
grid-area: 3 / 3 / 3 / 3;
}
#stop-buttom {
grid-area: 3 / 4 / 3 / 4;
}
audio {
display: flex;
width: 100%;
align-items: left;
flex-direction: center;
}
#background-color-main {
background-color: #161616;
}
#title-fixed {
padding-left: 4%;
padding-right: 2%;
}
#logo-fixed {
height: 65%;
margin-inline-start: auto;
}
p {
font-size: 14px;
}
#image-principal {
/* height: auto; */
height: 600px;
width: 100%;
}
#image-subsistema {
height: auto;
width: 100%;
object-fit: cover;
}
.space-card {
margin-top: 5%;
margin-bottom: 5%;
}
::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 568px) {
#image-principal {
height: 100%;
width: 100%;
object-fit: cover;
}
#table-adapt {
font-size: 11px;
}
table {
width: 100%;
height: auto;
}
#image-principal {
height: 500px;
width: 100%;
}
}
inicio.css
#hero {
height:100vh;
width:100%;
background:black;
display:flex;
align-items:center;
justify-content: center;
}
#hero::after {
width:100%;
height:100%;
content: '';
position:absolute;
z-index:10;
top:0;
left:0;
background:rgba(0,0,0,0.5)
}
#hero video {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:5;
object-fit:cover;
font-family:'object-fit: cover';
}
#hero .texture {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:15;
background:url('../texture.png');
}
#hero .caption {
position:relative;
z-index:20;
text-align:center;
color:#ffffff;
}
#hero .caption h1 {
text-transform: uppercase;
font-size:2em;
font-family: 'Oswald', sans-serif;
margin-bottom:0.5rem;
}
#hero .caption h2 {
font-weight:400;
font-size:1.5rem;
margin:0;
font-family: 'PT Sans', sans-serif;
}
@media screen and (min-width:768px)
{
#hero .caption h1 {
font-size:2.5rem;
}
#hero .caption h2 {
font-size:1.75rem;
}
}
@media screen and (min-width:992px)
{
#hero .caption h1 {
font-size:3rem;
}
#hero .caption h2 {
font-size:2rem;
}
}
.button{position:relative;padding:1em 1.5em;border:none;background-color:transparent;cursor:pointer;outline:0;font-size:18px;margin:1em .8em}
.button.type3{color:#ffffff}
.button.type3.type3::after,.button.type3.type3::before{content:"";display:block;position:absolute;width:20%;height:20%;border:2px solid;transition:all .6s ease;border-radius:2px}
.button.type3.type3::after{bottom:0;right:0;border-color:transparent #ffffff #ffffff transparent}
.button.type3.type3::before{top:0;left:0;border-color:#ffffff transparent transparent #ffffff}
.button.type3.type3:hover:after,.button.type3.type3:hover:before{border-color:#ffffff;width:100%;height:100%}
@media screen and (min-width:1200px)
{
#hero .caption h1 {
font-size:4rem;
}
#hero .caption h2 {
font-size:2.5rem;
}
}
normalize.css
Disfruta El Proyecto
Prueba el proyecto en el siguiente enlace: https://74d6x.csb.app