Integrantes:

FLORES FLORES BRIAN EDUARDO

MORALES MAYORGA MIGUEL ALEJANDRO

NRC

14191

Ingeniero

ROLANDO MARCELO ALVAREZ VEINTIMILLA

Materia:

INVESTIGACIÓN EN LA INGENIERÍA DE SOFTWARE

Fecha
22/11/2023
Antecedentes
El día Miércoles 22 de noviembre del año 2023 se solicitó un trabajo de investigación y
resolución a un problema que los estudiantes habrían de proponer para su resolución, por lo
qué, los estudiantes Miguel Morales y Brian Flores eligieron la traducción automática de
letras dentro de aplicaciones de música como Spotify o YouTube music.
Introducción
En un mundo cuasi totalmente globalizado, la difusión de información y de ideas debe ser
totalmente libre de cualquier barrera y, por lo tanto, la diversidad de lenguas existentes no
debería
constituir un obstáculo (Mercedes, P. H. 2002). Es por esto que el uso de los sistemas de
traducción automática (TA) son tan importantes para nuestra civilización actualmente. La
traducción automática implica el uso de inteligencia artificial para convertir un texto de un
idioma a otro de manera automática, sin intervención humana. En la actualidad, la traducción
automática va más allá de una traducción literal, ya que transmite el significado completo del
texto original en el idioma de destino. Este enfoque implica analizar todos los elementos del
texto y comprender cómo las palabras se relacionan entre sí (¿En qué consiste la traducción
automática? aws. s.f.). para lograr que estos traductores puedan un contexto y así brindar una
traducción más fiel, usan modelos neuronales, los modelos neuronales constituyen el estado
de vanguardia de la traducción automática. Numerosas empresas de traducción y conocidas
páginas web están utilizando estas tecnologías con éxito Casacuberta (Nolla, F., Peris Abril,
Á. 2017). Nosotros trataremos la traducción automática de letras de canciones dentro de
plataformas de streaming como Spotify o Youtube Music, por esto es importante la correcta
implementación de un traductor usando modelos neuronales y así presentar una traducción
que siga el contexto de las canciones, y de esta forma, los usuarios puedan tener una mejor
comprensión de las canciones que tanto les gusta y consume a través de su paso por la
aplicación.

Desarrollo
El desarrollo de un Traductor Automático de las letras de las canciones contenidas en la
plataforma de streaming Spotify, al idioma de usuario final manteniendo el contexto y
sentido que se desea transmitir mejorará la comprensión del escucha.
¿Qué es un traductor automático?
La traducción automática es una herramienta capaz de traducir un texto redactado desde un
lenguaje humano a otro lenguaje meta sin la ayuda
o intervención de seres humanos.
El TA se distingue en dos enfoques, en normas y el
enfoque basado en corpus.
El enfoque en norma se puede dividir en sistema de
traducción directa, el sistema de interlingua y el
sistema de transferencia.La traducción directa
consiste un una interpretación inmediata del texto,
el sistema es usado para resolver ambigüedades e
identificar expresiones correctamente.El sistema de
interlingua consiste en dos partes: análisis y
generación. En el análisis se transforma el texto fuente al sistema de interlingua y en el
proceso de la generación se pasa del sistema de interlingua al texto traducido, el sistema
traduce a un lenguaje neutral . El sistema de transferencia consiste en 3 etapas. Análisis,
transferencia y generación.

El enfoque basado en corpus se divide en traducción automática basada en ejemplos y la

traducción automática basada en estadísticas. La traducción basada en ejemplos consiste en
reutilizar los resultados que ya se han traducido anteriormente. En la traducción automática
basada en estadística, las traducciones se generan alineando frases, grupos de palabras y
palabras individuales de textos paralelos. De estos textos, calculamos las probabilidades de
que en una frase del Lenguajes AQ corresponda a una palabra en una frase del Lenguaje B
(Li-Ann Croes 2019).

Google Translate
Google Translate usa una tecnología llamada Google Neural Machine Translation, traducido
como: traducción automática neuronal de Google. Esta tecnología fue presentada en
septiembre del 2016, esta utiliza deep learning para generar traducciones más congruentes y
correctas. En una expansión el sistema de traducción automática empezó a usar una
herramienta llamada Zero-Shot Translation, la cual ayuda a expandir los límites de Google
Translate hasta más de 100 lenguajes (IIEMD, Instituto Internacional Español de Marketing
Digital. 2016).

DeepL
EL traductor automático DeepL fue introducido un agosto del 2017, fue un grán eco entre la
prensa y usuarios, por los test ad hoc publicados en medio de noticias y sus traducciones que
arrojaban resultados sorprendentes. Su red Neuronal fue entrenada con aproximadamente mil
millones de datos recopilados, y la corrección de errores está a cargo de cientos de
lexicógrafos y lingüistas (Roiss, S., & González, P. Z. 2020).
Visto el funcionamiento de los traductores automáticos desde que son hasta ejemplos de los
traductores más utilizados del mundo, ahora debemos hablar de las plataformas de Streaming
en donde deseamos aplicar las traducciones de canciones, en este caso deseamos enfocarnos
en la plataforma Spotify, por una de las más usadas en este rubro de la música y por ya haber
implementado la traducción de canciones aunque en un porcentaje minúsculo, con muchas
dependencias y sin la capacidad de elegir el idioma deseado.

Spotify
Spotify es uno de los servicios de streaming digital más usados en el mundo. Ha estado
circulando desde el año 2007 y tiene más de 100 millones de usuarios en 178 países.
Hoy en día, la compañía es, al lado de YouTube, Apple Music y Deezer, una pieza
fundamental en la industria digital de la música. Cuenta con 180M de usuarios, 420M de
usuarios activos y 82 M de canciones.
En al año 2021 un 18 de noviembre, Spotify agregó la función de un modo karaoke en el que
la letra de las canciones se transmite en tiempo real y pueden ser leídas a un idioma preferido,
sin embargo, no todas las canciones cuentan con esta función (Luis Miguel Paredes 2023)

Desarrollo de prototipo
Conociendo ya todas estas herramientas, plataforma y conceptos, nos propusimos a
desarrollar nuestro prototipo de traductor para canciones de spotify.
Utilizando Visual Studio Code comenzamos por desarrollar una interfaz similar a Spotify y
agregar una simulación simple de cómo se vería la aplicación con las letras traducidas.
CSS
@import
url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;70
0&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 62.5%;
}

body {
font-family: 'Rubik';
}

.container {
display: grid;
grid-template-columns: 30rem 1fr;
grid-template-rows: min-content 1fr min-content;
margin-bottom: 8rem;
}

/* ********************************** */
/* TOPBAR */
/* ********************************** */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #101010;

position: fixed;
z-index: 30;
top: 0;
right: 0;
width: calc(100% - 30rem);
}
.container-arrows {
display: flex;
gap: 3rem;
}

.container-arrow-left,
.container-arrow-right {
background-color: #0a0a0a;
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.container-arrow-left i,
.container-arrow-right i {
color: #fff;
font-size: 1.4rem;
}

.buttons-user {
display: flex;
align-items: center;
gap: 3rem;
}

.btn-register {
color: #a7a7a7;
font-weight: 700;
text-decoration: none;
font-size: 1.6rem;
}

.btn-register:hover {
color: #fff;
transform: scale(1.04);
}

.btn-login {
text-decoration: none;
}

.btn-full {
font-size: 1.6rem;
color: #000;
padding: 1.5rem 2rem;
border-radius: 2rem;
font-weight: 700;
background-color: #fff;
border: none;
outline: none;
cursor: pointer;
}

.btn-full:hover {
transform: scale(1.04);
}

/* ********************************** */
/* SIDEBAR */
/* ********************************** */
.navbar {
background-color: #000;
color: #b3b3b3;
padding-top: 2.4rem;

grid-row: 1/3;
grid-column: 1/2;

display: flex;
flex-direction: column;
gap: 4rem;

position: fixed;
width: 30rem;
height: calc(100vh - 8rem);
}

.logo-svg {
color: #fff;
width: 18rem;
padding: 0 2.4rem;
}
.nav-main {
padding: 0 2.4rem;

display: flex;
flex-direction: column;
gap: 3rem;
}

.nav-main li {
list-style: none;
}

.nav-main li a {
text-decoration: none;
font-size: 1.6rem;
color: #b3b3b3;

display: flex;
align-items: center;
justify-content: flex-start;
gap: 2rem;
font-weight: 600;
text-overflow: ellipsis;
transition: all 0.3s ease;
}

.nav-main li a:hover {
color: #fff;
}

.nav-main li a i {
font-size: 2rem;
}

.extra-options {
display: inline-flex;
flex-direction: column;
gap: 3rem;

padding: 0 2.4rem;
margin-top: 1.5rem;
flex: 1;
}

.extra-options button {
border: none;
outline: none;
background: transparent;
color: #b3b3b3;
text-align: left;
font-size: 1.6rem;
font-weight: 600;

display: flex;
gap: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
}

.extra-options button i {
font-size: 2rem;
}

.extra-options button:hover {
color: #fff;
}

.container-links {
display: flex;
flex-direction: column;
padding: 0 2.5rem;

gap: 2rem;
margin-bottom: 5rem;
}

.btn-language {
border: 1px solid #727272;
background: none;
color: #fff;
padding: 1rem;
width: 18rem;
border-radius: 2rem;
display: flex;
justify-content: center;
 align-items: center;
gap: 0.5rem;
font-family: inherit;
font-weight: 700;
font-size: 1.3rem;
cursor: pointer;
transition: all 0.4s ease;
}

.btn-language:hover {
transform: scale(1.05);
}

.btn-language i {
font-size: 1.8rem;
}

.container-links-legal {
display: flex;
flex-wrap: wrap;
gap: 2rem;

margin-bottom: 3rem;
}

.container-links-legal a {
text-decoration: none;
color: #b3b3b3;
font-size: 1.2rem;
}

/* ********************************** */
/* CONTENIDO PRINCIPAL */
/* ********************************** */
.main-content {
grid-row: 1/3;
grid-column: 2/-1;

background-color: #121212;
padding: 2.5rem;

display: flex;
flex-direction: column;
 gap: 3rem;
}

.title-playlist {
font-size: 2.4rem;
color: #fff;
cursor: pointer;
font-weight: 600;
}

.title-playlist:hover {
text-decoration: underline;
}

.container-name-concentracion,
.container-name-spotify-playlists {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 2rem;
}

.container-card-concentracion,
.container-card-spotify-playlists {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 2.4rem;
}

.card-concentracion,
.card-spotify-playlists {
background-color: #181818;
border-radius: 0.5rem;
padding: 1.6rem;
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
cursor: pointer;
position: relative;
}

.card-concentracion:hover,
.card-spotify-playlists:hover {
background-color: #282828;
}

.card-img img {
width: 100%;
border-radius: 0.5rem;
}

.card-img {
overflow: hidden;
}

.card h2 {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1.6rem;
color: #fff;
font-weight: 600;
}

.card p {
font-size: 1.3rem;
color: #b3b3b3;
font-weight: 400;
line-height: 1.5;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

/* ********************************** */
/* FOOTER */
/* ********************************** */
.footer {
grid-row: 3/4;
grid-column: 2/-1;
color: #fff;
background-color: #121212;
padding: 6rem 4rem;

display: flex;
flex-direction: column;
 gap: 5rem;
}

.container-links-footer {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #2a2a2a;
padding-bottom: 5rem;
}

.links-footer {
display: flex;
flex-direction: column;
gap: 1.5rem;
font-size: 1.6rem;
}

.links-footer a {
text-decoration: none;
color: #a7a7a7;
}

.links-footer a:hover {
text-decoration: underline;
color: #fff;
}

.social-icons {
display: flex;
gap: 2rem;
}

.container-icon {
color: #fff;
background-color: #292929;
border-radius: 50%;
width: 4.2rem;
height: 4.2rem;

display: flex;
justify-content: center;
align-items: center;
}
.container-icon:hover {
background-color: #727272;
}

.container-icon i {
font-size: 1.7rem;
}

.copyright p {
color: #a7a7a7;
font-size: 1.6rem;
}

/* ********************************** */
/* BANNER FINAL */
/* ********************************** */
.banner-bottom {
display: flex;
justify-content: space-between;
align-items: center;

padding: 1rem 2rem;

background-image: linear-gradient(90deg, #af2896, #509bf5);
color: #fff;

position: fixed;
bottom: 0;
z-index: 20;
width: 100%;
height: 8rem;
}

.banner-bottom .content {
display: flex;
flex-direction: column;
gap: 1rem;
}

.banner-bottom .content span {

font-size: 1.4rem;
text-transform: uppercase;
}
.banner-bottom .content p {
font-size: 1.6rem;
}

/* Clases Adicionales */
.transparent {
opacity: 0.9;
}

.btn-play {
width: 5rem;
height: 5rem;

display: flex;
justify-content: center;
align-items: center;

background-color: #1ed760;
border: none;
outline: none;
border-radius: 50%;
position: absolute;
top: 55%;
left: 52%;
transform: translate(50%, -50%);
cursor: pointer;
}

.btn-play i {
font-size: 2.3rem;
padding-left: .5rem;
}

/* Estilo actualizado para el modal */

.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 50px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
/* Valor alto para asegurar que esté por encima de otros elementos
*/
display: flex;
/* Usar flexbox para dividir en dos partes */
flex-direction: row;
/* Disponer los elementos en fila */
align-items: center;
/* Alinear verticalmente al centro */
border-radius: 20px;
}

.modal-content {
flex: 1;
/* Ocupar todo el espacio disponible */
padding: 10px;
/* Ajustar el espacio interno según sea necesario */
}

.left-content,
.right-content {
flex: 1;
/* Ocupar mitad del espacio disponible */
}
.btn-close {
background-color: #1DB954;
color: black;
border: none;
padding: 10px;
cursor: pointer;
margin-left: 10px;
/* Margen izquierdo para separar del contenido */
border-radius: 15px;
}

JAVASCRIPT
// Función para crear el botón y el modal
const createButton = card => {
// Crear el botón
const button = document.createElement('button');
 button.innerHTML = '<i class="fa-solid fa-play"></i>';
button.classList.add('btn-play');

// Crear el modal
const modal = document.createElement('div');
modal.classList.add('modal');

// Dividir el modal en dos partes (izquierda y derecha)

modal.innerHTML = `
<div class="modal-content left-content">
<p><b>INGLES</b><br>
I've had too much to drink tonight
And I know it's sad, but this is what I think about
And I wake up in the middle of the night
It's like I can feel time moving
How can a person know everything at 18 but nothing at 22?
And will you still want me when I'm nothing new?</p>
</div>
<div class="modal-content right-content">
<p><b>ESPAÑOL</b><br>
He bebido demasiado esta noche
Y sé que es triste, pero esto es en lo que pienso
Y despierto en medio de la noche
Es como si pudiera sentir el tiempo pasar
¿Cómo puede una persona saberlo todo a los 18 pero nada a los 22?
¿Y aún me querrás cuando no sea nada nuevo?</p>
</div>
<button class="btn-close">Cerrar</button>
`;

// Agregar el botón y el modal al elemento hijo

card.appendChild(button);
card.appendChild(modal);

// Ocultar el modal inicialmente

modal.style.display = 'none';

// Agregar un evento de clic al botón de reproducción

button.addEventListener('click', () => {
modal.style.display = 'flex'; // Mostrar el modal como flexbox
});
 // Agregar un evento de clic al botón de cerrar
const closeButton = modal.querySelector('.btn-close');
closeButton.addEventListener('click', () => {
modal.style.display = 'none';
});

// Agregamos eventos de hover al elemento principal

card.addEventListener('mouseover', () => {
button.style.display = 'block';
});

card.addEventListener('mouseout', () => {
button.style.display = 'none';
});
};

// Llama a la función en tus contenedores

const containerConcentracion =
document.querySelectorAll('.card-concentracion');
const containerSpotifyPlaylists =
document.querySelectorAll('.card-spotify-playlists');

containerConcentracion.forEach(card => {
createButton(card);
});

containerSpotifyPlaylists.forEach(card => {
createButton(card);
});

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
 <title>Spotify</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="main container">
<!-- TopBar -->
<div class="topbar">
<div class="container-arrows">
<div class="container-arrow-left">
<i class="fa-solid fa-chevron-left"></i>
</div>
<div class="container-arrow-right">
<i class="fa-solid fa-chevron-right"></i>
</div>
</div>
<div class="buttons-user">
<a href="#" class="btn-register">Registrarte</a>
<a href="#" class="btn-login btn-full">Iniciar
sesión</a>
</div>
</div>
<!-- SideBar -->
<nav class="navbar">
<div class="container-logo">
<a href="#" class="link-logo">
<svg viewBox="0 0 1134 340" class="logo-svg">
<title>Spotify</title>
<path
fill="currentColor"
d="M8 171c0 92 76 168 168 168s168-76
168-168S268 4 176 4 8 79 8 171zm230 78c-39-24-89-30-147-17-14
2-16-18-4-20 64-15 118-8 162 19 11 7 0 24-11
18zm17-45c-45-28-114-36-167-20-17 5-23-21-7-25 61-18 136-9 188 23 14 9
0 31-14 22zM80 133c-17 6-28-23-9-30 59-18 159-15 221 22 17 9 1 37-17
27-54-32-144-35-195-19zm379 91c-17 0-33-6-47-20-1 0-1 1-1 1l-16 19c-1
1-1 2 0 3 18 16 40 24 64 24 34 0 55-19 55-47
0-24-15-37-50-46-29-7-34-12-34-22s10-16 23-16 25 5 39 15c0 0 1 1 2
1s1-1 1-1l14-20c1-1 1-1 0-2-16-13-35-20-56-20-31 0-53 19-53 46 0 29 20
38 52 46 28 6 32 12 32 22 0 11-10 17-25
17zm95-77v-13c0-1-1-2-2-2h-26c-1 0-2 1-2 2v147c0 1 1 2 2 2h26c1 0 2-1
2-2v-46c10 11 21 16 36 16 27 0 54-21 54-61s-27-60-54-60c-15 0-26 5-36
17zm30 78c-18 0-31-15-31-35s13-34 31-34 30 14 30 34-12 35-30
35zm68-34c0 34 27 60 62 60s62-27 62-61-26-60-61-60-63 27-63
61zm30-1c0-20 13-34 32-34s33 15 33 35-13 34-32
34-33-15-33-35zm140-58v-29c0-1 0-2-1-2h-26c-1 0-2 1-2 2v29h-13c-1 0-2
1-2 2v22c0 1 1 2 2 2h13v58c0 23 11 35 34 35 9 0 18-2 25-6 1 0 1-1
1-2v-21c0-1 0-2-1-2h-2c-5 3-11 4-16 4-8 0-12-4-12-12v-54h30c1 0 2-1
2-2v-22c0-1-1-2-2-2h-30zm129-3c0-11 4-15 13-15 5 0 10 0 15 2h1s1-1
1-2V93c0-1 0-2-1-2-5-2-12-3-22-3-24 0-36 14-36 39v5h-13c-1 0-2 1-2
2v22c0 1 1 2 2 2h13v89c0 1 1 2 2 2h26c1 0 1-1 1-2v-89h25l37 89c-4 9-8
11-14 11-5 0-10-1-15-4h-1l-1 1-9 19c0 1 0 3 1 3 9 5 17 7 27 7 19 0 30-9
39-33l45-116v-2c0-1-1-1-2-1h-27c-1 0-1 1-1 2l-28
78-30-78c0-1-1-2-2-2h-44v-3zm-83 3c-1 0-2 1-2 2v113c0 1 1 2 2 2h26c1 0
1-1 1-2V134c0-1 0-2-1-2h-26zm-6-33c0 10 9 19 19 19s18-9
18-19-8-18-18-18-19 8-19 18zm245 69c10 0 19-8 19-18s-9-18-19-18-18 8-18
18 8 18 18 18zm0-34c9 0 17 7 17 16s-8 16-17 16-16-7-16-16 7-16 16-16zm4
18c3-1 5-3 5-6 0-4-4-6-8-6h-8v19h4v-6h4l4 6h5zm-3-9c2 0 4 1 4 3s-2 3-4
3h-4v-6h4z"
></path>
</svg>
</a>
</div>
<ul class="nav-main">
<li>
<a href="#"> <i class="fa-solid
fa-house"></i>Inicio </a>
</li>
<li>
<a href="#">
<i class="fa-solid
fa-magnifying-glass"></i>Buscar</a
>
</li>
<li>
<a href="#"
><i class="fa-solid fa-bookmark"></i>Tu
biblioteca</a
>
</li>
</ul>

<div class="extra-options">
<button class="btn-create-list">
<i class="fa-solid fa-plus"></i>
Crear Lista
</button>
 <button class="btn-favorite-songs">
<i class="fa-solid fa-heart"></i>
Canciones que te gustan
</button>
</div>

<div class="container-links">
<div class="container-links-legal">
<a
href="https://www.spotify.com/ec/legal/">Legal</a>
<a href="https://www.spotify.com/ec/privacy/"
>Centro de Privacidad</a
>
<a
href="https://www.spotify.com/ec/legal/privacy-policy/"
>Política de Privacidad</a
>
<a
href="https://www.spotify.com/ec/legal/cookies-policy/"
>Cookies</a
>
<a

href="https://www.spotify.com/ec/legal/privacy-policy/#s3"
>Información sobre los anuncios
</a>
</div>

<button class="btn-language">
<i class="fa-solid fa-globe"></i>
Español de España
</button>
</div>
</nav>

<!-- Contenido Principal -->

<section class="main-content">
<!-- 1 Fila -->
<div class="container-name-concentracion">
<h1 class="title-playlist">Concentración</h1>
<div class="container-card-concentracion">
<div class="card-concentracion">
<div class="card">
 <div class="card-img">
<img

src="img/concentracion/peacefulpiano.jpg"
alt="Peaceful piano"
/>
</div>
<h2>Peaceful Piano</h2>
<p>Relax and indulge with beautiful
piano pieces</p>
</div>
</div>
<div class="card-concentracion">
<div class="card">
<div class="card-img">
<img
src="img/concentracion/deep
focus.jpg"
alt="Deep Focus"
/>
</div>
<h2>Deep Focus</h2>
<p>
Keep calm and focus with ambient
and post-rock
music.
</p>
</div>
</div>
<div class="card-concentracion">
<div class="card">
<div class="card-img">
<img

src="img/concentracion/instrumental study.jpg"
alt="Instrumental study"
/>
</div>
<h2>Instrumental Study</h2>
<p>Focus with soft study music in the
background.</p>
</div>
</div>
 <div class="card-concentracion">
<div class="card">
<div class="card-img">
<img
src="img/concentracion/coding
mode.jpg"
alt="Jazz Vibes"
/>
</div>
<h2>Jazz Vibes</h2>
<p>The original chill instrumental
beats playlist.</p>
</div>
</div>
<div class="card-concentracion">
<div class="card">
<div class="card-img">
<img
src="img/concentracion/focus
flow.jpg"
alt="Focus Flow"
/>
</div>
<h2>Focus Flow</h2>
<p>Uptempo instrumental hip hop
beats.</p>
</div>
</div>
<div class="card-concentracion">
<div class="card">
<div class="card-img">
<img
src="img/concentracion/workday
lounge.jpg"
alt="Workday Lounge"
/>
</div>
<h2>Workday Lounge</h2>
<p>Lounge and chill out music for your
workday.</p>
</div>
</div>
<div class="card-concentracion">
 <div class="card">
<div class="card-img">
<img
src="img/concentracion/beats to
think.jpg"
alt="Beats to think to"
/>
</div>
<h2>Beats to think to</h2>
<p>Focus with deep techno and tech
house.</p>
</div>
</div>
</div>
</div>

<!-- 2 Fila -->

<div class="container-name-spotify-playlists">
<h1 class="title-playlist">
Spotify Playlists
</h1>

<div class="container-card-spotify-playlists">
<div class="card-spotify-playlists">
<div class="card">
<div class="card-img">
<img src="img/spotify
playlists/today top hits.jpg" alt="">
</div>
<h2>Today's Top Hits</h2>
<p>Miley Cyrus is on top of the Hottest
50!</p>
</div>
</div>
<div class="card-spotify-playlists">
<div class="card">
<div class="card-img">
<img
src="img/spotify playlists/rap
caviar.jpg"
alt="RapCaviar"
/>
</div>
 <h2>RapCaviar</h2>
<p>
New music from Metro Boomin, NLE
Choppa and Rae
Sremmurd.
</p>
</div>
</div>
<div class="card-spotify-playlists">
<div class="card">
<div class="card-img">
<img
src="img/spotify playlists/all
out.jpg"
alt="All Out 2010s"
/>
</div>
<h2>All Out 2010s</h2>
<p>The biggest songs of the 2010s.</p>
</div>
</div>
<div class="card-spotify-playlists">
<div class="card">
<div class="card-img">
<img
src="img/spotify playlists/rock
classics.jpg"
alt="Rock Classics"
/>
</div>
<h2>Rock Classics</h2>
<p>
Rock legends & epic songs that
continue to inspire
generations. Cover: Foo Fighters
</p>
</div>
</div>
<div class="card-spotify-playlists">
<div class="card">
<div class="card-img">
<img
 src="img/spotify
playlists/chill hits.jpg"
alt="Chill Hits"
/>
</div>
<h2>Chill Hits</h2>
<p>Kick back to the best new and recent
chill hits</p>
</div>
</div>
<div class="card-spotify-playlists">
<div class="card">
<div class="card-img">
<img
src="img/spotify playlists/viva
latino.jpg"
alt="Viva Latino"
/>
</div>
<h2>Viva Latino</h2>
<p>
Today's top Latin hits, elevando
nuestra música.
Cover: Yandel & Feid
</p>
</div>
</div>
<div class="card-spotify-playlists">
<div class="card">
<div class="card-img">
<img
src="img/spotify playlists/mega
hit mix.jpg"
alt=""
/>
</div>
<h2>Mega Hit Mix</h2>
<p>
A mega mix of 75 favorites from the
last few years!
</p>
</div>
</div>
 </div>
</div>
</section>

<!-- Parte final -->

<footer class="footer">
<div class="container-links-footer">
<div class="links-footer">
<h3>Empresa</h3>
<a href="#">Acerca de</a>
<a href="#">Empleo</a>
<a href="#">For the Record</a>
</div>
<div class="links-footer">
<h3>Comunidades</h3>
<a href="#">Para artistas</a>
<a href="#">Desarrolladores</a>
<a href="#">Publicidad</a>
<a href="#">Inversores</a>
<a href="#">Proveedores</a>
</div>
<div class="links-footer">
<h3>Enlaces útiles</h3>
<a href="#">Asistencia</a>
<a href="#">App gratis para móvil</a>
</div>

</div>
</footer>
</main>

<div class="banner-bottom">
<div class="content">
<span>Muestra de spotify</span>
<p>
 Regístrate para disfrutar de canciones y podcasts
sin
límites, con anuncios ocasionales. No hace falta
tarjeta de
crédito
</p>
</div>
<button class="btn-full">Registrarte gratis</button>
</div>

<!-- Script de FontAwesome -->

<script
src="https://kit.fontawesome.com/81581fb069.js"
crossorigin="anonymous"
></script>
<!-- Script personal -->
<script src="main.js"></script>
</body>
</html>
Imágenes Utilizadas

Concentración
Spotify Playlists

Resultados
Alcanzamos a desarrollar una interfaz similar a la de Spotify y con eso creamos un botón que
nos despliega la letra de dicha canción y su traducción al español
Conclusiones
Se logró con éxito crear un prototipo de un traducción de lyrics de canciones dentro de la
aplicación Spotify y de esa forma agregar una funcionalidad necesitada por múltiples
personas, aparte se ha comprendido las herramientas de traducción automática más utilizadas
y cómo funcionan estas con su distintos enfoques. a la par obtuvimos información de las
falencias de Spotify al no agregar una funcionalidad tan importante tomando en cuenta que
llegá a más de 178 países, cada uno con sus distintas culturas e idiomas .
Recomendaciones
Mejorar el prototipo para que funcione con una similitud mayor a la app Spotify y así simular
mejor su funcionamiento ya implementada. Una recomendación para mejorar la precisión de
las traducciones de canciones sería establecer un idioma de origen y destino fijo, por ejemplo,
del inglés al español. Esto permitiría concentrarse en la tarea de traducción con mayor
exactitud y eficacia.

Bibliografía/referencia

Mercedes, P. H. (2002). En torno a la traducción automática. Cervantes, 1(2), 101-117.

Diéguez M., M. I. ., & Cabrera P., I. . (1997). Traducción humana o traducción automática:
variables para una toma de decisiones eficiente. Onomázein, (2), 227–242.
Casacuberta Nolla, F., & Peris Abril, Á. (2017). Traducción automática neuronal.
Tradumàtica, (15), 0066-74.
González Boluda, M. (2010). Estudio comparativo de traductores automáticos en línea:
Systran, Reverso y Google. Núcleo, 22(27), 187-216.
Blasco, L., & Mundo, B. B. C. (2018). ¿ Cuáles son los traductores que compiten con Google
Translate y cómo funcionan?. Revista BBC News. Recuperado, desde: https://www. bbc.
com/mundo/noticias-42819225.
Croes, L. X. (2019). La traducción automática: Una comparación entre las traducciones de
Google Translate y DeepL del español al holandés (Master's thesis).
Pym, A., & Torres-Simón, E. (2021). Efectos de la automatización en las competencias
básicas del traductor: la traducción automática neuronal. Ocupaciones y lenguaje.
Indicadores y análisis de competencias lingüísticas en el ámbito laboral, 479-509.
Johnson, M., Schuster, M., Le, Q. V., Krikun, M., Wu, Y., Chen, Z., ... & Dean, J. (2017).
Google’s multilingual neural machine translation system: Enabling zero-shot translation.
Transactions of the Association for Computational Linguistics, 5, 339-351.
ARTISTAS, U. G. P. (2015). Spotify.