Diseño web responsive: Imágenes

Usando Picturefill en nuestro proyecto web

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
A través de un ejemplo práctico, veremos cuáles son los pasos necesarios para poder empezar a trabajar con Picturefill. Lo añadiremos a un proyecto HTML sencillo que nos servirá como base para incluir imágenes responsive.
06:24

Transcripción

Vamos a incluir el polyfill de Picturefill dentro de nuestro proyecto web. Pero antes de poder hacerlo, vamos a echarle un vistazo a los archivos con los que voy a trabajar. Tengo en una carpeta la siguiente estructura: por un lado tengo una carpeta donde tengo incluidas diferentes imágenes. Estas son las imágenes que voy a utilizar cuando vaya a montar el nuevo marcado HTML con el que usar Picturefill y poder cargar diferentes imágenes en función del tamaño del viewport. De esta manera, recordemos que estamos solucionando la principal problemática del uso de imágenes actualmente en un entorno responsive. En vez de tener una única imágen para todos los dispositivos con todos los problemas que eso supone, vamos a preparar diferentes imágenes, que se ajusten lo máximo posible a cada uno de los diferentes dispositivos con los que se pudiese acceder a nuestra página web. Este pequeño aviso, este pequeño marcador, simplemente lo he incluido para este ejercicio. Evidentemente, nosotros en nuestros proyectos no vamos a tener que incluirlo, pero de esta manera así vamos a poder ver muy rápido que Picturefill funcione correctamente. Bueno, lo dicho. Tenemos estas imágenes. Por aquí vamos a cerrar, vamos a volver para atrás. Tengo una carpeta llamada js, que es donde incluiré la librería de Picturefill. Siempre es bueno ser ordenado y en vez de tirarlo todo dentro del directorio raíz, creo que es siempre muy recomendable tenerlo separado en carpetas. Tengo un archivo HTML, vamos a abrirlo por ejemplo con Sublime... donde el contenido, bueno, pues no tiene mucho misterio. Tengo una estructura HTML, donde en lo que me tengo que fijar es que tengo aquí un etiquetado de una imagen. Y bueno, no tengo mucho más en lo que fijarme ahora mismo. Por otro lado, también tengo un archivo de style.css, que es justo este que tengo aquí. Vamos a mostrarlo nuevamente en Sublime. No tiene tampoco mucho misterio, no tiene absolutamente nada extraño. Simplemente era el archivo de estilos que había usado antes para definir que las imágenes dentro de un contenedor, este que tengo aquí, ocupasen el 100% del ancho del contenedor. Podemos abrir rápidamente el HTML. Vamos a mostrarlo aquí en pantalla. Aquí lo tenemos. Vamos a ponerlo ahí. Aquí estaría. Si ejecutamos por ejemplo el emulador vemos que no tiene nada de particular. Cómo incorporamos Picturefill por tanto, bueno, pues a este ejercicio o a cualquier proyecto con el que queramos trabajar, incluso un HTML de ejemplo. Bueno, pues lo único que tenemos que hacer es dirigirnos a la página oficial del proyecto y buscar el botón de descarga del fichero. En este caso, los tenemos aquí, lo que son las versiones. Tenemos una versión 3 de Picturefill. La versión 2.3.1. Tenemos la última versión. Siempre que sea estable, bueno, pues siempre recomiendo usar la última versión. Podemos bajarnos la versión de desarrollo en caso de que, bueno, fuésemos unos usuarios más avanzados y quisiéramos ver o trabajar con el contenido de este archivo. Aunque generalmente, bueno, pues en este caso, nosotros no creo que vayamos a necesitar entender todo lo que se hace dentro de la librería, con lo cual podemos bajarnos la versión comprimida, que va a ocupar mucho menos espacio y por tanto va a tardar menos en cargar. Simplemente, nada. Nos guardamos el archivo como queramos. Podemos guardar el enlace, podemos hacer como nosotros consideremos oportuno. Vamos a guardarlo en escritorio dentro de la carpeta que tengo aquí: js. Lo guardamos. Ya lo tenemos aquí. Vamos a asegurarnos de que se ha guardado correctamente dentro de la carpeta, js. Aquí tengo el archivo. Vamos a volver a la web, porque además de tener el archivo guardado, evidentemente tenemos que cargarlo, tenemos que lanzarlo de alguna forma dentro de mi documento. Y bueno, para eso simplemente, bueno, pues podemos hacer uso del código que incluyen dentro de la página para poder hacer la carga oportuna. Aquí hacemos la llamada al archivo. Y aquí tenemos cómo lanzaríamos la librería de Picturefill para que empezase a funcionar. Así pues, nada, podemos simplemente coger este código de aquí. Lo copiamos. Nos lo llevamos a nuestro HTML. Vamos a poner aquí la llamada. Vamos a indicar la ruta correcta, que lo tenemos en la carpeta js. Y también vamos a hacer la llamada de este script. Aquí lo tenemos. Lo copiamos. No hace falta copiar el etiquetado head en este caso porque ya lo tenemos nosotros incluido. Y lo ponemos debajo de la llamada de la librería. Vamos a dejarlo un poco más limpio y más bonito. Este lo borramos... porque no lo necesitamos. Podemos incluir este pequeño detalle de async para hacer una carga asíncrona de la librería, es decir, si no lo pusiésemos, a la hora de cargar los diferentes elementos del documento HTML, bueno, pues como se va renderizando la carga de los elementos, el navegador nos saltaría hasta cargar los siguientes elementos hasta que nos hubiese cargado por completo la librería de Picturefill. Si nosotros queremos que la carga no se vea bloqueada en ese momento por el tiempo de carga o por lo que puede suponer cargar esta librería en concreto, podríamos incluir esa funcionalidad. En nuestro caso, la pongamos o no la pongamos, no nos va a influir para nada a la hora de trabajar con Picturefill. Lo único que nos quedaría es guardar, realmente, para poder empezar a trabajar con Picturefill dentro de este ejemplo, o dentro de cualquiera de nuestros proyectos. Guardar. Y tendríamos que dirigirnos simplemente al navegador para comprobar que todo funcione correctamente.

Diseño web responsive: Imágenes

Aprende los conceptos básicos sobre la creación y el uso de imágenes en un entorno digital responsive, donde lo que importa es el usuario y los contenidos que le interesan.

1:54 horas (24 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:25/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.