Gestión de puntos de interrupción de imágenes con Angular

 

 

 

  • SmashingConf Nueva York 2024
  • ¡Registro!

  • Índice
    1. Puntos de interrupción de imágenes e imágenes responsivas
      1. srcset
      2. Módulo de diseño angular
    2. Puntos de interrupción responsivos para imágenes
    3. Conclusión

    Una función Angular incorporada llamada BreakPoint Observer nos brinda una interfaz poderosa para manejar imágenes responsivas. Echemos un vistazo a un servicio que nos permite servir, transformar y gestionar imágenes en la nube. Tener herramientas tan atractivas a nuestra disposición nos ayuda a crear experiencias web visuales inmersivas, sin perder visitantes.

     

    Como desarrolladores web, a menudo se nos pide que creemos aplicaciones que sean responsivas y ricas en medios. Tener estos requisitos implementados significa que debemos trabajar con puntos de interrupción de imágenes, así como consultas de medios, ya que queremos brindar la mejor experiencia a los usuarios finales. Para agregar a la lista de requisitos, es posible que necesitemos usar un marco de front-end como Angular, que es excelente para crear SPA y otros tipos de aplicaciones.

    En este artículo, veremos los puntos de interrupción de imágenes, sus casos de uso y un ejemplo práctico; Los implementaremos en una aplicación Angular utilizando el propio BreakPoint Observer de Angular. Al utilizar este enfoque, también destacaremos por qué este popular marco nos ayuda a trabajar con las técnicas antes mencionadas de manera fluida.

    Puntos de interrupción de imágenes e imágenes responsivas

    En la era de los diseños responsivos (donde capturamos puntos de interrupción según el tamaño de la ventana gráfica y, según el punto de interrupción, cambiamos el diseño de la página), también debemos asegurarnos de que las imágenes se puedan mostrar con las dimensiones correctas, incluso después de un diseño. cambiar. Seleccionar la imagen correcta es todo un desafío para los sitios web responsivos modernos.

    Analicemos dos opciones que los desarrolladores pueden utilizar en este momento.

    srcset

    srcsetnos permite definir una lista de imágenes entre las que el navegador cambia según el imgtamaño renderizado y la densidad de la pantalla.

     

    Echemos un vistazo a un ejemplo:

    img src="tuscany.jpg" /

    En lo anterior, especificamos 3 imágenes, indicando wel ancho de píxeles de la imagen. Cuando usamos lo anterior, srcsettambién necesitamos especificar el sizesatributo (esto es obligatorio porque la especificación exige que si lo usamos srcset, wtambién debemos tener un atributo de tamaños). ¿Cuál es el propósito de este atributo? Los navegadores deben elegir qué recurso cargar de un conjunto de fuentes antes de diseñar la página (antes de saber qué tan grande terminará siendo la imagen). Podemos considerarlo sizescomo una sugerencia para el navegador de que, después del diseño, la imagen ocupará el 100% del ancho de la ventana gráfica (a eso se vwrefiere). El navegador conoce el ancho real de la ventana gráfica (así como el DPR de la imagen) en el momento de la carga, por lo que puede hacer los cálculos para determinar qué tamaño de recurso necesita y elegir uno del conjunto de fuentes.

    Las combinaciones de elementos picturey source media=""nos permiten cambiar recursos de imagen en respuesta a consultas de los medios, como las que se encuentran en los puntos de interrupción del diseño.

    Veamos también un ejemplo de esto:

    picture source media="(min-width: 1440px)" source media="(min-width: 900px)" source media="(min-width: 600px)" img src="../assets/images/tuscany-sm.jpg" / /picture

    Cambie el código de arriba localmente con una imagen de su elección que tenga tamaño pequeño, mediano y grande. Observe cómo, al cambiar el tamaño del navegador, obtiene una imagen diferente.

    La conclusión clave de todo lo anterior es que si queremos intercambiar imágenes en puntos de interrupción específicos, podemos usar el pictureelemento para colocar consultas de medios directamente en el marcado.

    Nota : si está interesado en explorar las diferencias entre `

    Hasta ahora hemos discutido cómo usar puntos de interrupción de imágenes junto con consultas de medios en un entorno HTML puro. ¿No sería mucho mejor tener una forma conveniente, casi semiautomática, de generar puntos de interrupción de imágenes, así como las imágenes correspondientes a los puntos de interrupción, incluso sin tener que especificar consultas de medios? Afortunadamente para nosotros, Angular tiene un mecanismo incorporado para ayudarnos y también veremos cómo generar las imágenes apropiadas dinámicamente según ciertas condiciones mediante el uso de un servicio de terceros.

    Módulo de diseño angular

    Angular viene con un módulo de diseño que se encuentra en el conjunto de herramientas CDK (Component Dev Kit). Angular CDK contiene herramientas bien probadas para ayudar con el desarrollo de componentes. Una parte del CDK es el módulo de diseño que contiene un archivo BreakpointObserver. Este asistente brinda acceso a puntos de interrupción de consulta de medios, lo que significa que los componentes (y sus contenidos) pueden adaptarse a los cambios cuando el tamaño del navegador (tamaño de la pantalla) se cambia intuitivamente.

     

    Lectura recomendada : Módulo de diseño

    Ahora que hemos dejado de lado la teoría, vayamos al grano y creemos una aplicación que implementará puntos de interrupción de imágenes responsivos. En esta primera iteración, crearemos el shell de la aplicación a través de Angular CLI: ng new bpoy seleccionaremos las opciones necesarias.

    Para usar BreakpointObservertambién necesitamos instalar el módulo de diseño CDK de Angular, lo cual podemos hacer a través de npm: npm i @angular/cdk.

    Después de la instalación, podremos agregar las declaraciones de importación necesarias a cualquier componente que deseemos:

    // app.component.tsimport { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

    Usando BreakpointObserverpodemos suscribirnos a los cambios en el ancho de la ventana gráfica y Angular nos brinda accesores convenientes, lo que significa que no necesitamos usar consultas de medios en absoluto. Sigamos adelante y probemos esto:

    // app.component.tsconstructor(public breakpointObserver: BreakpointObserver) { }ngOnInit() { this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result = { if (result.breakpoints[Breakpoints.XSmall]) { // handle XSmall breakpoint } if (result.breakpoints[Breakpoints.Small]) { // handle Small breakpoint } if (result.breakpoints[Breakpoints.Medium]) { // handle Medium breakpoint } if (result.breakpoints[Breakpoints.Large]) { // handle Large breakpoint } if (result.breakpoints[Breakpoints.XLarge]) { // handle XLarge breakpoint } }); }

    Como se mencionó anteriormente, las propiedades del acceso anterior reflejan las consultas de medios de la siguiente manera:

    • Breakpoints.XSmall: ancho máximo = 599.99px
    • Breakpoints.Small: ancho mínimo = 600 px y ancho máximo = 959,99 px
    • Breakpoints.Medium: ancho mínimo = 960 px y ancho máximo = 1279,99 px
    • Breakpoints.Large: ancho mínimo = 1280 px y ancho máximo = 1919,99 px
    • Breakpoints.XLarge: ancho mínimo = 1920px

    Ahora tenemos todo en su lugar, lo que significa que podemos comenzar a generar las imágenes adecuadas.

    Puntos de interrupción responsivos para imágenes

    Tenemos algunas opciones para generar imágenes responsivas:

    1. Generador de puntos de interrupción de imágenes responsivo
      Usando esta herramienta, podemos cargar cualquier imagen, configurar varias opciones, por ejemplo, la cantidad de imágenes que deseamos generar. Después de ejecutar la herramienta, tendremos una representación visual de las imágenes generadas y podremos descargarlas como un archivo zip junto con algún código generado que utilice el pictureelemento mencionado anteriormente.
    2. Otra solución sería crear un paso de compilación para que nuestro proyecto genere puntos de interrupción a través de algunos paquetes disponibles en el repositorio de NPM, como gulp-responsiveo grunt-responsive-images. Ambos dependen de bibliotecas adicionales que debemos instalar para nuestro sistema operativo. (Consulte los repositorios correspondientes para obtener información adicional).
    3. Otra solución más sería utilizar un servicio como Cloudinary para almacenar las imágenes y servirlas en un tamaño y formato que necesitemos sólo modificando la URL del recurso solicitado. Este será nuestro enfoque ya que nos da la mayor flexibilidad.

    Lectura recomendada : Automatización de la dirección de arte con el generador responsivo de puntos de interrupción de imágenes de Eric Portis

     

    He subido la imagen original a mi cuenta de Cloudinary, lo que significa que puedo acceder a esa imagen a través de la siguiente URL:

    https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg

    Esta es la imagen en tamaño completo, sin formato, original y sin cambios con la que trabajaremos.

    Podemos modificar la URL de la imagen para generar una versión mucho más pequeña. Por ejemplo, si queremos tener una imagen con un ancho de 600 píxeles, podríamos actualizar la URL* de Cloudinary para que sea la siguiente:

    https://res.cloudinary.com/tamas-demo/image/upload/w_600/breakpoints-article/tuscany.jpg 

    * Tenga en cuenta lo w_600agregado a la URL.

    Con suerte, a estas alturas ya verás hacia dónde va todo esto. Con base en el enfoque anterior, podemos comenzar muy rápidamente a generar la imagen correcta para el punto de interrupción correcto.

    Usar Cloudinary significa que no necesitamos crear, almacenar y administrar múltiples versiones de la misma imagen; Cloudinary lo hace sobre la marcha.

    Actualicemos nuestro código:

    !-- app.component.html --div h1Current breakpoint: {{ breakpoint }}/h1 img [src]="imagePath"/div
    // app.component.tsimport { Component, OnInit } from '@angular/core';// ...export class AppComponent implements OnInit { imagePath; constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ ... }}

    Podemos elegir cualquier número de puntos de interrupción para observar de la lista mencionada anteriormente y, como tenemos un observador, podemos suscribirnos a los cambios y actuar en consecuencia:

    this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge]).subscribe(result = { if (result.breakpoints[Breakpoints.XSmall]) { // handle this case }});

    Para manejar las opciones para las diferentes imágenes en Cloudinary, utilizaremos un enfoque que será muy fácil de seguir. Para cada caso, crearemos una variable de opciones y actualizaremos la URL final de Cloudinary.

    Agregue lo siguiente en la parte superior de la definición del componente:

    // app.component.tsimagePath; breakpoint; cloudinaryOptions; baseURL = 'https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg';

    Y agregue lo siguiente también a la primera ifdeclaración:

    // app.component.tslet url = this.baseURL.split('/');let insertIndex = url.indexOf('upload');const options = 'c_thumb,g_auto,f_auto,q_auto,w_400';url.splice(insertIndex + 1, 0, options);this.imagePath = url.join('/');this.breakpoint = Breakpoints.XSmall;

    El resultado será una URL de Cloudinary actualizada:

    https://res.cloudinary.com/tamas-demo/image/upload/c_thumb,g_auto,f_auto,q_auto,w_400/breakpoints-article/tuscany.jpg

    ¿Cuáles son las opciones que estamos configurando aquí?

    • c_thumb(genera una miniatura de la imagen);
    • g_auto(se centra en la parte más interesante; vemos la catedral en la miniatura);
    • f_auto(ofrece el formato más apropiado para un navegador determinado, es decir, WebP para Chrome);
    • q_auto(reduce la calidad, y por lo tanto el tamaño general, de la imagen sin afectar las imágenes);
    • w_400(establece el ancho de la imagen en 400px).

    Por curiosidad, comparemos el tamaño de la imagen original con esta imagen recién generada: ¡2,28 MB frente a 29,08 KB!

    Ahora tenemos un trabajo sencillo: necesitamos crear diferentes opciones para diferentes puntos de interrupción. Creé una aplicación de muestra en StackBlitz para que puedas probarla de inmediato (también puedes ver una vista previa aquí ).

    Conclusión

    La variedad de dispositivos móviles y de escritorio y la cantidad de medios utilizados en la web actual ha alcanzado un número sorprendente. Como desarrolladores web, debemos estar a la vanguardia en la creación de aplicaciones web que funcionen en cualquier dispositivo y no afecten la experiencia visual.

    Existe una buena cantidad de métodos que garantizan que la imagen correcta se cargue en el dispositivo correcto (o incluso al cambiar el tamaño de un dispositivo). En este artículo, revisamos un enfoque que utiliza una función Angular incorporada llamada BreakPoint Observer que nos brinda una interfaz poderosa para manejar imágenes responsivas. Además, también echamos un vistazo a un servicio que nos permite servir, transformar y gestionar imágenes en la nube. Al tener herramientas tan atractivas en nuestras manos, aún podemos crear experiencias web visuales inmersivas, sin perder visitantes.

    (dm, il)Explora más en

    • javascript
    • Angular
    • Medios de comunicación
    • Imágenes responsivas





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Gestión de puntos de interrupción de imágenes con Angular

    Gestión de puntos de interrupción de imágenes con Angular

    SmashingConf Nueva York 2024 ¡Registro! Índice Puntos de interrupción de imágenes e imágenes responsi

    programar

    es

    https://aprendeprogramando.es/static/images/programar-gestion-de-puntos-de-interrupcion-de-imagenes-con-angular-968-0.jpg

    2024-05-20

     

    Gestión de puntos de interrupción de imágenes con Angular
    Gestión de puntos de interrupción de imágenes con Angular

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20