1

Tengo una lista de arreglos que cargo sus datos en una tarjeta, y muestro en diferentes secciones según la categoría.

De esta forma creo y muestro la tarjeta:

const favorito = datos.filter(item => item['tipo'].categoria === "favorito");  

let fav = '';

favorito.forEach( (item) => {
                
                fav += `
                  <div class="tarjeta ${item['tipo'].categoria}">
                    <div class="poster">
                      <img src="${item['media'].poster}">
                      <div class="sobre">${item['tipo'].categoria}</div>
                      <div class="sobre">${item['media'].duracion}</div>
                    </div>
                    <div class="titular">
                      <div class="titulillo">${item['media'].titulillo}</div>       
                      <div class="titulo">${item['media'].titulo}</div>       
                      <div class="subtitulo">${item['media'].subtitulo}</div>  
                      <div class="descripcion">
                        <p>${item['media'].descripcion}</p>
                      </div>       
                    </div>
                  </div>
                `;
                
});

document.getElementById("favorito").innerHTML = fav;


Al tener varias categorías en la lista de arreglos, creo una tarjeta independiente por cada categoría.

Esto hace que sea mucho código y que se repita la estructura de la tarjeta (en JAVASCRIPT).

Mi consulta es: Como podría crear una sola tarjeta y reutilizar ésta para mostrar en diferentes secciones ?

Quisiera poder hacer algo como:

const = todos = `
  <div class="tarjeta">
    
  </div>
`;

Sin embargo: desde el forEach no puedo acceder a esta función. Po ejemplo algo así:

let fav = '';

favorito.forEach( (item) => {
  fav = todos();
});

En síntesis, quiero usar una sola estructura de html para toda las categorías.

let datos = [{
  tipo: {
    genero: "",
    categoria: "favorito",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Un título favorito",
    subtitulo: "Este es un subtitulo favorito",
    poster: "",
    url: "",
    duracion: "00:00",
    descripcion: "Una breve descripción"
  }
}, {
  tipo: {
    genero: "",
    categoria: "favorito",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Un título favorito",
    subtitulo: "Este es un subtitulo favorito",
    poster: "",
    url: "",
    duracion: "00:00",
    descripcion: "Una breve descripción"
  }
}, {
  tipo: {
    genero: "",
    categoria: "pelicula",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Título de película",
    subtitulo: "Este es un subtitulo de película",
    poster: "",
    url: "",
    duracion: "1:00:00",
    descripcion: "Breve descripción de la película"
  }
}, {
  tipo: {
    genero: "",
    categoria: "pelicula",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Título de película",
    subtitulo: "Este es un subtitulo de película",
    poster: "",
    url: "",
    duracion: "1:00:00",
    descripcion: "Breve descripción de la película"
  }
}, {
  tipo: {
    genero: "",
    categoria: "musica",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Título de música",
    subtitulo: "Este es un subtitulo musical",
    poster: "",
    url: "",
    duracion: "03:00",
    descripcion: "Breve descripción de la música"
  }
}, {
  tipo: {
    genero: "",
    categoria: "musica",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Título de música",
    subtitulo: "Este es un subtitulo musical",
    poster: "",
    url: "",
    duracion: "03:00",
    descripcion: "Breve descripción de la música"
  }
}, {
  tipo: {
    genero: "",
    categoria: "corto",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Vídeo corto",
    subtitulo: "Este es un subtitulo corto",
    poster: "",
    url: "",
    duracion: "02:00",
    descripcion: "Breve descripción corto"
  }
}, {
  tipo: {
    genero: "",
    categoria: "corto",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Vídeo corto",
    subtitulo: "Este es un subtitulo corto",
    poster: "",
    url: "",
    duracion: "02:00",
    descripcion: "Breve descripción corto"
  }
}];

datos.sort(() => Math.random() - 0.5); // Aleatorio

let principal = '';

datos.forEach((item) => {

  principal += `
                  <div class="tarjeta ${item['tipo'].categoria}">
                    <div class="poster">
                      <img src="${item['media'].poster}">
                      <div class="sobre">${item['tipo'].categoria}</div>
                      <div class="sobre">${item['media'].duracion}</div>
                    </div>
                    <div class="titular">
                      <div class="titulillo">${item['media'].titulillo}</div>       
                      <div class="titulo">${item['media'].titulo}</div>       
                      <div class="subtitulo">${item['media'].subtitulo}</div>  
                      <div class="descripcion">
                        <p>${item['media'].descripcion}</p>
                      </div>       
                    </div>
                  </div>
                `;

});

document.getElementById("todos").innerHTML = principal;

//-------

const favorito = datos.filter(item => item['tipo'].categoria === "favorito");

let fav = '';

favorito.forEach((item) => {

  fav += `
                  <div class="tarjeta ${item['tipo'].categoria}">
                    <div class="poster">
                      <img src="${item['media'].poster}">
                      <div class="sobre">${item['tipo'].categoria}</div>
                      <div class="sobre">${item['media'].duracion}</div>
                    </div>
                    <div class="titular">
                      <div class="titulillo">${item['media'].titulillo}</div>       
                      <div class="titulo">${item['media'].titulo}</div>       
                      <div class="subtitulo">${item['media'].subtitulo}</div>  
                      <div class="descripcion">
                        <p>${item['media'].descripcion}</p>
                      </div>       
                    </div>
                  </div>
                `;

});

document.getElementById("favorito").innerHTML = fav;

// -------------

const pelicula = datos.filter(item => item['tipo'].categoria === "pelicula");

let peli = '';

pelicula.forEach((item) => {

  peli += `
                  <div class="tarjeta ${item['tipo'].categoria}">
                    <div class="poster">
                      <img src="${item['media'].poster}">
                      <div class="sobre">${item['tipo'].categoria}</div>
                      <div class="sobre">${item['media'].duracion}</div>
                    </div>
                    <div class="titular">
                      <div class="titulillo">${item['media'].titulillo}</div>       
                      <div class="titulo">${item['media'].titulo}</div>       
                      <div class="subtitulo">${item['media'].subtitulo}</div>  
                      <div class="descripcion">
                        <p>${item['media'].descripcion}</p>
                      </div>       
                    </div>
                  </div>
                `;

});

document.getElementById("pelicula").innerHTML = peli;

// ----------------

const musica = datos.filter(item => item['tipo'].categoria === "musica");

let mus = '';

musica.forEach((item) => {

  mus += `
                  <div class="tarjeta ${item['tipo'].categoria}">
                    <div class="poster">
                      <img src="${item['media'].poster}">
                      <div class="sobre">${item['tipo'].categoria}</div>
                      <div class="sobre">${item['media'].duracion}</div>
                    </div>
                    <div class="titular">
                      <div class="titulillo">${item['media'].titulillo}</div>       
                      <div class="titulo">${item['media'].titulo}</div>       
                      <div class="subtitulo">${item['media'].subtitulo}</div>  
                      <div class="descripcion">
                        <p>${item['media'].descripcion}</p>
                      </div>       
                    </div>
                  </div>
                `;

});

document.getElementById("musica").innerHTML = mus;

// ----------------

const corto = datos.filter(item => item['tipo'].categoria === "corto");

let cor = '';

corto.forEach((item) => {

  cor += `
                  <div class="tarjeta ${item['tipo'].categoria}">
                    <div class="poster">
                      <img src="${item['media'].poster}">
                      <div class="sobre">${item['tipo'].categoria}</div>
                      <div class="sobre">${item['media'].duracion}</div>
                    </div>
                    <div class="titular">
                      <div class="titulillo">${item['media'].titulillo}</div>       
                      <div class="titulo">${item['media'].titulo}</div>       
                      <div class="subtitulo">${item['media'].subtitulo}</div>  
                      <div class="descripcion">
                        <p>${item['media'].descripcion}</p>
                      </div>       
                    </div>
                  </div>
                `;

});

document.getElementById("corto").innerHTML = cor;

// ---------------- Paginación

function paginacion(e) {

  const pagina = document.querySelectorAll(".pagina");
  document.querySelector("section ul .activo").classList.remove("activo");
  e.target.classList.add("activo");

  pagina.forEach(tar => {
    if (tar.id === e.target.dataset.name) {
      tar.classList.add("activo");
    } else {
      tar.classList.remove("activo");
    }
  });

};

const paginar = document.querySelectorAll("ul li");
paginar.forEach(e => e.addEventListener("click", paginacion));
*,
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

section {
  display: block;
  position: relative;
  width: 100%;
  height: 100%
}

ul {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #ccc
}

li {
  width: 20%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  cursor: pointer;
  color: darkslategrey;
  transition: all 0.3s ease;
  background-color: lightslategrey
}

li:hover,
li.activo {
  background-color: lightblue
}

.pagina {
  display: none;
  padding: 1rem;
  background-color: lightslategrey;
  columns: 2 300px;
  column-gap: 1rem;
  @media(width < 576px) {
    flex-direction: column;
    columns: 1;
    padding: .50rem
  }
}

.pagina.activo {
  display: block;
  @media(width < 576px) {
    display: flex
  }
}

.tarjeta {
  width: 100%;
  height: fit-content;
  margin-bottom: .50rem;
  border-radius: .30rem;
  background-color: darkgray
}

.poster {
  width: 100%;
  height: 250px;
  position: relative;
  border-radius: .30rem .30rem 0 0
}

.tarjeta.favorito .poster {
  background: linear-gradient(130deg, rgba(255 0 0 / 0.5), rgba(0 255 0 / 0.5))
}

.tarjeta.pelicula .poster {
  background: linear-gradient(130deg, rgba(42 59 71 / 0.5), rgba(0 0 0 / 0.5))
}

.tarjeta.musica .poster {
  background: linear-gradient(130deg, rgba(0 59 71 / 0.5), rgba(71 0 59 / 0.5))
}

.tarjeta.corto .poster {
  background: linear-gradient(130deg, rgba(42 0 71 / 0.5), rgba(0 60 100 / 0.5))
}

.poster img {
  width: 100%;
  max-height: 250px;
  object-fit: cover
}

.sobre {
  position: absolute;
  right: 0;
  padding: 5px 5px;
  border-radius: .30rem 0 0 .30rem;
  color: #ccc;
  background-color: rgba(0 0 0 / 0.5)
}

.sobre:last-child {
  bottom: 1rem
}

.titular {
  height: fit-content;
  padding: 1rem 0
}

.titulillo {
  font-size: .90rem
}

.titulo {
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 0 5px #fff;
  margin: 5px 0
}

.subtitulo {
  font-size: 1rem
}

.titulillo,
.titulo,
.subtitulo,
.descripcion p {
  padding: 0 .50rem;
  color: darkgreen
}

.descripcion {
  margin: .50rem 0;
  padding: .50rem 0;
  background: linear-gradient(to left, rgba(0 255 0 / 0.2), rgba(0 0 255 / 0.2))
}
<!DOCTYPE html>

<html lang="es">

<head>
  <meta http-equiv="CONTENT-TYPE" conten t="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

</head>

<body>

  <section>
    <ul>
      <li class="activo" data-name="todos">Todos</li>
      <li class="" data-name="favorito">Favorito</li>
      <li class="" data-name="pelicula">Película</li>
      <li class="" data-name="musica">Música</li>
      <li class="" data-name="corto">Corto</li>
    </ul>
    <div class="pagina activo" id="todos"></div>
    <div class="pagina" id="favorito"></div>
    <div class="pagina" id="pelicula"></div>
    <div class="pagina" id="musica"></div>
    <div class="pagina" id="corto"></div>
  </section>


</body>

</html>

2 respuestas 2

2

Para evitar la duplicación de código podrías hacer los siguientes cambios:

Primero vamos a crear un arreglo con la lista de categorías (podríamos crearlo dinámicamente en base a los presentes en el arreglo de datos).

Teniendo un arreglo de las categorías a listar con su id y nombre (y ordenado según se desea) lo vamos a utilizar para:

  • Por cada una, crear un objeto con 2 propiedades, su nombre y un arreglo items para agregar los item que pertenezcan a la misma.

  • Para agilizar el acceso a la categoría por su id, la vamos a guardar en otro objeto utilizando su id como propiedad del mismo.

Luego, recorremos el arreglo de datos y por cada item:

  • Lo agregamos al arreglo de items de la categoría "todos"
  • En base a la categoría que pertenece el item, lo agregamos al arreglo de items de la categoría.

Teniendo resuelto lo anterior podemos, por cada una, crear:

  • El HTML con el li para el menu.
  • El HTML con el div para el contenedor.

Ejemplo:

const datos = [{
  tipo: {
    genero: "",
    categoria: "favorito",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Un título favorito",
    subtitulo: "Este es un subtitulo favorito",
    poster: "",
    url: "",
    duracion: "00:00",
    descripcion: "Una breve descripción"
  }
}, {
  tipo: {
    genero: "",
    categoria: "favorito",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Un título favorito",
    subtitulo: "Este es un subtitulo favorito",
    poster: "",
    url: "",
    duracion: "00:00",
    descripcion: "Una breve descripción"
  }
}, {
  tipo: {
    genero: "",
    categoria: "pelicula",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Título de película",
    subtitulo: "Este es un subtitulo de película",
    poster: "",
    url: "",
    duracion: "1:00:00",
    descripcion: "Breve descripción de la película"
  }
}, {
  tipo: {
    genero: "",
    categoria: "pelicula",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Título de película",
    subtitulo: "Este es un subtitulo de película",
    poster: "",
    url: "",
    duracion: "1:00:00",
    descripcion: "Breve descripción de la película"
  }
}, {
  tipo: {
    genero: "",
    categoria: "musica",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Título de música",
    subtitulo: "Este es un subtitulo musical",
    poster: "",
    url: "",
    duracion: "03:00",
    descripcion: "Breve descripción de la música"
  }
}, {
  tipo: {
    genero: "",
    categoria: "musica",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Título de música",
    subtitulo: "Este es un subtitulo musical",
    poster: "",
    url: "",
    duracion: "03:00",
    descripcion: "Breve descripción de la música"
  }
}, {
  tipo: {
    genero: "",
    categoria: "corto",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Vídeo corto",
    subtitulo: "Este es un subtitulo corto",
    poster: "",
    url: "",
    duracion: "02:00",
    descripcion: "Breve descripción corto"
  }
}, {
  tipo: {
    genero: "",
    categoria: "corto",
    clase: ""
  },
  media: {
    titulillo: "titulillo",
    titulo: "Vídeo corto",
    subtitulo: "Este es un subtitulo corto",
    poster: "",
    url: "",
    duracion: "02:00",
    descripcion: "Breve descripción corto"
  }
}];

datos.sort(() => Math.random() - 0.5); // Aleatorio

// ---------------- 
// ---------------- Categorias
// ---------------- 

// Arreglo de categorias que se motraran en el menú según el orden
// PD: este arreglo podríamos crearla dinámicamente, pero
// el "problema" sería determinar el "orden"
const lista_categorias = [{
  id: 'todos',
  nombre: 'Todos'
}, {
  id: 'favorito',
  nombre: 'Favorito'
}, {
  id: 'pelicula',
  nombre: 'Película'
}, {
  id: 'musica',
  nombre: 'Música'
}, {
  id: 'corto',
  nombre: 'Corto'
}];

// Por cada categoria la agreamos al objeto 
const categorias = {};
lista_categorias.forEach(categoria => categorias[categoria.id] = {
  nombre: categoria.nombre,
  items: []
});

// ---------------- 
// ---------------- Analisis de datos
// ---------------- 

// Por cada item en el arreglo
datos.forEach((item) => {

  // Agregamos a "todos"
  categorias.todos.items.push(item);

  // Agregamos a la categoria que pertenece
  categorias[item.tipo.categoria].items.push(item);
});

// ---------------- 
// ---------------- HTML
// ---------------- 

function crearTarjeta(item) {
  return `
  <div class="tarjeta ${item['tipo'].categoria}">
    <div class="poster">
      <img src="${item['media'].poster}">
      <div class="sobre">${item['tipo'].categoria}</div>
      <div class="sobre">${item['media'].duracion}</div>
    </div>
    <div class="titular">
      <div class="titulillo">${item['media'].titulillo}</div>       
      <div class="titulo">${item['media'].titulo}</div>       
      <div class="subtitulo">${item['media'].subtitulo}</div>  
      <div class="descripcion">
        <p>${item['media'].descripcion}</p>
      </div>       
    </div>
  </div>`;
}

let menu = '',
  contenedores = '';

// Por cada categoria, creamos el HTML
Object.keys(categorias).forEach((id, pos) => {

  let activo = pos == 0 ? 'activo' : '';

  // Creamos el menu
  menu += `<li class="${activo}" data-name="${id}">${categorias[id].nombre}</li>`;

  // Creamos el contenedor
  contenedores += `<div class="pagina ${activo}" id="${id}">`;

  // Por cada item en la categoria, creamos la tarjeta
  categorias[id].items.forEach(item => contenedores += crearTarjeta(item));

  contenedores += `</div>`;
});

document.getElementById('categorias').innerHTML = `
 <ul>${menu}</ul>
 ${contenedores}`;

// ---------------- 
// ---------------- Paginación
// ---------------- 

function paginacion(e) {

  const pagina = document.querySelectorAll(".pagina");
  document.querySelector("section ul .activo").classList.remove("activo");
  e.target.classList.add("activo");

  pagina.forEach(tar => {
    if (tar.id === e.target.dataset.name) {
      tar.classList.add("activo");
    } else {
      tar.classList.remove("activo");
    }
  });

};

const paginar = document.querySelectorAll("ul li");
paginar.forEach(e => e.addEventListener("click", paginacion));
*,
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

section {
  display: block;
  position: relative;
  width: 100%;
  height: 100%
}

ul {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #ccc
}

li {
  width: 20%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  cursor: pointer;
  color: darkslategrey;
  transition: all 0.3s ease;
  background-color: lightslategrey
}

li:hover,
li.activo {
  background-color: lightblue
}

.pagina {
  display: none;
  padding: 1rem;
  background-color: lightslategrey;
  columns: 2 300px;
  column-gap: 1rem;
  @media(width < 576px) {
    flex-direction: column;
    columns: 1;
    padding: .50rem
  }
}

.pagina.activo {
  display: block;
  @media(width < 576px) {
    display: flex
  }
}

.tarjeta {
  width: 100%;
  height: fit-content;
  margin-bottom: .50rem;
  border-radius: .30rem;
  background-color: darkgray
}

.poster {
  width: 100%;
  height: 250px;
  position: relative;
  border-radius: .30rem .30rem 0 0
}

.tarjeta.favorito .poster {
  background: linear-gradient(130deg, rgba(255 0 0 / 0.5), rgba(0 255 0 / 0.5))
}

.tarjeta.pelicula .poster {
  background: linear-gradient(130deg, rgba(42 59 71 / 0.5), rgba(0 0 0 / 0.5))
}

.tarjeta.musica .poster {
  background: linear-gradient(130deg, rgba(0 59 71 / 0.5), rgba(71 0 59 / 0.5))
}

.tarjeta.corto .poster {
  background: linear-gradient(130deg, rgba(42 0 71 / 0.5), rgba(0 60 100 / 0.5))
}

.poster img {
  width: 100%;
  max-height: 250px;
  object-fit: cover
}

.sobre {
  position: absolute;
  right: 0;
  padding: 5px 5px;
  border-radius: .30rem 0 0 .30rem;
  color: #ccc;
  background-color: rgba(0 0 0 / 0.5)
}

.sobre:last-child {
  bottom: 1rem
}

.titular {
  height: fit-content;
  padding: 1rem 0
}

.titulillo {
  font-size: .90rem
}

.titulo {
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 0 5px #fff;
  margin: 5px 0
}

.subtitulo {
  font-size: 1rem
}

.titulillo,
.titulo,
.subtitulo,
.descripcion p {
  padding: 0 .50rem;
  color: darkgreen
}

.descripcion {
  margin: .50rem 0;
  padding: .50rem 0;
  background: linear-gradient(to left, rgba(0 255 0 / 0.2), rgba(0 0 255 / 0.2))
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta http-equiv="CONTENT-TYPE" conten t="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

<body>
  <section id="categorias"></section>
</body>

</html>

3
  • Gracias Marcos. Ahora estoy trabajando en este código. Quiero mostrar una tarjeta en dos categorías: por ejemplo: en favoritos y en cortos. Aún no se cómo Commented el 8 sept. a las 23:01
  • Gracias @Marcos !! Me ayudó mucho también crear el menú en javascript Commented el 8 sept. a las 23:02
  • @NarcisoAifuz, para poder mostrar un ítem en más de una categoría, cada ítem debería tener un arreglo con el ID de las categorías a la que pertenece. Luego mostrarlo en cada una es tan simple como iterar el arreglo y agregarlo en cada una.
    – Marcos
    Commented el 8 sept. a las 23:11
1

Podrías crear una función que te devuelva el HTML del listado que deseas pintar. Esa función usaría a su vez otra función en la que podrías encapsular ese HTML repetitivo para que te lo devuelva cuando lo necesites.

Lo que yo hice fue filtrar el array para almacenar en una variable los elementos de tipo fruta (en tu caso sería con la categoría que necesites) y en otra variable los de tipo carne.

Luego ya puede pedir a la función el HTML y ya inyectarlo en el elemento del DOM que necesites.

const listadoAlimentos = [
  { tipo: 'fruta', nombre: 'Manzana', precio: 2 },
  { tipo: 'fruta', nombre: 'Plátano', precio: 3 },
  { tipo: 'fruta', nombre: 'fresa', precio: 5 },
  { tipo: 'carne', nombre: 'bistec', precio: 15 },
  { tipo: 'carne', nombre: 'hamburguesa', precio: 7 },
]

function obtenerHtmlListadoAlimentos(listadoAlimentos) {
  let htmlListado = ``
  
  listadoAlimentos.forEach((alimento) => {
    htmlListado += obtenerHtmlAlimento(alimento)
  })
  
  return htmlListado
}

function obtenerHtmlAlimento(alimento) {
  return `
    <div class="alimento">
      <h1>${alimento.nombre}</h1>
      <p><strong>${alimento.tipo}</strong></p>
      <p>${alimento.precio} €/kilo</p>
    </div>
  `
}

const frutas = listadoAlimentos.filter((alimento) => alimento.tipo === 'fruta')
const carnes = listadoAlimentos.filter((alimento) => alimento.tipo === 'carne')

document.getElementById("frutas").innerHTML = obtenerHtmlListadoAlimentos(frutas)
document.getElementById("carnes").innerHTML = obtenerHtmlListadoAlimentos(carnes)
.alimento {
  border: 1px solid black;
  padding: 5px;
  margin-bottom: 10px;
}
<div id="frutas"></div>
<div id="carnes"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.