Dar más información que una lista en desarrollo web [Ejercicio práctico]

En el ejercicio práctico de este artículo, vamos a dar más información que una lista en desarrollo web dentro del imaginario de un programa, en el que buscamos presentar una lista de juegos o game directory. Esto te permitirá conocer la forma en la que puedes combinar funciones de JavaScript y etiquetas u otros elementos que pertenecen al lenguaje de etiquetas HTML, los cuales son dos puntos imprescindibles al construir una página web. Así que, para aprender a dar más información que una lista en desarrollo web con un ejercicio práctico, sigue leyendo.

Dar más información que una lista en desarrollo web: ejercicio práctico

En este ejercicio práctico estamos construyendo un sitio web que almacena una lista de videojuegos, a modo de recomendaciones para el usuario que navegue en nuestra web. Esta página está construida con componentes pro del frontend, es decir, elementos que van más allá del desarrollo inicial de un programa de desarrollo web cualquiera.

En este caso, antes de empezar a trabajar en el código, tenemos una lista inicial con los nombres de todos los juegos y los enlaces que llevan a su descarga o compra, como puedes ver a continuación:

Esto no es lo que le queremos presentar al usuario, ya que no tiene ningún atractivo y no se ve interesante. Por tanto, podríamos agregar una imagen y un título que mejorare cómo luce el sitio del game directory. Para ello, tendremos que escribir todos estos elementos dentro de un archivo index.js, donde vamos a combinar los elementos del lenguaje de etiquetas HTML con las funciones que vamos a declarar del lenguaje JavaScript.

De esta forma, en este sitio vamos a generar una función que sirva para generar el snippet del juego, es decir, la función generateGameSnippet, a la que le pasaremos el juego. Dentro de esta función, vamos a empezar a instanciar las clases del game-snippet, a la que le pasaremos un distintivo, que será la imagen o fotografía que represente al juego.

En este caso, podemos potenciar lo que estamos creando y apoyarnos en los diseños de imágenes de Bootstrap. Podemos seleccionar la que más nos guste de este conjunto de herramientas, que te permitirá dar más información que una lista en desarrollo web; puedes visualizarlo en la siguiente imagen:

En este caso, estamos visualizando el conjunto de Image, donde podemos escoger la opción thumbnails, que tiene un extracto de código que podemos copiar y pegar para generarlo dentro de nuestro sitio web. En la clase de estas imágenes, también debemos situar un ID que determine la clase de nuestras fotos, para después poder invocarlo. Aquí también debemos definir de dónde vamos a sacar la imagen y cuál será el texto alternativo que la acompañará.

Una vez realizado el proceso anterior, podemos centrarnos en crear el nombre que irá con el enlace y la imagen de portada del videojuego que estamos compartiendo. Para ello, podemos definir un h3 y generar un elemento de game-name.

A continuación, puedes observar todo lo que te acabamos de contar para dar más información que una lista en desarrollo web:

# en index.js para dar más información que una lista en desarrollo web

function generateGameSnippet (game) {
   return
 <div class = "game-snippet">
   <a href = "/detail.html?od=$ {game.id}">
       <div class= "game-image-container">
          <img class = "img-thumbnail" id = "gamme-$ {game.id}" src = "${game.image}" alt =                 
                        ${game.name}"/>
      </div>
      <h3 class = "game-name">4 {game.name} </h3> 
    </a>
 </div>
  ;
}
  

Una vez ejecutemos y guardemos lo que acabamos de hacer, encontraremos la siguiente pantalla personalizada:

De todos modos, ten en cuenta que estaríamos perdiendo información por la forma vertical en la que se sitúan las imágenes. Lo mejor sería que siguieras trabajando en personalizar esta pantalla y, así, dar más información que una lista en desarrollo web.

Desarrolla tu sitio web

Este tipo de ejercicios prácticos nos ayudan a conocer en profundidad los módulos, las etiquetas, las funciones y las herramientas que nos permiten desarrollar los mejores programas de desarrollo web. Sin embargo, este es un mundo amplio y aún queda mucho más por aprender. Si quieres formarte a nivel teórico y práctico para convertirte en un desarrollador profesional en pocos meses, no te pierdas el Desarrollo Web Full Stack Bootcamp. Gracias a la guía de nuestros profesores expertos en el sector y a los servicios vitalicios de la Bolsa de Talento, ¡en poco tiempo estarás listo para triunfar en el mercado laboral! Entra ahora y pide más información.