El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Dreamweaver CC 2017 esencial

Añadir imágenes en Dreamweaver CC 2017: conceptos básicos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Antes de empezar a trabajar con las imágenes en las páginas web, es necesario tener unos mínimos conocimientos acerca de estas: qué tipos de imágenes hay o cómo se pueden obtener las mejores imágenes con el menos peso posible.

Transcripción

(hombre) Las páginas web tienes imágenes, estas imágenes van a servir para, por un lado dar información y, por otro lado, también dar aspecto. En esta página, por ejemplo, estamos utilizando dos formas distintas de uso de imagen, por un lado tenemos imágenes como puede ser esta, esta, o el logotipo, que son imágenes que están añadiendo información a la página como el logotipo, como decía, o como una foto en la que se ve la playa por la que se va a correr. Y hay otras imágenes que, en realidad, lo único que ofrecen, lo único que añaden es aspecto agradable, en este caso, la imagen de fondo en la que se ve este corredor al lado de la hierba. En cualquiera de los dos casos, de todas formas, ambas imágenes no están metidas dentro del código HTML. Si yo me voy a este código, vemos que, en realidad, no hay código de imagen hay solamente texto HTML. Y es que cualquiera de las imágenes realmente consiste en una etiqueta IMG que tiene un atributo SRC que hace referencia a la imagen en concreto. Moviéndome sobre el código o poniendo el cursor encima de cualquier SRC puedo ver una miniatura de esa imagen y su tamaño. Y, de hecho, en nuestro sitio, hemos creado una carpeta "Images" en la que hemos metido todas las imágenes del sitio. Es importante tener bien organizadas estas imágenes porque siempre vamos a tener, como digo, que meter sus rutas y, por tanto, puede ser completamente caótico una página en la que tengo las imágenes repartidas por todo el sitio. Hay más conceptos importantes a la hora de hablar de las imágenes y de "Dreamweaver", un programa que está muy bien pensado para trabajar con ellas. Pero, antes de empezar a utilizarlas, deberíamos de entender qué estamos añadiendo a nuestras páginas. Si yo pongo imágenes muy grandes dentro de la página, esas imágenes van a pesar mucho y van a absorber mucho ancho de banda con lo cual, van a tardar mucho en ser descargadas y voy tener un sitio que va a ser poco utilizable y, por tanto, que no va a gustar navegar con él. Así que es importante entender cómo podemos mejorar el uso de esas imágenes. Abriendo Photoshop puedo enseñar un poco los rudimentos de lo que es la imagen. Una imagen dentro de un ordenador consiste en una parrilla de cuadraditos de color. Si yo hago mucho zoom iré poco a poco viendo cada vez más esos cuadrados, y, llegamos a un punto en el que, efectivamente, se ve fácil cómo cada cuadrado tiene un color determinado asignado. Al alejarme, como esos cuadraditos, esos píxeles son muy pequeños, llega un momento en el que no se llegan a distinguir y, realmente, lo que estamos viendo es una imagen perfecta. Este es el planteamiento. Si yo tengo una imagen que ocupa mucho espacio de la pantalla, voy a necesitar muchos cuadraditos, muchos píxeles y, por tanto, la imagen va a ser muy pesada. Así que, primer concepto importante: tenemos que tener cuidado con las imágenes que van a ocupar mucho espacio; hay que procurar evitar utilizar demasiadas de estas, incluso limitar el tamaño de esas imágenes porque van a consumir mucho ancho de banda. Y, sobre todo hay que optimizarlas bien. Y esto me permite hablar de la segunda parte, que es cómo optimizamos estas imágenes. Hay varios formatos distintos de optimización. Hay varios programas diferentes de edición de imágenes que nos permiten exportar estas imágenes a diferentes formatos, y cada formato tiene su propia forma de comprimir esa imagen. Voy a seleccionar exportar y guardar para web, que aunque no es el modo más moderno que hay, si me va a servir para ejemplificar fácilmente las diferentes formas de exportar una imagen. La primera y la más conocida es el formato JPG. Este formato JPG consiste en que, en vez de guardar información de cada uno de esos puntitos, lo que hago es guardar información matemática acerca de los degradados que se van formando con esos puntos, así ya no tengo que guardar información sobre cada punto y, por tanto, la información va a venir comprimida. Aunque es más complicado que todo esto, sin embargo, es una forma muy fácil de explicarlo. Eso va a significar que para las imágenes como fotografías es un buen formato de compresión. En este caso, vemos que esta imagen queda en 500 y pico píxeles. Otro formato distinto, que también se utiliza cada día más, es el PNG. Este PNG tiene unas características diferentes. Básicamente, consiste en construir una tabla de colores y asignar cada uno de los píxeles a cada uno de esos colores. Con el PNG 24 no se nota tanto, pero con el PNG 8 aquí sí que podemos verlo. Al final estamos ahorrando peso también porque en vez de guardar la información completa de cada color en cada píxel lo que hago es guardar simplemente la posición de la tabla para cada uno de esos píxeles, y con eso se ahorra. De todas formas, en una imagen como esta podemos ver que el peso queda, en el mejor de los casos, en 1600/1500 ks o sea mega y medio, lo cual es muchísimo para una imagen. Pero, sin embargo, esto mismo si lo aplicamos a imágenes planas, a logotipos, a pequeños dibujos, sí que va a tener su sentido, y, de hecho, si vuelvo a abrir esto mismo dentro de "Guardar para Web" veo que pesa 8 ks como JPG y, en el caso del PNG, el de mejor calidad de entrada, ya pesa 7 ks y, si le limito el tamaño de la paleta de colores, vemos que queda todavía en menos, en la mitad. En el caso de los PNGs además hay otra característica interesante y es que permite tener el fondo transparente, y eso hace que yo pueda, por ejemplo en este caso, aunque todas las imágenes sean un rectángulo, dar la sensación de que la imagen no es rectangular; aquí sale recortada y eso es gracias a que he creado una imagen con ese fondo transparente. Así que, los PNG sirven también para crear imágenes con el fondo transparente. Y luego tenemos otros formatos de imagen, como GIF, que se utiliza muchos menos, o también formatos vectoriales, lo cual es otro concepto distinto. Aquí tengo una imagen, que es la misma de antes pero, en vez de estar hecha a base de puntitos, es una imagen vectorial, lo cual quiere decir que está hecha a base de ecuaciones matemáticas. Eso significa que da igual el nivel de zoom que haga que las curvas son absolutamente perfectas, aquí podemos verlo, no hay píxeles en ello. Esto tienen ventajas e inconvenientes. Como inconveniente es que tarda el navegador en renderizarlo, en imágenes complejas igual no es buena idea utilizarlos, y, por otro lado, que en imágenes simples funciona perfecto y es muy buena idea usarlos, por ejemplo para logotipos, porque eso me va a permitir poder hacer ampliaciones enormes de una imagen sin que se pierda peso, o sea sin que pese demasiado y sin que pierda calidad, pero, por otro lado, si la imagen es muy grande tendrá muchísimas curvas y eso significará que será muchísimo más pesada, así que también es una herramienta muy interesante que hay que usar con cuidado. El formato de estas imágenes va a ser el SVG. Y es, en realidad, un formato que es de código, y que, de hecho, podemos editar desde el mismo "Dreamweaver". Si me voy a "Nuevo documento" vemos que, efectivamente, se pueden crear o editar SVGs desde el propio "Dreamweaver". Bien, pues, sabiendo todo esto, ya tenemos los conocimientos mínimos requeridos para empezar a trabajar con imágenes. Como último concepto, si se quiere, hay un detalle más que es interesante explicar, y es que si yo voy a poner una imagen que como máximo va a tener un determinado tamaño, supongamos que tenga un máximo de 300 píxeles de ancho, no tienen sentido que yo en my sitio web tenga guardada esa imagen a 900 pixels de ancho porque jamás se va a ver más grande que esos 300 píxeles con lo cual estoy desperdiciando el ancho de banda, así que tengo que procurar guardar siempre las imágenes al mismo tamaño al que van a aparecer. Esto, de todas formas, veremos que se puede hacer automáticamente cuando trabajamos con la "Creative Cloud".

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

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.