Cómo usar HTML5 Elemento para lograr una imagen receptiva

El diseño receptivo puede estar aquí para quedarse, pero hay muchos problemas que deben abordarse cuando se trata de hacer que las imágenes sean receptivas . Aunque las imágenes con capacidad de respuesta se redimensionan automáticamente según el tamaño de la ventana gráfica (lo que es técnicamente sencillo), un problema al que se enfrentan los usuarios es que el punto vocal de la imagen apenas será visible cuando la imagen sea demasiado pequeña .

El consenso ideal entre los desarrolladores web es que la dimensión real también debería ser receptiva . El navegador debería poder cargar imágenes más pequeñas o más grandes de acuerdo con el tamaño de la ventana gráfica. De esta forma, podemos dirigir y entregar la mejor proporción de imagen en lugar de la imagen encogida (como se muestra).

Aquí es donde entra el elemento de picture HTML5. La picture nos permite proporcionar múltiples fuentes de imágenes y controlar la entrega a través de consultas de medios. Aunque todavía no hay ningún navegador que implemente este elemento, podemos usar un relleno llamado Picturefill para hacer esto. Veamos cómo se hace, ¿de acuerdo?

Empezando

Picturefill es una biblioteca de JavaScript desarrollada por Filament Group. Nos permite usar el elemento de picture ahora. Para comenzar, descargue el script en el repositorio de Github y coloque el picturefill.js o picturefill.min.js . Picurefill es una biblioteca de JavaScript independiente que no requiere ninguna otra biblioteca para funcionar. Simplemente puede agregarlo en la etiqueta de la head .

La imagen

He preparado una imagen en tres dimensiones diferentes, de la siguiente manera. La imagen ha sido recortada para conservar el foco en la persona en la imagen. El plan aquí es que mostraremos el tamaño más pequeño en pantallas pequeñas y la imagen más grande en pantallas grandes.

Usar elemento de imagen

Picturefill puede funcionar de dos maneras: podemos insertar srcset en la etiqueta img o usar el elemento de picture . Aquí optaremos por el elemento de picture ya que es más manejable, más fácil de entender y más legible.

De forma similar a audio elementos de video y audio, la picture envuelve varios elementos source que apuntan a la fuente de la imagen, de la siguiente manera.

El elemento de source, como puede ver en el fragmento de código anterior, se configura con el atributo de media . En este atributo especificamos el punto de corte de la ventana en la que se debe presentar la imagen. Puedes ver el efecto de inmediato.

Echa un vistazo a la página de demostración y cambia el tamaño del tamaño de la ventana gráfica, debes encontrar la imagen que se muestra dentro del ancho de la ventana gráfica especificada.

Picturefill para WordPress

Si está usando WordPress, puede usar un complemento llamado Picturefill.WP que le permite implementar el elemento de imagen en WordPress, sin la molestia. Simplemente cargue e incruste su imagen como de costumbre, y este complemento se encargará del resto.

Pensamiento final

El elemento de picture es una gran adición en HTML5. Tenemos más control sobre el tamaño y la dimensión de la imagen que debe presentar el navegador. Y con picturefill podemos usar este nuevo elemento ahora mismo aunque ningún navegador lo haya implementado todavía. Picturefill funciona en una amplia gama de navegadores incluidos en IE (aunque con algunas advertencias).

Por último, vea la demostración y descargue el código fuente a continuación.

• Manifestación
• Descargar Fuente

Genera metaetiquetas sociales fácilmente con esta aplicación

Los sitios de redes sociales más grandes prácticamente se han apoderado del mundo, con Facebook actualmente empujando hacia 2 mil millones de usuarios en todo el mundo.Uno de sus muchos avances en la tecnología es el protocolo Open Graph o OG . Estas etiquetas OG se han convertido en la norma en otras redes sociales como Pinterest y LinkedIn, por lo que tenerlas en su sitio puede ser tremendamente beneficioso.Y

(Consejos de tecnología y diseño)

Diseño de confianza: cómo agregar elementos de confianza a sus diseños

La confianza es difícil de construir pero necesaria para cualquier gran sitio web. Si no puede generar confianza con sus lectores, ¿por qué volverían a su sitio?Ya sea que ejecute un blog, un producto SaaS o una agencia de clientes, no es fácil desarrollar confianza. Por lo general, solo toma tiempo crear una buena relación con su audiencia . Sin

(Consejos de tecnología y diseño)