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 avanzado: Automatizaciones y trabajo con PHP y CSS

Dreamweaver y servicios en línea Adobe

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En este primer vídeo vamos a ver la forma más habitual de trabajar con imágenes dentro de la Creative Cloud y Dreamweaver, esto es, añadiendo las imágenes a bibliotecas y luego reutilizando estas bibliotecas para añadir los recursos dentro del programa.

Transcripción

Cuando estamos creando sitios web tenemos que tener mucho cuidado con las imágenes y el preparar de hecho estas imágenes a los tamaños en los que tienen que aparecer suele ser buena parte del trabajo de desarrollo. Normalmente, a los desarrolladores no les suelen dar las imágenes ya listas, sino que generalmente no tienen conocimientos suficientes y delegan en nosotros. Hay formas de hacer que esta generación de imágenes sea muy simple y sea muy fácil. En principio siempre tenemos que hacer que las imágenes vayan a ir al tamaño al que se van a mostrar. O si son imágenes que se tienen que adaptar al tamaño de la pantalla, pues que salgan al tamaño máximo previsto en el que se vayan a ver. Para crear estas imágenes con esos tamaños, como digo, tenemos las posibilidades de trabajar con Photoshop, con Fireworks o con la Creative Cloud directamente. Y en los tres casos veremos cómo se van a remuestrear las imágenes y generar los recursos necesarios automáticamente. La primera cosa que voy a hacer va a ser trabajar con la Creative Cloud. Dentro de Photoshop tengo un documento que tiene dos capas. Vamos a tener varias formas distintas de trabajar. Supongamos por ejemplo que yo lo que tengo aquí es en realidad una maqueta de un documento, de una página, en la que tengo diferentes elementos. Bueno, pues yo tengo la posibilidad de, bueno, lo primero crearme una nueva biblioteca para mi sitio. Y dentro de ella ir añadiendo todos los assets necesarios. Por ejemplo, puedo hacer que el documento esté guardado como capas. Selecciono una capa, me voy a "Biblioteca", pulso en "Añadir" y aquí puedo elegir qué quiero crear. En realidad lo que debería de añadir es simplemente el "Gráfico", porque es lo que voy a utilizar. Así que eso me va a añadir el gráfico de esa capa en concreto. Puedo seleccionar la siguiente capa, y puedo realizar exactamente la misma tarea. Pulsar, seleccionar el "Gráfico" y añadir ese gráfico. O puedo también añadir varias. Puedo hacer una selección de todas las capas que quiera añadir. Con la tecla "Mayúsculas" selecciono varias capas y selecciono la "Biblioteca", vuelvo otra vez a añadir "Gráfico", y aquí tendría ese gráfico completo. Como podemos ver, podemos descomponer los gráficos. Podemos utilizarlos también, pues eso, mezclados. Cuando se ha sincronizado esa "Biblioteca" tendré acceso a sus elementos dentro de "Ventana" "Bibliotecas CC", dentro de "Dreamweaver". Y de hecho, aquí tengo la biblioteca para el curso y tengo esos tres elementos. Y ahora la utilización de estos elementos es verdaderamente simple. Por ejemplo: ¿Que quiero añadir solamente el texto? Bueno, pues simplemente pincho, arrastro, lo coloco donde quiero que vaya. Y esto es muy importante. Me permite elegir la carpeta donde quiero que se guarde y además con el nombre con el que quiero que se guarde. Entonces, por ejemplo, pues esto podría llamarlo: "texto_rodilla". Además, puedo elegir también el formato en el que quiero que se guarde: JPG, PNG, etc. En este caso un PNG para que sea transparente. Y también puedo hacer que una vez que se ha generado, se desvincule completamente de este archivo de la biblioteca y así ya tenga ese asset, ese recurso, sin necesidad de que sea completamente independiente a los posibles cambios que pueda hacer más adelante. Y por último, y esto también es muy importante, puedo elegir el tamaño máximo en el que va a aparecer. Supongamos que yo tengo un diseño en el que sé que el máximo va a ser 400 píxeles. Pues pondría ese 400 píxeles. Haciendo clic sobre el botón de "No restringir proporción", pues lo que haría sería, eso, que pudiese hacer cambios sin que se mantuviesen siempre las proporciones. Pulso en "Aceptar". Y esto, aquí lo podemos ver, me aparece esa imagen, transparente, con el efecto que tiene esa capa además. Y de hecho, también veremos que tiene, cuando actualice la vista, que haber generado ese "texto_rodillapng". Bueno, lo escribí mal, pero el efecto es exactamente el mismo. Si yo más adelante necesito volver otra vez a hacer ajustes, porque este elemento tiene que cambiar de tamaño, o tengo que hacer cualquier cosa con él, siempre puedo hacer clic sobre la biblioteca de ajustes. Me vuelve a mostrar la misma ventana, y entonces en él, pues puedo por ejemplo hacer, ahora voy a conseguir que sea un poquito más pequeño. Bueno, pues seleccionaría de nuevo ese valor de "Remuestreo", pulsaría en "Aceptar", e inmediatamente me cambiaría ese tamaño. Ahora mismo me aparece al tamaño sin haber cambiado, porque lo he añadido sobre la vista en vivo y por defecto, añade el alto y el ancho sobre la imagen. Pero si los elimino, pues vemos que ha actualizado efectivamente ese tamaño. Como digo, en vez de utilizar ese asset, puedo utilizar cualquiera de ellos. Va a consistir siempre en lo mismo. Bibliotecas CC. Arrastrar el objeto donde quiero que lo añada. Elegir el nombre con el que quiero que me genere ese nuevo archivo, en este caso va a ser un JPG. Le voy a pedir que tenga 400 píxeles de ancho. Pulsaría en "Aceptar". Aquí me ha generado este archivo, podemos verlo, como un archivo JPG. Y podría de nuevo también, bueno pues eliminar... el tamaño que tiene por defecto, por cierto, que aquí esta imagen me ha quedado un poco demasiado grande. Voy a eliminarla para que no me estorbe. Bien, pues como decía. Aquí tengo este archivo, que efectivamente se coloca con el tamaño que le he pedido que tenga por defecto. Y se ha guardado de nuevo en la carpeta "Imágenes". Si vuelvo otra vez a recargar, efectivamente, vemos ahí ese archivo JPG. ¿Y qué ocurriría si ahora, por ejemplo, me dice el cliente que quiere que aparezca ese texto con mayúsculas? Bueno, vuelvo de nuevo a Photoshop, me voy a la "Biblioteca CC", con el botón derecho pido que se edite ese documento, aquí lo tendría. Con la herramienta adecuada... cambiaría, guardaría el documento. Está actualizando. Y lo que está haciendo es, además, ahí se podía ver, está trabajando para que cuando yo vuelva otra vez a Dreamweaver, automáticamente se puede observar que me ha generado de nuevo el recurso, pero en este caso ya con la mayúscula. O sea, que yo en un momento determinado, puedo trabajar con mis archivos desde Photoshop. Y automáticamente se van a ejecutar todos los cambios en todos ellos a través de las bibliotecas relacionadas. Como se puede imaginar esta es la forma ideal de trabajar con Dreamweaver, utilizando la "Biblioteca CC" para añadir los recursos.

Dreamweaver CC 2017 avanzado: Automatizaciones y trabajo con PHP y CSS

Utiliza Dreamwaver CC 2017 para crear y automatizar contenidos dinámicos. Aprende cómo mejorar tu flujo de trabajo y usar el programa como un gran IDE de programación web.

2:33 horas (43 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.