Castellano | Català

HTrabajar con imágenes avanzado.

Introducción

1Las imágenes son partes indispensables de una web. Sin ellas, nuestro espacio quedará demasiado parecido a un periódico de los años 70. Por lo tanto, a no ser que queramos conseguir un entorno especial, usaremos imágenes a menudo.

El gran inconveniente que presentan las imágenes es su peso en Kb. En principio: a mejor calidad, mayor peso, lo que repercutirá en el tiempo de descarga de nuestro sitio. Si las imágenes no están optimizadas, un tiempo escesivo de carga cansará a nuestro usuario y, muchas veces, puede optar por salir y burcar otro espacio más usable.

Otro aspecto a tener en cuenta es que las webs de hoy tienen que ser responsive, es decir adaptadas a muy diversos ancho de pantalla. Esto para el HTML es simple pero las imágenes no son de anchura variable. Una imagen de 924px tiene esa anchura y no cambia. Aunque la pantalla sea muy pequeña y nuestros ojos la observen pequeña, ella tiene el mismo peso en Kb que cuando la vemos grande

Pero, tranquilo, podemos usar diferentes opciones para solucionar este asunto

Presentamos aquí el Módulo 12 de Nivel Medio.

Sumario

Módulo 12. Sumario

Web responsive.

Las imágenes no son flexibles.

Utilizar porcentajes en lugar de ancho en píxeles.

Cambiar la imagen según el ancho de pantalla.

Diferentes posibilidades para encajar imágenes.

Verificamos el código.

Resum i exercicis pràctics.

1Web responsive.

Texto en preparación.

^

2Las imágenes no son flexibles.

^

3Utilizar porcentajes en lugar de ancho en píxeles.

Texto en preparación.

^

4Cambiar la imagen según el ancho de pantalla.

Texto en preparación.

^

5Diferentes posibilidades para encajar imágenes.

Materiales provisionales

¡FALTA TRADUCIR!

Aquí mostrem diverses possibilitats de posar imatges:

  1. Igual relació
  2. Percentatge
  3. S'adapta i és pla
  4. La imatge original és menys alta

Igual relació

La mateixa relació de la imatge.

Percentatge

La mateixa relació de la imatge.

S'adapta i és pla

Perè la imatge es retalla.

La imatge original és menys alta

Però s'adapta bé, tot i que perd qualitat, si la imatge és petita. Cal emprar imatges més grans que el contenidor.

^

6Verificamos el código.

Texto en preparación.

^

7Resumen y ejercicios prácticos

Recopilemos la información

Hasta aquí el módulo núm. 12

Puedes mandar un comentario sobre este módulo.

Seguimos!

Estructura del Curso

El curso tiene 21 módulos, estructurados en 3 niveles:

También puedes comentar en:

Acerca del autor de este artículo

1Este artículo lo ha escrito Josep Massó i Carreras (de pequeño, en casa y en la escuela me llamaban Pep). Me dedico al diseño y desarrollo web. Trabajo para mejorar la presencia en internet de empresas, federaciones, fundaciones, profesionales, autónomos...

Hay tres ámbitos que me apasionan:

  1. el internet bien hecho (la tecnología que hay detrás de la web),
  2. el internet bello (el diseño que lo convierte en comunicación agradable y útil)
  3. el internet ético (los valores que, gracias a la tecnología, podemos transmitirnos unos a otros, para cultivar nuestra esencia espiritual que es lo más importante de todo ser humano).
^

Leyenda de colores:

“Cuida tu presencia en Internet.”

Sé ético y generoso
(lo que plantamos hoy es lo que, tarde o temprano, acabaremos recogiendo).

© 2019 Cros i Massó