Cómo usar HTML5
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
Cómo hacerse rico como diseñador
Muchas personas sueñan con hacerse ricos haciendo lo que aman . Los diseñadores, en general, entran en el diseño porque simplemente les encanta. Pero eventualmente, las realidades de ganarse la vida, pagar las cuentas, alimentar a su familia, etc. tienen prioridad sobre sus sueños creativos, y puede encontrarse asumiendo clientes y proyectos que nunca pensó que haría por el dinero.La ma
Software para diseñadores web con presupuesto - Guía definitiva
El diseño web puede ser costoso para los diseñadores; no solo su proceso lleva mucho tiempo, sino que sus herramientas también implican una fuerte inversión monetaria. Los diseñadores de presupuesto a menudo son golpeados con el mismo dilema: una máquina poderosa y un software menor, o conformarse con una máquina promedio para que pueda comprar más software relacionado con el diseño, pero en el comercio sufre por el retraso del sistema épico.Los edito