por Prácticas de CSS para crear una Imagen Receptiva | 16, diciembre 2020
¿Alguna vez te has preguntado sobre los sitios web para móviles? Si tomaste la ruta del diseño receptivo, entonces debes establecer una estrategia para hacer una imagen receptiva. Las reglas básicas son simples después de que tu maestro comience a escalar las imágenes.
También puede ser que se enfrente a la actuación y la dirección de arte para resolver algunos problemas. Hay muchas prácticas para crear una imagen receptiva y cada una de ellas con sus debilidades y fortalezas. Este artículo te ayudará a luchar contra dos enormes enemigos: la imagen receptiva y los plazos de tiempos.
PICTUREFILL
El Internet tiene alcance mundial, pero olvidamos que no todos tienen la misma calidad de acceso a las conexiones de fibra óptica y a las redes 4G. Scott Jehl se ha dado cuenta de esta brecha digital sobre la idea de sitios móviles y de respuesta. Jehl tiene un script de picturefill , donde propone el elemento <picture>. Este código de JavaScript simula el API de la imagen.
Picturefill no necesita jQuery, pero requiere el script picturefill.js, y otro requisito es un markup especial con divs para representar la variación de la imagen, diferenciado por atributos de datos-medios de comunicación que actúan como consultas de medios en CSS.
Dado que Picturefill requiere mucho markup personalizado, no es la mejor opción si no se puede modificar el código fuente de tu sitio web.
MODO NETFLIX
Es un pequeño truco que funciona en todas partes, donde necesitas envolver tu imagen con un padre relativamente rellenado. Aquí mantendrás la ratio de una imagen receptiva con un porcentaje en la propiedad de relleno.
El código se ve así:
IMAGEN ADAPTATIVA
Imágenes adaptables, creadas por Matt Wilcox, es una solución del lado del servidor que requiere un poco de JavaScript. Sin embargo, el trabajo duro es manejado a través del servidor web Apache 2, PHP 5.x, y la biblioteca GD.
Para agregarlo a tu servidor Web, debes usar el archivo .htaccess, luego sube algunos archivos PHP al directorio raíz de tu sitio web. Tienes que añadir algo de Javascript a tus páginas y modificar algunas variables de punto de ruptura en los archivos PHP. De esta manera, coincidirá con las consultas de medios de tu sitio web.
La ventaja de usar la Imagen Adaptable es que no requiere un marcado personalizado en sus imágenes. Cuando todo esté terminado, el script PHP interpretará cualquier solicitud de una imagen y la adaptará al tamaño de su punto de ruptura específico y la entregará en sus páginas automáticamente.
CAPTURANDO/MOBIFY.JS 2.0
Es una nueva característica del desarrollo Mobify.js 2.0 que permite el acceso al HTML. En esta etapa, podrás intercambiar el atributo src de una imagen antes de que el navegador la descargue. La captura es una técnica que evita directamente la precarga nativa del navegador, lo cual puede causar un problema de rendimiento si se usa mal.
Las formas de arriba pueden no ser las únicas, pero no se consideran lo suficiente en su sitio de negocios. De hecho, puede ayudarte con las prácticas de CSS para crear imágenes que respondan a las necesidades de tu sitio empresarial. Sobre todo, los desarrolladores de Glajumedia pueden darle esa tranquilidad al expandir su sitio web.
En un mundo cada vez más digital, desarrollar una aplicación móvil se ha convertido en una necesidad para muchas empresas y emprendedores. Sin embargo, uno de los primeros desafíos es decidir con qué herramientas trabajar. Elegir correctamente puede marcar la diferencia entre elegir las mejores herramientas para desarrollar una aplicación móvil exitosa y un proyecto […]
En la era digital, la automatización se ha convertido en un factor clave para mejorar la experiencia del usuario y aumentar las ventas. Los chatbots en comercio electrónico han surgido como una herramienta poderosa para optimizar la atención al cliente, mejorar la conversión y reducir costos operativos. Descubre cómo estos asistentes virtuales están transformando la […]
Los frameworks de desarrollo web han revolucionado la forma en que se crean sitios y aplicaciones en internet. Gracias a ellos, los desarrolladores pueden optimizar su tiempo y mejorar la calidad del código. En este artículo, exploraremos qué son, los tipos que existen y cómo elegir el mejor para tu proyecto. ¿Qué es un framework […]