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

Ayudas de Dreamweaver CC 2017 a la edición del código

¡Prueba gratis durante 10 días

nuestros 1198 cursos !

Prueba gratis Mostrar modalidades de suscripción
El sistema integrado en la versión CC 2017 de ayuda a la programación hace que no sea necesario escribir el código y que, con unas pocas letras, seamos capaces de recuperar las etiquetas, funciones o clases que queremos añadir al código.

Transcripción

(hombre) En la visualización, digamos, de diseño en vivo de Dreamweaver tenemos un panel de insertar que nos sirve que nos sirve para añadir los distintos tipos de componentes, de controles, de etiquetas que podemos ir creando. Esto mismo también lo podemos utilizar dentro de la vista de código. Por ejemplo, si yo quiero crear un nuevo artículo pues siempre tengo la posibilidad de añadir aquí un retorno de carro, de moverme dentro del panel de insertar y de hacer clic en ese 'Article'. Dentro de él me permite elegir dónde lo voy a insertar si es en el punto de inserción, delante, después etc. Por otro lado me permite añadirle clases ya por defecto, por ejemplo, en este caso sería la clase 'eventos' y luego, además, le podría añadir un identificador, pues, por ejemplo, añadir en concreto para ese evento, el identificador 'nuevo'. Pulsando en 'Aceptar' me añade todo ese objeto. Esto para un programador, en principio, no es una gran herramienta es una herramienta, más bien todo lo contrario, bastante molesta. Pero sin embargo, si estamos aprendiendo a programar es una herramienta buenísima, porque está ayudándome, de una manera muy fácil, a entender qué es lo que tengo que hacer. Se ve que él solo se ha ocupado de la sintaxis, se ha ocupado de añadir la clase y el identificador y los contenidos que van dentro. O sea, que si estamos aprendiendo a programar esta es una herramienta muy cómoda. Para aquellos que no estemos aprendiendo a programar, para los que ya sabemos realmente programar en los distintos lenguajes que componen el desarrollo web, también tenemos muchísimas herramientas y es que, en principio, para cualquier programador es imprescindible que el programa sea capaz de adivinar qué es lo que se va a hacer, y esto mismo es lo que hace Dreamweaver. En el momento en el que abro una etiqueta él inmediatamente entiende que voy a utilizar una etiqueta estoy dentro del lenguaje HTML, con lo cual me busca todas las etiquetas HTML y todas las que, además, respondan al patrón que voy escribiendo, de tal manera que si voy a crear un artículo si voy poniendo la 'a' y la 'r' él va limitando la cantidad de posibilidades, así, de esa manera, con tres letras yo ya me puedo mover fácilmente con las flechas del cursor, arriba o abajo hasta seleccionar la etiqueta, en concreto que me interesa. Cuando selecciono cualquiera de ellos, además, tengo información debajo. Si pierdo, por cualquier motivo, esa ayuda no pasa nada porque con 'Control+barra espaciadora' o con 'Comando + barra espaciadora' vuelvo otra vez a recuperarlo. Como digo, selecciono con las flechas, hago 'intro' y puedo seguir escribiendo. En el momento en el que sabe que estoy dentro de una etiqueta y que he añadido un espacio, también interpreta que lo que quiero es añadir atributos, así que me vuelve otra vez a sacar un listado con los posibles atributos que puedo utilizar y si voy a añadir una clase, como había hecho previamente, pues con escribir 'c' o 'cl' ya me ha limitado las opciones, me permite hacer una selección. Es más, ni siquiera necesito escribir la clase porque él me recupera las clases que ya tengo asociadas en los estilos CSS a ese documento, y entonces me permite hacer selecciones de nuevo mediante filtrar las letras que voy añadiendo. Así que ahora selecciono 'eventos' en el momento en el que cierro la etiqueta él se ocupa también de añadir esa etiqueta de cierre, con lo cual también es muchísimo más cómodo. Se puede ver que sin utilizar el ratón y con muy pocas teclas he conseguido generar contenidos de una manera muy rápida. Un ejemplo de esto un poco más avanzado, pues por ejemplo, lo siguiente que tengo que añadir es una imagen, pues vamos a verlo funcionando de verdad. Voy haciendo las selecciones de los distintos elementos puedo seleccionar en un momento dado una carpeta cualquiera pero es que ni siquiera necesito hacer eso, puedo moverme fácilmente por las distintas carpetas con el desplegable y dentro de ellas buscar la fotografía que quiera utilizar. En mi caso va a ser esta, aunque esté repetida. Como vemos es una forma muy fácil y muy intuitiva de trabajar. ¿Para grandes programadores? Lo bueno que tiene es que puedes programar rapidísimo. ¿Para programadores con menos experiencia? Pues el hecho de que te vaya dando las opciones también te ayuda un montón a la hora de trabajar. Esto que he hecho dentro del código HTML es aplicable a cualquier otro código sobre el que vaya a trabajar, y así, si yo ahora por ejemplo, quiero añadir un selector para este artículo pues sobre él ahora puedo con 'Control+barra espaciadora' 'Comando + barra espaciadora' ir buscando, en concreto, el tipo, en este caso, propiedad CSS que quiero aplicar y por ejemplo en muchas de ellas además, voy a tener muchas ayudas. Por ejemplo, en el caso del 'font-family' tengo un listado con los distintos 'font-family' que tengo configurado dentro de Dreamweaver, pero es que además, me muestra también las fuentes web que ya he configurado previamente. Incluso me permite añadir el administrador de fuentes para trabajar con él. Todo ello, sin haber salido de esta vista de código. Como podemos ver, pues también, es una herramienta muy potente. Voy a dejar como estaba este CSS y voy a volver de nuevo al código fuente. Otra herramienta que también es muy interesante. El hecho de que yo cuando tengo abierto un documento en concreto, justo debajo de él, en la parte superior de la vista de código, me pone todos los documentos que están relacionados con él. Quiero decir, todos los documentos CSS y javascript que se van a cargar cuando se cargue este archivo HTML y entonces va a ser muy fácil cambiar entre el lenguaje de programación CSS, el lenguaje de programación HTML y todos los demás. De hecho voy a crear un nuevo archivo de javascript y lo voy a utilizar para vincularlo y para ver todavía alguna opción más. Selecciono javascript, pulso 'Crear' guardo este documento dentro de la carpeta de javascript y dentro de él voy a crear una función, por ejemplo, 'test' y dentro de ella voy a pedir que haya un 'log' del valor que se envíe. Voy a volver de nuevo al 'index' y ahora voy a asociar este archivo con la etiqueta 'script', me moveré hasta 'js' seleccionaré este 'main'. En el momento en el que guardo este archivo debería de aparecerme, directamente ya en el cabecero, lo que pasa es que hay veces que es necesario volverse a la vista en vivo y luego a la vista código para poder actualizar esa conexión. Otra cosa que voy a poder ver ahora es que yo sobre el mismo javascript también voy a tener ayudas al código y, de hecho, si empiezo a escribir me va a dar las ayudas habituales pero entre ellas van a aparecer también las funciones que yo he definido previamente, aquí lo podemos ver, dentro de mi código, y de hecho, además cuando llego a la parte de añadir los parámetros, me va a dar también las opciones de parámetros en ese caso me estaba diciendo que el 'objeto val', pues por aquí podría poner un texto cualquiera y vemos que las ayudas visuales no solamente me sirven para trabajar con etiquetas ya creadas sino que también me sirve para trabajar con javascript y dentro de javascript con funciones propias de mi código. Es más, también puedo trabajar con clases de javascript y dentro de ellas me va a devolver todos los métodos posibles para esa clase en concreto y de nuevo también especificándome los parámetros que voy a poder añadir. Esto que ocurre con javascript de nuevo también lo vamos a ver dentro de PHP, y en él, tendremos lo mismo, tendremos las funciones más habituales tendremos las clases normales, pero además todos los métodos y todas las clases que hayamos creado dentro de nuestro sitio vamos a tenerlas accesibles dentro de las ayudas al código.

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.