HTML - Estructura website

 
Vista:
sin imagen de perfil
Val: 5
Ha disminuido su posición en 12 puestos en HTML (en relación al último mes)
Gráfica de HTML

Estructura website

Publicado por Pablo (2 intervenciones) el 12/08/2020 17:15:15
Hola!
Quiero crear una web simple similar a la siguiente:
https://quickdraw.withgoogle.com/data/apple

Un listado largo de iconos (siempre el mismo) cada uno con un texto diferente (al pasar por encima o al hacer click). La cosa es que si todos los elementos están en una sola página ésta pesará demasiado. Cómo haríais la estructura de una web así?

Agradezco cualquier aportación!

Saludos!
Pablo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 822
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Estructura website

Publicado por Lopez (262 intervenciones) el 12/08/2020 17:59:03
Pablo,

Bueno partamos que esta alojado en un servidor Google :P
1º - Usa un formato grafico ligero: Puedes escribir y guardar en svg o webp.
Puede ser una imagen grande (usa canvas) con cada dibujo o una pequeña e independiente para cada uno.

2º - Usa una carga diferida.
Para los navegadores basados en Chornium bastara usar el atributo loading así:
1
<img src="imagen.png" loading="lazy" alt="…" width="200" height="200">

Otra opción con mas soporte para diferentes navegadores será usar alguna librería como lazyload.
https://appelsiini.net/projects/lazyload/

El acercamiento de este método es que carga imágenes en este caso, a medida que el usuario se desplaza y necesita.
Cool, no?

Quedamos atentos,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 5
Ha disminuido su posición en 12 puestos en HTML (en relación al último mes)
Gráfica de HTML

Estructura website

Publicado por pablo (2 intervenciones) el 12/08/2020 18:43:54
Gracias por tu respuesta!

La imagen, será siempre la misma. Me apunto lo del formato, para intentar que sea lo más ligera posible.
Siendo siempre la misma, se va acumulando el peso de todas formas?

Quisiera saber cómo llamo al texto que va con cada imagen.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 822
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Estructura website

Publicado por Lopez (262 intervenciones) el 12/08/2020 19:07:48
Hola de vuelta Pablo,

Claro, si escribes siempre en la misma, los nuevos datos harán pese un poco mas,
La idea es plantearse: Guardo una imagen grandes, que contenga los dibujos y cuando llegue a por ejemplo 2 megas,
vuelvo a crear otra imagen grande con los próximos dibujos y así sucesivamente.
o ir creando una imagen por cada dibujo, precargas el contenido via ajax y seguro queda bonito y funcional.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 822
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Estructura website

Publicado por Lopez (262 intervenciones) el 12/08/2020 21:18:36
Esta es un actualización según lo que Pablo detallo y clarifico vía el chat HTML

La solución mas simple que se me vino en mente:
https://codepen.io/lowpez/pen/ExKPjpN

Digamos tu svg es de 100 x 100px.

El div que contendra las columnas con textos:

1
2
3
4
5
6
.wrapper {
    background: url('dog.svg');
    background-size: 100px auto;
    background-repeat:space;
    height: 100vh;
}

Dentro de .wrapper creamos otro div con clase .row
Vía CSS grid se hace muy simple:
1
2
3
4
5
.row{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 0rem;
}

Y por ultimo le damos la clase .column los elementos que irán dentro del div .row

1
2
3
4
.column {
  width: 100px;
  height: 100px;
}

Eso seria,
Imagino puedes refinar detalles.
Espero sirva,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar